Web画像を軽量化する
寸法と形式を確認し、用途に合うサイズへ変更して容量を抑えます。
Category
画像・デザイン
画像の圧縮、サイズ変更、切り抜き、形式変換、色調整、QRコード、CSSデザインなどをブラウザ内で作成できます。画像を外部サーバーへアップロードせず、公開前素材を調整できます。
41ツールImage task finder
画像の用途と完成条件からツールを選ぶ
画像は寸法、形式、容量、透過、残存情報を個別に確認します。保存先の要件を先に決め、元画像を残してから加工してください。
| やりたいこと | 使うツール | 処理結果 | 確認すること |
|---|---|---|---|
| Web掲載用に容量を小さくする | 画像圧縮 → | 画質・寸法を調整した画像 | 文字と輪郭を拡大確認 |
| 幅と高さを用途へ合わせる | 画像リサイズ → | 指定ピクセル寸法の画像 | 縦横比と拡大劣化に注意 |
| 背景色を透明または単色にする | 画像透過・背景単色化 → | 色距離で処理したPNG | 複雑な輪郭には不向き |
| 顔・番号・文字を見えにくくする | 画像モザイク・ぼかし → | 選択範囲を処理したPNG | 原寸で判読できないか確認 |
| 撮影日時・GPS等を確認する | EXIF情報確認 → | 主要メタデータ一覧 | 未対応項目が残る可能性あり |
| サイト用アイコンを作る | favicon生成 → | 3サイズのPNGとlinkタグ | 正方形の元画像を使用 |
Recommended order
画像を公開するまでの確認順
掲載枠を決め、画素数と形式を調整したあと、情報・画質・容量を完成ファイルで確認します。
- 掲載先の条件を決める
表示寸法、比率、透過の要否、対応形式、容量上限を確認します。
- 切り抜きと寸法を整える
必要な範囲を決め、縦横比を保って過剰な画素数を減らします。
- 形式と画質を選ぶ
写真・図版・透過の性質に合わせ、候補を実際の掲載サイズで比較します。
- 共有情報と表示を検査する
EXIF、ぼかし範囲、背景、文字、ファイル容量を完成版で確認します。
Guide
目的に合わせた使い方
画像素材を加工する
切り抜き、余白、背景、透過、角丸、注釈など必要な処理を行います。
デザイン値を作る
配色、グラデーション、影、角丸、QRコードなどを生成して保存します。
Detailed guides
詳しい使い方と注意点
PPI計算方法・300PPIとは｜解像度と画面サイズから求める
解像度と対角インチからPPIを計算する式を具体例で解説。300PPIの画像を印刷する場合との違いも整理し、無料ツールで画素密度を確認できます。
解説を読む →WebP・AVIF・JPEG・PNGの使い分け：画質・透過・対応環境で選ぶ
Web画像形式を容量だけで決めず、写真、図版、透過、アニメーション、ブラウザ対応から選ぶ方法を解説します。
解説を読む →画像圧縮で画質と容量が変わる仕組み：公開前に見るべき箇所
不可逆圧縮と可逆圧縮の違い、再圧縮による劣化、画像別の確認ポイントを説明します。
解説を読む →ブラウザ内処理とサーバー処理の違い：入力データはどこで扱われる？
Webツールへ入力したテキストやファイルが、ブラウザ内処理とサーバー処理でどのように扱われるかを説明します。
解説を読む →複数画像・写真をPDFに変換する方法｜PNG・JPGを1つにまとめる
複数のPNG・JPG・写真を選択順に1つのPDFへ変換して保存する方法を解説。A4・画像サイズ、余白、ページ順、容量の違いも確認できます。
解説を読む →Web掲載画像をリサイズ・圧縮・形式変換する実務手順
掲載枠の寸法を決め、画像のリサイズ、圧縮、WebP等への形式変換、画質と容量の検算を行う順番を解説します。
解説を読む →画像・PDFを共有する前のローカル処理と個人情報確認
EXIF、PDF文書情報、ファイル名、本文、ハッシュ値を分けて確認し、ブラウザ内処理後のファイルを安全に共有する手順です。
解説を読む →読みやすい図解画像を配色・文字・代替情報から作る手順
画像の目的を決め、配色、コントラスト、注釈、サイズ、本文と代替テキストを確認してアクセシブルな図解を作る方法です。
解説を読む →画像圧縮JPEG・PNG・WebPを画質とサイズを指定して軽量化画像リサイズ縦横比を保ちながら画像の幅・高さを変更画像形式変換PNG・JPEG・WebPを相互変換QRコード生成URLや文字列から高解像度QRコードを生成画像切り抜き座標と寸法を指定して画像の必要な範囲を切り抜きfavicon生成画像からWebサイト用アイコンとHTMLタグを生成CSSグラデーション生成色・角度・位置を調整してCSSを生成CSSボックスシャドウ生成影の位置・ぼかし・色を調整してCSSを生成SVG最適化SVGのコメント・メタデータ・不要な空白を削除画像カラーパレット抽出画像から代表的な色を最大8色抽出画像メタデータ削除画像を再生成してEXIF・位置情報を除去OGP画像テンプレートタイトルと配色から1200×630pxのOGP画像を作成CSS clamp生成画面幅に応じて滑らかに変わるCSS値を生成CSS border-radius生成四隅の丸みをプレビューしてCSSを生成画像透過・背景単色化指定背景色に近い部分を透過または単色へ置換EXIF情報確認画像の撮影情報・GPS情報・メタデータ有無を確認WebP・AVIF比較WebPとAVIFを並べて容量・寸法・見た目を比較画像への文字・透かし追加画像へ位置・色・透明度を調整した文字透かしを追加CSS三角形生成方向・サイズ・色を指定してCSS三角形を生成カラーコントラスト確認文字色と背景色のWCAGコントラスト比を確認画像の余白・枠追加画像の周囲へ色付き余白と枠線を追加複数画像連結複数画像を縦または横へ1枚に連結CSS Flexbox生成配置を見ながらFlexboxのCSSを生成CSS Grid生成列・行・間隔からGridレイアウトを生成グラフ画像作成CSVからグラフを作りPNG・JPEG・WebPで保存SVGアイコン色変更fill・stroke色をまとめて変更画像モザイク・ぼかし画像上の枠を動かしてモザイク・ぼかしを適用バーコード生成CODE128・JAN・EANバーコードを画像作成QRコード読み取り画像内のQRコードを端末内で解析画像への注釈・図形追加画像へ矢印・枠・文字・番号を配置動画サムネイル抽出動画の指定時刻を画像として保存音声波形画像生成音声ファイルから波形PNGを作成画像コンタクトシート作成複数画像を一覧画像へまとめる画像分割・タイル化画像を行・列で均等分割グラデーション画像生成色・角度・寸法からPNGを作成プレースホルダー画像生成文字入りの仮画像を作成市松模様画像生成2色の市松模様PNGを作成画像グリッド線追加画像へ指定間隔の補助線を追加画像角丸加工画像の四隅を透明な角丸へ加工カラースケール生成2色の間を補間して配色段階を生成画像カラーピッカー画像の指定位置から正確なHEX・RGB色を取得
Tips
利用時のポイント
- 元画像を別途保管する
- 用途に必要な最大寸法を決める
- 保存後の画質と文字の読みやすさを確認する
FAQ
よくある質問
画像はアップロードされますか？
ブラウザ内で読み込み・加工し、PitaToolsのサーバーへ送信しません。
元画像は上書きされますか？
上書きせず、処理結果を新しいファイルとしてダウンロードします。