画像を最適化する、のページではjpegtranなどでロスレス圧縮しろ言ってくるが、腑に落ちないので調べてみた。

気になっている点

• imgタグのwidth, heightよりも大きい画像を使うと怒られるのか(ブラウザが画像を縮小して表示するので遅くなるはずだ)
• 非可逆圧縮もやれと怒るのか

実験

一眼レフのカメラで撮った写真をmacのpreviewを使って、500×500にトリミングしたものを用意した。
この画像をベースに以下の条件を作ってやってみる。

• 圧縮
  • 未圧縮、可逆圧縮(jpegtran -copy none -optimize)、非可逆圧縮(macのpreviewで50%で書きだした)
• 画像の大きさ
  • imgのwidth,heightと一致する、しない

できあがったのがこれ。

ちなみにjpegtranによって、8KBほど小さくなった！

結果

非可逆圧縮のものだけ怒られた。
未圧縮のものは怒られなかったのはなぜ…？

考察

jpegtranなどで可逆圧縮すれば黙らせることができる。
jpegの未圧縮のものは怒られなかったのが腑に落ちないけど、オリジナルの画像を使う意図を汲んでいるということでしょうか？(例えば写真素材屋の写真)。
よーし！どんどん可逆圧縮しろー！という気持ちにならないでもないですが、EXIFには有用な情報がたくさんあるので、よく考えてやるべき。

スッキリ。

もちろん、やりたいのはPageSpeedInsightsに怒られないようにすることではなく、ページの表示を速くすることで、俺達の戦いはまだこれからだ！
カイバ先生の次回作にご期待ください！