「効率的な画像フォーマット」とは？改善方法も解説【PageSpeed Insights】

Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「効率的な画像フォーマット」とはどういう意味か、また診断結果を改善する方法についても解説します。

　

「効率的な画像フォーマット」とは？

Webページを作成したり、閲覧したりする際に、ページが重くてなかなか閲覧できないということはよくあります。この原因のひとつが画像の容量が大きすぎること、画像のフォーマットが適していないことがあげられます。「効率的な画像フォーマットにする」ということは、画像を圧縮化して、適切な大きさにし、最適化することで、表示する速度を上げるということです。効率的な画像フォーマットにすることで、高性能のパソコンでも、タブレットでも、スマホでも、どのような媒体であってもストレスなく閲覧することができます。

「効率的な画像フォーマット」の改善方法

「効率的な画像フォーマットにする」方法を知る前に、まずは、どのようなフォーマットが存在しているのかを知る必要があります。Webサイトで取り扱う画像のフォーマットは複数あります。JPEG、GIF、PNGなどであり、所有している画像がどのフォーマットなのかを確認するには、その画像のファイル名の最後の拡張子を見ると判別可能です。それぞれに特徴があり、どのようなフォーマットなのかを確認しなければ、最適化することはできません。

JPEGとは、拡張子は「.jpg（.jpeg）」であり、特徴としては写真に適した画像形式といえます。人の目に見えないような色の違いなどの、人に判別することができない情報はカットし、情報量を削減して、大幅に圧縮して保存するフォーマットです。一度圧縮してしまうと、元に戻せないので、元の画像を残しておくことが必要です。
GIFとは、拡張子は「.gif」であり、特徴は最大で256色という限られた色数で構成することになる画像ということです。また、背景を透明にすることができるという特徴もあります。JPEGはフルカラーなので、大幅に削減されます。つまり、256色以下の画像を最適化する際に選ぶフォーマットということです。

写真や繊細な画像は適していませんが、ロゴやアイコン、ボタン、イラスト、図などに適しています。
PNGとは、拡張子は「. png」で、特徴はパソコンで扱うことに適した、可逆圧縮可能なフォーマットということです。色数の制限がなく、かつ背景を透明にすることも可能、画像の編集もできます。
このほか、高解像度の画像に適したTIFF、Windowsに対応するためのフォーマットであるBMP、縮小圧縮しても画像の劣化が少ないSVGなどといった様々なフォーマットがあります。この中から、掲載する画像のどの部分にこだわりを持つのかに合わせて、フォーマットの変更を行います。

効率的な画像フォーマットへの変更方法は、難しくはありません。変更したい画像を選択し、画像の詳細情報を表示させます。「ファイル名の書式」の部分を変更したいフォーマットへと変更し、保存先を選んで保存して完了です。画像を閲覧・編集するためのソフトウェアもあるので、それを使用すれば、より簡単にフォーマットの変更をすることが可能です。
どのような画像をどのフォーマットへと変更し、どのように変更すればよいのか、といった最適な改善方法を見極めることは難しいことも多いです。そのような場合には、「page speed insights」を活用すれば、具体的で最適な方法を提示してくれます。