サイトの表示速度を上げる為に画像ファイル容量を削る

ウェブ

SEO対策の一つとしてウェブサイトの表示速度が注目されるようになりました。

今回はその方法の一つとしてサイトに表示する画像のファイルを加工する事でファイルサイズを削りサイトの表示速度に少しでも上げる事を目標とし、加工前と加工後の違いを比較を含め説明します。

PageSpeed Insights

元画像について

元画像が下記の example.png を例にします。

example.pngの詳細は以下の通りです。

ファイル名example.png
画像形式 PNG
サイズ 167KB

対策1:画像形式を変更

png形式の画像をjpg形式に変換してみます。

jpg形式はpng形式の画像を圧縮した形式になりますので、ファイルサイズを小さくするのに期待できます。

画像形式の変換

画像形式の変換は本来であればコンピュータ上で画像加工のソフトウェアを使って形式変換したいところですが、インターネットが普及している現在、簡単にウェブ上で変換できる無料サービスが色々ありますので、これを使わない手はありません。

オンラインでPNGをJPGに変換
オンラインで様々なPNGをJPGに無料で変換。PNGをJPGに変換するためのオンラインアプリです。
オンラインにPNGをJPGに変換する、無料で.pngを.jpgに変換する。
✨ OnlineConvertFree ⭐ ️ を使って、無料ですべてのPNGファイルをJPGに変換します。オンラインで瞬時にPNGイメージをJPGに変換します。✌ ️
PNG JPG 変換。オンライン フリー — Convertio
数秒でPNGをJPGファイルへ変換する最良の方法。 100%無料で、安全、そして使いやすい! Convertio — いかなるファイルのどんな問題も解決する高度なオンラインツール。

変換結果

上記3つの無料変換サービスを使ってpngからjpgへファイル形式変更した結果は以下の通りです。

サイト名変換後サイズ変換前との差
オンラインでPNGをJPGに変換52KB-115KB
オンラインにPNGをJPGに変換する52KB -115KB
PNG JPG 変換。オンライン フリー — Convertio52KB -115KB

どこのサイトも特に変わらず同じ結果となりましたが、70%程度のファイルサイズが削れたのは効果大です。

画像容量圧縮サイトを利用する

以下の無料サービスを使ってjpgから更にファイルサイズを削れないか検証します。

画像サイズ変換サービス|画像のサイズをきれいに変更
画像サイズをきれいに変更する無料サービスです。デジカメ写真や携帯撮影写真の画像のサイズをきれいに変換、変更できます。
TinyJPG – Compress JPEG images intelligently
Make your website faster and save bandwidth. TinyJPG is the best automatic JPEG optimizer and compresses your JPEG images by 40-60%!
JPGイメージをオンラインで圧縮する
JPEGイメージや写真を圧縮。ウェブ掲載・SNSでのシェア・Eメール添付を快適に。

変換結果

jpgから変換した結果は以下の通りです。

サイト名変換後サイズ変換前との差
画像サイズ変換サービス24KB-28KB
TinyJPG – Compress JPEG images intelligently22KB-30KB
JPGイメージをオンラインで圧縮する29KB-23KB

ここでサイト毎に違いが確認できるようになりました。

まとめ

ウェブサイトへ掲載する画像が透過でない限り、PNG形式では推奨されない事が確認できました。

以下変換前後の概要です。

変換前の形式PNG
変換前のファイルサイズ167KB
変換後の形式JPG
変換後のファイルサイズ22KB
削った容量145KB
ファイルサイズ縮小割合14%
利用した形式変換サイト何処のサイトも殆ど変わらない
利用した容量圧縮サイトTinyJPG – Compress JPEG images intelligently

コメント

タイトルとURLをコピーしました