みなさん、いかがお過ごしでしょうか。
web制作コーダー2年目ひーちゃんです。
今回は、画像の圧縮についてお話します。
このブログは以下のようなコーダーにおすすめです。
・画像の圧縮はしてるけど雰囲気でやっている
・表示速度に関係することは知っているけど取り組んでいない
10分を目安にお読みいただけると思います。
さっそくですが、事前知識として
・画像1枚のファイルサイズは、200KB以下に抑える
が必要です。
詳しい理由の説明は省略しますが、Googleによると1ページあたりのページ容量を1.6MB以下にすることが望ましいとされています。
したがって、単純計算で6枚程度の画像を表示すると目安の1.6MBを超えることになります。
この条件をできる限りクリアすべく圧縮を行うわけですが、今回はわかりやすい例をあげます。
1366px ×768px のpng画像を、pngとjpegの1倍でデザインデータから書き出したとものと仮定し、それらを圧縮します。最後にそれぞれを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ページあたりのファイル容量を1.6MBにもっていく」「200KB以下の画像で構築する」といった意識が持てれば、表示速度の観点からもSEO効果が見込めますね。