1) 圧縮が重要な理由
小さい画像は読み込みが速く、帯域幅を節約し、ユーザー体験とSEOを向上させます。
2) 形式の選択
- JPEG：写真に最適、ロッシー圧縮。
- PNG：透明度、シャープなエッジ、ロスレスまたはロッシー。
- WebP：両方サポート、優れた圧縮。
- AVIF：最高の圧縮、新しいブラウザ。
3) 品質設定
JPEG/WebPの場合、80-85%から始め、視覚的にテストします。ロスレスPNGの場合、ツールで最適化します。
4) 寸法の調整
表示サイズにリサイズします。4000×3000pxをサムネイルに提供しないでください。レスポンシブ画像にsrcsetを使用します。
5) ツールとワークフロー
Orquiのようなローカルツールでプライバシーを保ちながら圧縮します。複数の画像をバッチ処理します。
6) 自動化
ビルドプロセスにImageOptimやSharpなどのツールを統合してアップロード時に圧縮します。
7) テストと測定
LighthouseやPageSpeed Insightsを使用して実際のパフォーマンスを測定し、改善を反復します。