ランディングページの画像圧縮をオンラインでするなら？

手軽にできるオンライン圧縮、どれが最適解？

画像サイト『Unsplash』からダウンロードした下記画像をリネーム・リサイズ等をせずに圧縮し、比較しました。

※利用頻度が高そうな1920 × 1280の画像を使用しました

圧縮手段は気軽に使えるオンラインのツールを利用します。

1. 1. 圧縮なし
   2. TinyPNG圧縮
   3. squooshでWebp変換
   4. TinyPNG圧縮→squooshでWebp変換
   5. Squooshでwebp変換→Tiny PNGで圧縮

結論、Webp変換後にTinyPNGで圧縮するのが良いっぽい

今回の5パターンで最も圧縮されたのは『SquooshでWebp形式に変換した後、TinyPNGで圧縮する』方法です。

結論、とりあえずWebp形式にしてから圧縮する感じで

ランディングページのような画像を大量に使う可能性があるページの読み込み速度をアップさせるためには、画像の圧縮は必須。

Webp形式のような次世代型のフォーマットを活用することで、より表示スピードに優れたLPを作れるはずです。

Webp形式の対応ブラウザ問題もありますが…22年9月現在は解決傾向にありますので、今後は積極的にWebp形式を使うのが最善なような気がします。

もっとガッツリ圧縮したい場合やブログサイトのような大量の画像を圧縮させたい場合にはオンラインでの変換は不向きです。

そのうち記事にできたら…と思いますので、Twitterで更新通知をお待ちください。