オンラインサービスを使ったパフォーマンス解析の結果、当初は低スコアでした。

実行結果を見てみるとカルーセルに使っているJPEG画像がかなりサイズが大きいためでした。

エモい系と実写系の２パターンで作ったのですが画質優先でTotal 4MB近くあったので流石にスコアに影響が出てしまいました。

これらを改善するために、品質を保ちつつ圧縮を試みました。

検証で利用した３つのサービスの感想をメモしておきます。

Compress.io

JPEG、PNG、GIF、SVGをサポート、上限10MBまで。

圧縮率、画質ともに一番良いのですがファイルサイズが大きいとレスポンスが遅くなります。物によっては返答しなくなるので残念ながら使えないですね。小さなサイズのJPEGであれば実用性がありそうです。

ShortPixel

JPEG、PNG、GIFをサポート、上限10MBまで。

画質をLossy、Glossy、Losslessから選べるのでサイズと画質のバランスのいいものを選択できます。オンラインで実行前後の比較ができるのも便利。WordPressのプラグインも提供している。

TinyJPG

JPEG、PNGをサポート、上限5MBまで。

歴史が長いので安定して動作する。動作が早いし手軽に使えて便利です。圧縮率と画質もベストではないですがかなりいい結果が得られます。

様々なツールと連携しています。WordPressのプラグインも提供している。

Squoosh

サポートファイルタイプが書かれていないですがJPEG、PNG、GIFの読み込みを確認しました。サンプルもあるのでSVGも大丈夫そう。上限も書いてませんが約20MBのファイルもスムーズに読み込んでくれました。どうやらブラウザ内で作業してくれているようです。

オンラインで実行前後の比較ができるのも便利。オプションで圧縮設定変更をリアルタイムで反映してくれますがモノによっては時間がかかります。デフォルトの設定でも十分だと思います。シンプルで使い勝手がよく動作も早い。現時点で一番良さそうです。

まとめ

画質が選べるShortPixelが用途としては合っていました。後から見つけたSquooshのほうがより大きいサイズも対応していて良いと思いました。

ただ細かい部分の画質の調整が難しいので、レタッチソフトで納得の行く質とサイズで出力をしてからWP Smushitで軽く圧縮することにしました。軽く自動的に圧縮してくれるプラグインというところでWP Smushitがなかなか便利ですね。ただやはり細かい部分のクオリティは落ちてしまいますけど。

通常用途だったらShortPixelかTinyJPGのプラグインが良いと思います。