ブログ・Web サイトの画像を軽くする方法

なぜ画像を軽くするべきか

• 読む人が待たされない。表示が遅いページは、内容を見る前に閉じられやすくなります。特にスマホのモバイル回線では、画像の重さがそのまま待ち時間になります。
• 読む人の通信量を減らせる。データ通信量に上限があるプランの人にとって、重い画像は負担です。
• 検索での評価にも関わる。Google はページの表示速度などの「ページエクスペリエンス」を評価に使っていると公表しています。画像の軽量化は、その中でも効果が出やすい改善です。

大きさの目安：表示される幅の 2 倍まで

画像は、実際に表示される幅より大きくても、見た目は良くなりません。ブログの本文の幅が 720px なら、そこに 4000px の写真を置いても、ブラウザが縮小して表示するだけです。

ただし、スマホや高精細なパソコンの画面は、表示上の 1px を 2〜3 個の点で描いています。そのため、表示される幅の 2 倍程度のピクセル数を用意すると、どの画面でもくっきり見えて、無駄も少なくなります。

表示幅は、使っているブログのテーマやサービスによって違います。分からない場合は、パソコンのブラウザで画像を右クリックして「検証」を選ぶと、実際に表示されている大きさを確認できます。

形式の選び方

• 写真：WebP が使えるなら WebP、使えなければ JPEG。WebP は同じくらいの見た目で JPEG より小さくなりやすく、現在の主要なブラウザはすべて表示できます。
• スクリーンショット・図：PNG が基本。ただし写真が多く含まれる画面写真は、JPEG や WebP のほうがずっと軽くなります。
• ロゴ・アイコン：ベクター形式の SVG が使えれば、どの大きさでもくっきりして軽量です。使えない場合は透明を扱える PNG か WebP。

ブログサービスによっては、アップロードした画像を自動で WebP に変換したり縮小したりしてくれるものもあります。その場合でも、元の画像を適切な大きさにしてから上げるほうが、アップロードも早く、仕上がりも安定します。

画質の目安

JPEG・WebP の画質は、写真なら 75〜85％程度でも、Web で見る分には十分きれいなことがほとんどです。文字の入った画像やグラデーションの多い画像は、85〜90％にしておくと安全です。最終的には、実際の表示サイズで見て劣化が気にならないかで判断します。

1 枚あたりの容量は、本文中の写真なら 100〜300KB 程度に収まっていれば、多くの場合は十分に軽いといえます（あくまで目安です）。

このサイトのツールを使った手順例

1. 位置情報チェックで、撮影場所が記録されていないか確認する（自宅で撮った写真は特に）。
2. トリミングで、構図を整え不要な部分を切る。
3. サイズ変更で、長辺を 1600px などにそろえる。複数枚まとめて処理できます。
4. 形式変換で WebP（画質 80％前後）にする。容量の上限を決めたい場合は指定サイズ以下に圧縮を使う。

サイズ変更や形式変換をした画像には、元の写真の撮影情報や位置情報は含まれないため、1 の確認は念のための二重チェックになります。

自分でサイトを作っている人向けのポイント

• width と height を書く。<img> に幅と高さを書いておくと、画像の読み込み中にページがガタッと動く（レイアウトのずれ）のを防げます。
• 画面外の画像は遅れて読み込む。ページ下のほうの画像には loading="lazy" を付けると、見える位置に近づいてから読み込まれます。逆に、ページを開いて最初に見える大きな画像には付けないほうが表示が速くなります。
• 画面に合わせて出し分ける。srcset で複数の大きさを用意すると、スマホには小さい画像、大きな画面には大きい画像が使われます。
• 計測する。Google の「PageSpeed Insights」にページのアドレスを入れると、重い画像や改善点を教えてくれます。