適当な容量に「圧縮」できていますか？

みなさん、いかがお過ごしでしょうか。

web制作コーダー2年目ひーちゃんです。

今回は、画像の圧縮についてお話します。

このブログは以下のようなコーダーにおすすめです。

・画像の圧縮はしてるけど雰囲気でやっている

・表示速度に関係することは知っているけど取り組んでいない

10分を目安にお読みいただけると思います。

さっそくですが、事前知識として

・画像１枚のファイルサイズは、200KB以下に抑える

が必要です。

詳しい理由の説明は省略しますが、Googleによると1ページあたりのページ容量を1.6MB以下にすることが望ましいとされています。

したがって、単純計算で6枚程度の画像を表示すると目安の1.6MBを超えることになります。

この条件をできる限りクリアすべく圧縮を行うわけですが、今回はわかりやすい例をあげます。

1366px ×768px のpng画像を、pngとjpegの１倍でデザインデータから書き出したとものと仮定し、それらを圧縮します。最後にそれぞれをwebpに変換し、計4つの画像容量を比較します。

それでは、まずオリジナルの画像がこちらです。

[ サイズ:1366px ×768px  / 形式：png ] 

容量：2.5MB

[ サイズ:1366px ×768px / 形式：jpeg ] 

容量：1.1MB

では、それぞれ圧縮します。(使用するツールは「TinyPNG」です。圧縮後に名前が変わらないので地味におすすめです笑)

圧縮後

[ サイズ:1366px ×768px / 形式：png ] 

容量：627KB (-75%)

[ サイズ:1366px ×768px / 形式：jpeg ] 

容量：339KB (-68%)

webp変換後 

※ココナラブログがwebp形式に対応していないため画像はありません。

[ サイズ:1366px ×768px / 形式：webp(元png) ] 

容量：301KB (-52%)

[ サイズ:1366px ×768px / 形式：webp(元jpeg) ] 

容量：270KB (-21%)

以上が4通りの圧縮結果です。比べると

圧縮後

png : 627KB

jpeg : 339KB

webp変換後

png : 301KB

jpeg : 270KB

となりました。

結果から、元サイズが1366px ×768pxとトップ画像に使われやすい、比較的大きいサイズの画像でここまでの改善ができました。デザイン次第ではありますが、なんとなく圧縮するのではなく「１ページあたりのファイル容量を1.6MBにもっていく」「200KB以下の画像で構築する」といった意識が持てれば、表示速度の観点からもSEO効果が見込めますね。