ブログに画像を貼っているのに、なんかページの表示が遅い気がする。
そう感じたことはありませんか?
画像の見た目は問題ないのに、実はファイルサイズが重いまま使っていることが原因かもしれないです。
このまま放っておくと、せっかく読みに来てくれた人がページが開くまでの数秒で離脱してしまうことも少なくないです。
この記事では、ブログ画像の最適なサイズや形式の選び方から、無料ツールを使った実践的な手順まで、順を追って説明します。
ブログ画像の最適化がSEOと表示速度に与える影響
画像の見た目が良くても、ファイルサイズが重ければページ全体のスピードが落ちてしまいます。
表示速度はSEOにも直接関係するので、ここだけはちょっと頭に入れておいてほしいです。
画像ファイルが重いとどんな問題が起きる?
ブログに貼る画像を「撮ったまま」「ダウンロードしたまま」のファイルで使っているなら、少し確認してみてください。
スマホで撮った写真は1枚あたり3〜5MBあることも多いです。
それを記事に5枚貼ったら、それだけで20MB以上のデータを読者のスマホに送ることになってしまうんです。
画像が多いページほど読み込みに時間がかかり、「遅い」「重い」と感じた読者はすぐに閉じてしまう。
これが地味に痛いところで、記事の内容がどれだけ良くても伝わらないまま終わってしまいます。
Googleが評価するCore Web VitalsとLCP
ちょっと専門的な言葉が出てきますが、難しくはないです。
Googleは「Core Web Vitals(コアウェブバイタル)」という基準で、各ページの体験を評価しています。
その中でもLCP(Largest Contentful Paint)という指標が重要で、「ページを開いてから一番大きなコンテンツが表示されるまでの時間」を測っています。
ブログ記事ではアイキャッチ画像や本文冒頭の大きな画像がLCPの対象になることが多いです。
このLCPが2.5秒以内だとGoogleの評価が高く、4秒を超えると「改善が必要」とみなされます。
画像を軽くするだけで、この数値がぐっとよくなることが多いんですよね。
スマホ閲覧が主流の今、モバイル表示速度が鍵になる
今はブログ読者の7〜8割がスマホから来ているといわれています。
スマホはPCより処理能力が低めで、通信速度も状況によって不安定なことが多いです。
PCで「まあ普通かな」と感じる速度でも、スマホではかなり重く感じる可能性がある。
Googleはモバイル優先でインデックスを評価しているので、スマホでの表示速度がSEO評価に直結します。
画像を軽くすることは、スマホ読者への配慮でもあるんです。
ブログ画像の最適なサイズと解像度の選び方
画像サイズは「大きければいい」わけではなく、ブログ表示に合ったちょうどいいサイズがあります。
ここでは実際の数値を確認しながら、迷わず設定できるようにしていきましょう。
記事本文画像の推奨横幅は1,000〜1,200px
ブログの記事本文エリアは、多くのテーマで横幅が700〜900px程度に設定されています。
それに対して1,000〜1,200pxの横幅があれば、どんな画面サイズでもきれいに表示されます。
2,000pxや3,000pxの原寸サイズで貼るのは、もったいないですよ。
画面には1,000px相当で表示されているのに、4倍のデータを読み込ませていることになってしまいます。
まず横幅を1,000〜1,200pxにリサイズするだけで、ファイルサイズが数分の1になることも少なくないです。
アイキャッチ画像に最適なアスペクト比
アイキャッチ(サムネイル)は、SNSでシェアされたときにも表示される大事な画像です。
WordPressをはじめ多くのブログでは、「1.91:1」の横長比率が標準的に使われています。
具体的なサイズでいうと、横1,200px × 縦630pxがよく使われます。
Twitterでシェアされたときも、Facebookのシェアカードでも、この比率だとトリミングされずにきれいに表示されやすいです。
SNS運用もしているなら、アイキャッチはこのサイズに統一しておくと後々楽になりますよ。
72dpiと96dpiの違い、Webには低解像度で十分な理由
「dpi」という数値を気にしていませんか?
印刷物では300dpiが必要ですが、Webでは72〜96dpiで十分です。
なぜかというと、モニターやスマホ画面の表示は「ピクセル数」で決まるのであって、dpiとは関係がないからです。
「解像度が低いと荒くなるんじゃ?」と心配する方もいますが、Webに貼るなら横幅のピクセル数が合っていれば大丈夫。
印刷用の高dpiで保存するとファイルサイズが増えるだけなので、Webに上げる画像は72〜96dpiで保存するのがちょうどいいです。
ファイル形式の選択で画質を落とさずに容量を減らす方法
ファイルを小さくするには、「圧縮率の高い形式」を選ぶのも大切です。
使う場面によって最適な形式が変わるので、順番に整理していきましょう。
JPEG、PNG、WebP、AVIFの違いと使い分け
よく使うファイル形式は大きく4つです。
まず「JPEG」は写真に向いていて、見た目の品質をほぼ保ちながらサイズを小さくできます。
「PNG」は背景透過(アルファチャンネル)が必要なアイコンやイラストに向いていますが、写真に使うとファイルが大きくなりやすいです。
「WebP」はGoogleが開発した次世代フォーマットで、JPEGより25〜34%小さくなるといわれています。
「AVIF」はさらに新しい形式で、WebPよりもっと圧縮率が高く、画質もきれいです。
ただし新しい形式ほど、古いブラウザや環境では対応していない場合があるので、用途を確認してから使いましょう。
写真はJPEGで品質80〜85%が黄金比
写真をJPEGで保存するとき、品質(クオリティ)を何%にするかで迷うことありませんか?
実は、品質を100%から80%に下げても、人の目にはほとんど差が分からないことが多いです。
でもファイルサイズは半分以下になることがある。
品質80〜85%が「見た目の品質をほぼ保ちながら、ファイルサイズを大きく軽くできる」ちょうどいいラインです。
私もよく使う設定で、これで十分きれいに仕上がりますよ。
次世代フォーマットWebP・AVIFを使うべき場面
WebPやAVIFは「なんか難しそう」というイメージを持っている方もいるかもしれないですが、変換自体はとても簡単です。
WordPressなら、WebP変換に対応したプラグインで自動変換できます。
ブログ以外のWebサイトでも、手元で事前にWebPやAVIFに変換してからアップロードする方法があります。
ただし、AVIF形式はまだ一部の環境で表示できないことがあります。
幅広い読者に対応したいなら、まずWebPから試してみるのがいいかもしれないです。
無料ツールを使った画像最適化の実践手順
ここまで「何をすればいいか」が分かったところで、実際の作業手順を見ていきます。
無料で使えるツールはたくさんありますが、大事なのは「安全に、手軽に使えるかどうか」です。
ブラウザだけで完結するリサイズツールの使い方
「ツールをインストールしないといけないの?」と思った方、安心してください。
ブラウザ上で動くツールを使えば、インストール不要で画像リサイズと形式変換が両方できます。
例えばリサイズさんなら、画像をドラッグ&ドロップするだけで横幅の指定・形式の変換・品質の調整がまとめてできます。
操作はシンプルで、「横幅を1,200pxに」「JPEG品質80%で保存」という設定も数クリックで完了します。
一括変換で複数画像をまとめて処理する方法
「記事を1本書くたびに5〜10枚の画像がある」という方も多いですよね。
1枚ずつ変換していると時間がかかってしまいます。
一括変換機能があるツールなら、複数の画像をまとめてドラッグ&ドロップして、同じ設定で一気に処理できます。
作業時間がぐっと短くなるので、ブログの更新頻度が高い方ほど効果を感じやすいですよ。
プライバシーが心配なら、サーバーに送信しないローカル処理を選ぼう
「画像をオンラインツールに送ったら、どこかに保存されたりしない?」
そう気になる方の気持ち、よく分かります。
企業の資料に使う写真や、まだ公開前の商品画像など、外部に出したくない画像もありますよね。
サーバーに一切アップロードしないローカル処理タイプのツールなら、この心配がいりません。
リサイズさんはすべての変換処理をブラウザ内だけで完結させているので、画像データがサーバーに送られることはありません。
プライバシーが気になる場面でも安心して使えます。
ブログ画像の最適化で読者体験とSEOを両立させよう
ブログ画像の最適化は、「見た目を整える」以上の効果があります。
表示速度が上がれば読者が離脱しにくくなり、Googleの評価にもいい影響を与えます。
まずは横幅を1,000〜1,200pxにリサイズして、品質80〜85%のJPEGで保存するところから始めてみてください。
それだけでも体感できるくらい変わることが多いです。
WebPやAVIFへの変換まで進められればさらに軽くなりますが、まずは一歩。
画像の最適化が面倒に感じるなら、リサイズさんのようなブラウザ内完結のツールなら、インストール不要で気軽に始められますよ。