GoogleChromeチームのAddy Osmani氏らによる画像最適化のテキストEssential Image Optimizationが、基礎から最新情報まで網羅されていてとても勉強になります。
Essential Image Optimization
https://images.guide/
ソースがGitHubで公開されていて少しずつでも翻訳してみたいなーと思いつつ、目次だけ日本語で紹介します。
Essential Image Optimization 目次
- はじめに
- 画像フォーマットの選び方
- 謙虚なJPEG
- JPEGの圧縮モード
- プログレッシブJPEGの利点
- プログレッシブJPEGの実用例
- プログレッシブJPEGの欠点
- プログレッシブJPEGの作り方
- クロマ(またはカラー)サブサンプリング
- JPEGに続く次世代フォーマット
- JPEGエンコーダーの最適化
- MozJPEGとは何か
- Guetzliとは何か
- MozJPEGトGuetzliの比較
- Butteraugli
- WebPとは
- WebPにできること
- WebPの実用例
- WebPエンコーダのはたらき
- ブラウザのサポート状況
- WebPへの変換方法
- OSごとのWebPの表示方法
- WebPの配信の仕方
- SVGの最適化
- 非可逆圧縮の繰り返しは避ける
- 不要な画像のデコードやリサイズを減らす
- srcsetによるHiDPI画像の提供
- アートディレクション
- カラーマネジメント
- CSSスプライト
- 画像の遅延読み込み
- display: none;の罠を避ける
- 画像加工機能付きのCDNの使いどころ
- 画像のキャッシュ
- 画像の先行読み込み(preloading)
- 画像のパフォーマンスバジェット
- まとめと推奨値
- トリビア
JpegやWebPの話題が多めですが、一読をお勧めします。
WebP
WebPもEdge、Firefoxの対応で利用が増えていますね。Wikipediaや、あのマイクロソフトも今やWebPを積極的に利用しています。
弊社のページまるごとWebP変換・効果測定と一括ダウンロードも頻繁に使われています。Appleの対応に期待しましょう。
ページまるごとWebP変換・効果測定と一括ダウンロード
https://sim.lightfile.net/webp/