画像一枚でブログの速度が決まる
ブログを運営していると、なかなか気づきにくいのがこれだ。文章が良くても、ページが重ければ読者はすぐに離脱する。画像がその主な原因になっていることは多い。
スマートフォンで撮影した写真をそのままアップロードすると、1枚で5〜10MBになることもある。1記事に5枚あれば、ページ全体で50MBを超える計算だ。遅い環境で接続したユーザーはそのまま戻るボタンを押す——Googleもそのシグナルを見ている。直帰率が高いとランキングが下がる。
SEOといえばキーワードや内部リンクに注目しがちだが、ページ速度は直接的なランキング要因だ。Core Web Vitalsという指標で実際のユーザーデータをもとに測定される。
ブログ画像が重くなる理由
主な原因はサイズとフォーマットの2つだ。
カメラで撮った写真は印刷用として設計されている。3000×4000pxの画像でも、ブログ上では800px幅で表示される——余分なピクセルをすべての訪問者に届けることになる。JPG・PNG・WebPの違いも重要で、写真をPNGで保存したり、ロゴをJPGで保存すると必要以上に大きくなる。
プラットフォーム別の推奨サイズ
ブログ本文に使う画像は幅1200px以下、1ファイル200KB以下を目安にするといい。SNSプラットフォームごとの推奨サイズは少し異なるが、基本的な考え方は同じ——表示幅より大きな画像を送る必要はない。
サムネイル（OG画像）は別で、1200×630pxが標準だ。SNSでシェアしたときのプレビュー画像になるので、この比率で作っておくと崩れない。サイズが合わないと、リンクプレビューでトリミングされたり歪んだりする。
どのフォーマットを使うか
フォーマットはコンテンツの種類で判断すればいい。一般的な写真はJPGが適切だ。グラフやスクリーンショット、線の多い画像はPNGの方が綺麗に出る。透明背景が必要なロゴやアイコンもPNGを使う。
WebPは今後の主流になりつつある。主要ブラウザはすべて対応済みで、同じ品質でJPGより25〜35%ほど小さくなる。ブログプラットフォームが対応していればWebPに変換してからアップロードすると効果的だ。
画像SEO——ファイル名とalt属性
ファイル名は意味のある名前にした方がいい。IMG_3847.jpgよりもblog-image-optimization-example.jpgの方が、Googleに伝わる情報が多い。小文字でハイフン区切りにして、関連キーワードを自然に含める程度でいい。
alt属性は画像が表示されないときに出るテキストでもあり、スクリーンリーダーが読み上げる文章でもある。画像の内容を自然に説明する文章にするのが正しい使い方だ。キーワードを無理に詰め込む必要はない——むしろ逆効果になることもある。
Pixkitで最適化する方法
Pixkitのリサイズツールを使えば、インストール不要でブラウザから直接最適化できる。画像をアップロードして幅を1200pxに設定すれば、高さは比率に合わせて自動計算される。品質を80〜85に設定すると、見た目の差がほとんどない状態でファイルサイズを大幅に削減できる。より具体的な圧縮方法はこちら。
WebP変換には変換ツールを使えばいい。JPGやPNGをアップロードしてWebPを選ぶだけだ。ローカル処理なので画像がサーバーに送られない点も安心できる。
サムネイルをうまく活用する方法
サムネイルはSEOだけでなくクリック率にも直接影響する。検索結果やSNSプレビューで表示される画像は、クリックするかどうかの判断材料になる。
記事の内容と関連した画像を使うのが基本だ。ありきたりなストック写真は埋もれがちだ。テキストを重ねる場合はモバイルでの可読性を確認する。そしてサムネイルの容量も最適化対象に含める——いくら良い写真でも1MBを超えるとロードに影響する。
1200×630px、JPGまたはWebP、200KB以下——この3点を押さえておけば、多くのブログより速く、SEO的にも有利な状態になる。