メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
画像・軽量ファイル
/
画像フォーマットガイド
▨
画像フォーマットガイド
image/image-format-guide
JPEG/PNG/WebP/AVIF/SVG等の画像フォーマットの特徴と使い分けを解説する。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
画像フォーマットガイドでは、JPEG/PNG/WebP/AVIF/SVG等の画像フォーマットの特徴と使い分けを解説する。
関連する観点として 画像フォーマット、JPEG PNG、image format を確認し、結果をコピーして別の作業に使えます。
結果
形式 圧縮 透過 アニメ 用途 ────────────────────────────────────── JPEG 非可逆 × × 写真,自然画像 PNG 可逆 ○ × ロゴ,スクリーンショット WebP 両方 ○ ○ Web全般(推奨) AVIF 非可逆 ○ ○ 次世代(WebPより高圧縮) SVG ベクタ ○ ○ アイコン,ロゴ,イラスト GIF 可逆 ○ ○ 簡易アニメ(256色) ICO - ○ × ファビコン BMP 無圧縮 × × 非推奨 TIFF 可逆 ○ × 印刷,写真保存 --- Web での推奨 --- 写真: WebP (フォールバック: JPEG) アイコン: SVG スクリーンショット: WebP or PNG アニメーション: WebP or MP4 ファビコン: SVG + ICO --- サイズ目安 --- WebP は JPEG より 25-35% 小さい AVIF は JPEG より 50% 小さい SVG はサイズ非依存(スケーラブル) --- Next.js --- <Image> コンポーネントで自動WebP変換
コピー
使い方
結果欄の先頭表で、形式ごとの圧縮方式、透過、アニメ対応、用途を確認します。
Web での推奨セクションで、写真、アイコン、スクリーンショット、アニメーション、ファビコンの候補を見ます。
サイズ目安セクションで、WebP、AVIF、SVG のざっくりした特徴を確認します。
必要ならコピーボタンで固定テキスト全体をコピーし、仕様メモやレビューコメントに貼り付けます。
入力例・出力例
INPUT
JPEG
OUTPUT
JPEG 非可逆 × × 写真,自然画像
結果欄の形式表にある1行です。
INPUT
写真
OUTPUT
写真: WebP (フォールバック: JPEG)
Webでの推奨セクションに表示されます。
INPUT
Next.js
OUTPUT
<Image> コンポーネントで自動WebP変換
固定テキスト末尾の注記です。
よくある利用シーン
画像形式の特徴を、対応機能と用途まで含めて1つのテキストで共有したいとき。
フォーマット選定のレビューで、透過やアニメ対応の有無をまとめて確認したいとき。
WebPやAVIFの採用方針を説明する前に、JPEG/PNG/GIFとの違いを整理したいとき。
コピーボタンで画像形式の早見表をドキュメントへ転記したいとき。
結果確認のポイント
出力サイズ、縦横比、ファイル形式、画質が用途に合っているか確認してください。
画像フォーマット、JPEG PNG、image formatの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
重要な元画像は別に保存し、必要に応じて元データと比較してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
画像フォーマットガイドの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
写真をWebに掲載する場合、JPEGとWebPのどちらを選ぶべきですか?
WebPが対応ブラウザでは推奨です。同画質でJPEGより25〜35%程度ファイルサイズを削減できます。古いブラウザ向けに`<picture>`要素でJPEGをフォールバックとして用意するのが現実的な運用です。
PNGとJPEGの使い分けはどう考えればよいですか?
PNG は可逆圧縮でスクリーンショットやロゴ・テキスト入り画像など輪郭がくっきりしたコンテンツに向いています。JPEGは写真など色階調が豊富なコンテンツに向いており、非可逆圧縮で大幅にサイズを削減できます。
GIFの代わりに使えるアニメーション形式はありますか?
WebPアニメーションや動画形式(MP4/WebM)が代替として一般的です。GIFは256色に制限されるためファイルサイズが大きくなりがちですが、WebPアニメーションは同じ内容でGIFより大幅に軽量化できます。
関連ツール
画像圧縮
画像をブラウザ上で圧縮・軽量化。JPEG/WebP出力、品質スライダーで調整。サーバーにアップロード不要で安全。
alt属性チェックリスト
装飾画像、情報画像、リンク画像、キャプション重複、125文字目安など alt 属性の判断項目を表で確認できます。
バナーサイズ一覧
Leaderboard、Medium Rectangle、Mobile Banner など代表的な広告バナー寸法を一覧表示します。
ダミー画像生成
指定サイズのダミー画像(プレースホルダー)をCanvas APIで生成。色・テキスト・フォーマット指定可能。Webデザインに。
favicon生成
1〜2文字またはアップロード画像から 16/32/48/180/192/512px の PNG favicon を canvas で生成します。
ファビコンサイズ一覧
16×16 から 512×512 までの favicon 用途、HTML link タグ、manifest icons の雛形を確認できます。
<figure>タグ生成
入力した画像 URL を src に入れ、loading と decoding を付けた figure/figcaption の雛形を生成します。
アイコンサイズ一覧
favicon、Apple Touch、Android Chrome、Windows Tile、iOS/Android アプリの代表アイコンサイズを用途別に確認できます。