画像データの最適化

.jpg, .gif, .pngなど様々な画像フォーマットが存在する。これらは用途に応じて使い分けることで、パフォーマンスを落とさず高速にブラウザで表示することが可能である。

画像フォーマットの選び方

• 透明度を使いたい→PNG
• アニメーション→GIF
• 彩豊な写真→JPG
• シンプルなアイコンやロゴ→SVG

適切なフォーマットで画像データを準備したら、以下のことを実践しよう。

• PNGファイルはTinyPNGで圧縮する。画質を落とさずに圧縮可能。
• 可能な限りシンプルな画像を選ぶ。
• JPEGファイルはJPEG-optimizerで元データの30-60%ほどにクオリティを落とす。
• 表示されるpixelの大きさによって画像の大きさを変える。また、メディアクエリで違う画像を使う。
• imgixのようなCDNを使う。
• 画像データのメタデータは削除する。

CDNについては以下の通り。

第１回 ＣＤＮ の 仕組み （CDNはどんな技術で何が出来るのか） | REDBOX Labo