WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： トレンド >TIPS

Web制作の現場で、表示速度の改善はもはや必須の課題です。
特にGoogleのPageSpeed Insights（ページスピードインサイト）で診断すると、よく出てくるのが「画像を適切に圧縮してください」「次世代フォーマットを使用してください」といった“画像容量が重い”という指摘。

「画像の軽量化」は、比較的かんたんに対応できて、効果も大きい改善ポイントのひとつです。

そこで今回は、今すぐ使えて、誰でも簡単にできる「画像軽量化の基本テクニック」を3つに絞ってご紹介します！

WebP形式で保存してみよう

2020年以降、Google Chrome、Firefox、Edgeなどのモダンブラウザで「WebP（ウェッピー）」という拡張子の画像ファイルの取り扱いに関して、足並みが揃い問題なく使用できるようになりました。

従来のJPEGやPNGに比べて、WebP（ウェッピー）は以下のようなメリットがあります。

• 同じ画質でもファイルサイズが30〜80%軽くなる
• 透過対応（PNGの代替）も可能
• アニメーションも扱える（GIFの代替）

たとえば、元のPNG画像が1MBある場合、WebPで保存しなおすだけで200〜300KBに抑えられるケースもよくあります。

最新のPhotoshopであれば、拡張機能を使うことなくWebP形式に保存できますので、ぜひ活用してください。

Photoshopがない場合でもSquooshというブラウザで使用できるアプリでWebP形式に簡単に変換可能ですので、ぜひ試してみてください。

画像圧縮ツールを使って“見えないムダ”を削る

画像には、実は見た目に影響しない余分なデータ（Exif情報やカラープロファイルなど）が含まれていることがあります。
それを除去するだけで、見た目はそのまま、ファイルサイズだけを削減することができます。

おすすめの圧縮ツール

おすすめの圧縮ツールとしてTinyPNGがあります。
こちらのツールはWebサイトのアクセスし、所定の場所に圧縮したい画像ファイルをドラッグ・アンド・ドロップするだけで完了という、非常に簡単な操作で容量を削減できます。

サイズを必要以上に大きくしない

意外と見落とされがちですが、画像の“表示サイズ”と“実サイズ”が合っていないケースはよくあります。

たとえば、スマートフォン表示で480px幅しか使っていない画像が、実際には2000pxもの大きな幅でアップされている…というのよく起こる話です。
ブラウザが自動で縮小表示してくれるとはいえ、読み込むファイルサイズはそのままですので、表示速度に悪影響が出てしまいます。

チェックするポイント

• Webサイトのコンテンツエリアの最大幅を把握し、それ以上に大きいサイズで画像をアップロードしないようにする。
• スマートフォンでの閲覧時に画面幅を想定し、Retinaディスプレイ対策で「表示サイズの2倍」程度に留めておく。

画像は大きければ安心ではなく、適切なサイズこそがユーザー体験とパフォーマンスの両立につながります。

まとめ

今回ご紹介したものは、どれも難しい知識やツールは不要で、今日からすぐに実践できる内容ばかりです。
紹介した3つを意識するだけで、サイト全体の表示スピードが大きく改善され、SEOにも、ユーザー満足にもつながります。

「画像の軽量化」は、地味だけど効果抜群です。ぜひ、日々の制作や運用に取り入れてみてください。