オンラインサービスを使ったパフォーマンス解析の結果、当初は低スコアでした。
実行結果を見てみるとカルーセルに使っているJPEG画像がかなりサイズが大きいためでした。
エモい系と実写系の2パターンで作ったのですが画質優先でTotal 4MB近くあったので流石にスコアに影響が出てしまいました。
これらを改善するために、品質を保ちつつ圧縮を試みました。
検証で利用した3つのサービスの感想をメモしておきます。
Compress.io
JPEG、PNG、GIF、SVGをサポート、上限10MBまで。
圧縮率、画質ともに一番良いのですがファイルサイズが大きいとレスポンスが遅くなります。物によっては返答しなくなるので残念ながら使えないですね。小さなサイズのJPEGであれば実用性がありそうです。
Compressor.io – optimize and compress JPEG photos and PNG images
Optimize and compress your jpeg and png images online. Compressor is a lossy and lossless photo compression tool.
ShortPixel
JPEG、PNG、GIFをサポート、上限10MBまで。
画質をLossy、Glossy、Losslessから選べるのでサイズと画質のバランスのいいものを選択できます。オンラインで実行前後の比較ができるのも便利。WordPressのプラグインも提供している。
Free Online Image Compressor, WebP/AVIF Converter and background removal tool
Free online optimizer tool for JPG, PNG & (animated) GIF images. Free AVIF/WebP converter and background removal tool. Compress your images by up to 90% without any humanly visible differences.
TinyJPG
JPEG、PNGをサポート、上限5MBまで。
歴史が長いので安定して動作する。動作が早いし手軽に使えて便利です。圧縮率と画質もベストではないですがかなりいい結果が得られます。
様々なツールと連携しています。WordPressのプラグインも提供している。
Smart WebP, JPEG and PNG compression
TinyJPG reduces the file size of your JPEG images. Every uploaded image is analyzed to apply the best possible JPEG encoding. Based on the content of your image an optimal strategy is chosen. The result is a quality image without wasting storage or bandwidth!
Squoosh
サポートファイルタイプが書かれていないですがJPEG、PNG、GIFの読み込みを確認しました。サンプルもあるのでSVGも大丈夫そう。上限も書いてませんが約20MBのファイルもスムーズに読み込んでくれました。どうやらブラウザ内で作業してくれているようです。
オンラインで実行前後の比較ができるのも便利。オプションで圧縮設定変更をリアルタイムで反映してくれますがモノによっては時間がかかります。デフォルトの設定でも十分だと思います。シンプルで使い勝手がよく動作も早い。現時点で一番良さそうです。
Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
まとめ
画質が選べるShortPixelが用途としては合っていました。後から見つけたSquooshのほうがより大きいサイズも対応していて良いと思いました。
ただ細かい部分の画質の調整が難しいので、レタッチソフトで納得の行く質とサイズで出力をしてからWP Smushitで軽く圧縮することにしました。軽く自動的に圧縮してくれるプラグインというところでWP Smushitがなかなか便利ですね。ただやはり細かい部分のクオリティは落ちてしまいますけど。
通常用途だったらShortPixelかTinyJPGのプラグインが良いと思います。