Google Developers で画像最適化を学んだメモ

今日はウェブの画像最適化について学んだ。

参考文献

developers.google.com

メモ

googleが主張するところによると、

• 不要な画像は使うな
• 画像はたしかに多くのことを語るが、不要な画像はユーザーのためにならない
• 画像にする前に出来るだけCSS3を使うのもオススメ

画像化されたテキストは良くない

• テキストを画像化するのは避けよう
• ブランディングの意図とかもあると思うが、特に必要性がなければユーザーのためにならない

ベクター形式を優先せよ

画像はベクター画像とラスター画像に分かれる。

単純な幾何学図形によって構成される画像には、ベクター画像がオススメ

• SVGを使うのが良い
• SVGの最適化ツールはSVGO https://github.com/svg/svgo

ラスター形式の選択肢

そうでないものについてはラスター画像を使う。ラスターには普及してる形式が3つある。

• GIF→アニメーション
• JPEG→写真やスクリーンショットの類
• PNG→ロスのない高精細な画像

ラスター画像の最適化ツールはこれ

• GIF→Gifsicle https://www.lcdf.org/gifsicle/
• JPEG
  • ロスなしならjpegtran http://jpegclub.org/jpegtran/
  • ロスありならImageMagick http://www.imagemagick.org/script/index.php [*1]
• PNG
  • ロスなしならoptipng http://optipng.sourceforge.net
  • ロスありならpngquant https://pngquant.org

自動化を徹底せよ

あとは、とにかく自動化をおしすすめることで、ウェブにアップロードする画像はすべて最適化されているようにしろ、とのこと。

*1:ImageMagick は筆者が付け加えた情報で、Google Developers には記載されていない。