> ## Content Index > Fetch the complete content index at: https://www.sakashita.page/llms.txt > Use this file to discover other available public pages before exploring further. # ブログで使うWeb用の画像のフォーマットについて検討する - URL: https://www.sakashita.page/blog-image-formats-for-web/ - Published: 2025-11-13T03:00:59.000Z - Updated: 2025-11-13T03:01:05.000Z - Author: Sakashita Yasunobu - Tags: 技術 ## 背景と目的 普段から写真撮影を行っていると、画像ファイルが占める容量は無視できない規模になる。現在はNASとAmazon Photosに保存しているため、容量的な制約は少ないものの、ファイルサイズが小さくできるのであれば小さくしておく方が合理的だ。特にWeb公開を前提とする場合、ファイルサイズはアップロード・ダウンロード、そしてページ表示時間に直結するため、可能な限り小さい方が望ましい。 これまでは現像ソフトからJPEG品質100で出力し、Web用途など容量削減が望ましいケースではWebPに変換してきた。RAWファイルは別途バックアップしてアーカイブとして保存している。目視で画質劣化が認められないのであれば、全てWebPで保存しても問題ないのではないかと考えたが、より優れたフォーマットが存在する可能性があるため、現在利用可能な画像フォーマットについて調査した。 ## 主要な画像フォーマットの特徴 ### JPEG 最も広く普及している画像フォーマットで、互換性に関する信頼性は高い。しかし、規格自体が古く、現代的な圧縮技術と比較すると効率は劣る。 [JPEGについて知っておくべきすべてのこと | Adobe現代のwebや出版物の画像に欠かせない多目的画像ファイル形式、JPEGファイルについて紹介する便利なガイドです。![](https://static.ghost.org/v5.0.0/images/link-icon.svg)Adobe![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/media_1655923d8b0386180ca09391e8654c4e468090bb3.jpg)](https://www.adobe.com/jp/creativecloud/file-types/image/raster/jpeg-file.html) ### JPEG2000 JPEGの後継として開発されたが、実際にはほとんど普及していない。対応ソフトウェアやブラウザが限られており、実用性は低い。 ### WebP Googleが開発した画像フォーマットで、可逆圧縮・非可逆圧縮の両方に対応している。主要ブラウザでの対応も進んでおり、実用性が高い。JPEGと比較して同等の画質でファイルサイズを削減できる。 [WebPファイルの詳細 | Googleのweb画像形式 | Adobeオンライン写真のサイズの削減を目的としてGoogleが設計した画像形式であるWebPを紹介します。このガイドでは、次回のプロジェクトでWebPファイルをどのように使用できるかを説明します。![](https://static.ghost.org/v5.0.0/images/link-icon.svg)Adobe![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/media_13f659e708c031c519b546ba716f2cdc0d34c90ec.jpeg)](https://www.adobe.com/jp/creativecloud/file-types/image/raster/webp-file.html) ### AVIF AV1動画コーデックをベースとした比較的新しい画像フォーマット。圧縮効率はWebPよりも優れているが、エンコード・デコードのコストが高い。 ### PNG 可逆圧縮専用のフォーマット。非可逆圧縮の文脈におけるJPEGに相当する、可逆圧縮における標準的な選択肢。 [PNGファイルの詳細と開く方法 | AdobePNG画像ファイルは、オンライングラフィックおよびロゴを作成するために幅広く使用されています。 その歴史、考えられるメリットとデメリット、編集方法を説明します。![](https://static.ghost.org/v5.0.0/images/link-icon.svg)Adobe![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/media_190563911f4a579a9d6f1f9d5b499b44d6413088b.jpg)](https://www.adobe.com/jp/creativecloud/file-types/image/raster/png-file.html) ### TIFF 主に印刷業界や専門的な用途で使用される。写真を公開するWeb用途には適さない。 [TIFFファイルの詳細と開く方法 | AdobeTIFFファイルとは何か、可逆（ロスレス）圧縮方式の画像はどこでどのように使うのかを説明します。アドビのガイドでTIFFファイル形式について調べましょう。![](https://static.ghost.org/v5.0.0/images/link-icon.svg)Adobe![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/media_157498f2d538da5fc13eb9f422dcb54d8b57a5c60.jpeg)](https://www.adobe.com/jp/creativecloud/file-types/image/raster/tiff-file.html) ## 圧縮効率と実用性の検討 結論から。 現代では少なくともWeb用といったファイル容量が重要なシーンではWebp/AVIFがベストだ。結局WebpとAVIFのどっちを使えばいいのだということに関しては、とりあえずWebpを使っておけば問題ないだろう。 GoogleとしてもWebp/AVIFを推奨している。 > WebP と AVIF は一般的に古い形式よりも圧縮率が高いため、可能な限り使用する必要があります。 [適切な画像形式を選択する | Articles | web.devウェブサイトに最適化された画像を提供するには、まず適切な画像形式を選択します。この投稿は、正しい選択をするうえで役立ちます。![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/favicon-20.png)web.devX![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/translated-4.svg)](https://web.dev/articles/choose-the-right-image-format?hl=ja) [webp vs avif vs jpeg2000 - Qiitaこれは何？ つい先日 avif という形式が使いやすそうだという記事を読み。 webp とどっちがいいの？ と思い。 そういえば圧縮対決の記事見てないなと思い。 対決させてみた。 せっかくなので jpeg2000 も参戦。 使い方とか全然書いてないけど、コードは http…![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/apple-touch-icon-ec5ba42a24ae923f16825592efdc356f-2.png)QiitaNabetani![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNjg1NCUyRnByb2ZpbGUtaW1hZ2VzJTJGMTUzMDEwMDUwMT9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmYmc9RkZGRkZGJmZtPXBuZzMyJnM9NjIxZTU2YWY1NjBjY2JlMTg5ZjU3N2M5OTYzOGI2NWM%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3Daedd2e70414391bca35cf8e88c4f3dbc?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9d2VicCUyMHZzJTIwYXZpZiUyMHZzJTIwanBlZzIwMDAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0wNjYyY2VkMWU5YjAyYmYwNTNkYjIwZjIyZGY5MDgxYQ&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBOYWJldGFuaSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTEyMjRjNmRjOGUzN2Q1NzdmNzU1ZDU0Mjc1MjNhYTNh&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=4da0057917d754db313ea4be8379a876)](https://qiita.com/Nabetani/items/9064fa3b86c10c2d0021) [AVIF 画像の配信 | Google Codelabs![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/favicon-18.png)Google Codelabs![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/translated-3.svg)](https://codelabs.developers.google.com/codelabs/avif?hl=ja#2) [PNG に代わるロスレス圧縮の画像フォーマットをさがす - Seaoak’s READ![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/favicon-19.png)Seaoak's READSeaoak![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/table20220223a1.png)](https://blog.seaoak.jp/new-image-format-for-png/) ### WebP vs AVIF 圧縮技術としてはAVIFの方が優秀であることは確かだが、エンコード・デコードのコストを考慮すると、2025年現在ではまだWebPの方が実用的である。 参考として、同一画像のLossless WebP形式での容量は87.8MBであった。 [“webp” | Can I use... Support tables for HTML5, CSS3, etc![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/favicon-128-3.png)Can I use... Support tables for HTML5, CSS3, etc![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/browserstack-3.svg)](https://caniuse.com/?search=webp) [“avif” | Can I use... Support tables for HTML5, CSS3, etc![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/favicon-128-2.png)Can I use... Support tables for HTML5, CSS3, etc![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/browserstack-2.svg)](https://caniuse.com/?search=avif) ### ブラウザ対応状況 主要ブラウザではWebPとAVIFの両方がサポートされているが、WebPの方が対応開始時期が早く、より広範な環境での動作が期待できる。 [適切な画像形式を選択する | Articles | web.devウェブサイトに最適化された画像を提供するには、まず適切な画像形式を選択します。この投稿は、正しい選択をするうえで役立ちます。![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/favicon-16.png)web.devX![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/translated-1.svg)](https://web.dev/articles/choose-the-right-image-format?hl=ja) ## 実際の運用方法 ### 現像ソフトからの出力 普段はCapture Oneを使用している。Capture OneをはじめとするNikon NX-Studioなどの一般的な現像ソフトは、WebPやAVIFを直接出力する機能を持っていないことが多い。そのため、現実的にはなんらかの中間画像フォーマットを経由してWebP/AVIFに変換する必要がある。 [キヤノン：製品マニュアル｜Digital Photo Professional｜調整結果の保存![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/favicon-74.ico)Canon![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/canon_logo.svg)](https://cam.start.canon/ja/S002/manual/html/UG-04%5FEditImage%5F0170.html#EditImage%5F0170%5F2) [対応フォーマットについて![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/icon/favicon-75.ico)Nikon Corporation![](https://storage.ghost.io/c/94/1f/941f9972-ad5c-4231-a438-ca329c85433f/content/images/thumbnail/logo_01.svg)](https://nikonimglib.com/nxstdo/onlinehelp/ja/supported%5Fformats%5F4.html) ### 実際の変換フロー 現在採用しているワークフローは以下の通り 1. 現像ソフト（Capture One）からJPEG品質100で出力 2. 出力されたJPEGをWebPに変換 JPEG品質100を中間フォーマットとして選択している理由は、現像ソフトからの出力において最も一般的で安定しており、後続の変換処理で画質劣化を最小限に抑えられるためである。 ## 結論 2025年現在、Web用画像フォーマットとしてはWebPが最も実用的な選択肢である。AVIFは圧縮効率では優れているものの、エンコード・デコードコストや対応環境を考慮すると、まだWebPの方が総合的に優れている。 実際の運用においては、現像ソフトからJPEG品質100で出力し、WebPに変換するワークフローが、品質と効率のバランスが取れた現実的な選択肢である。