ブログに画像を載せるときに知っておきたいこと

今回は、ブログに画像を載せるときの注意点を紹介します。

画像を適切に載せることでページ表示速度の向上が見込めますし、SEO 効果も期待できます。

私はブログを始めた当初、画像の適切な載せ方が全くわかっておらず、画像サイズが大きすぎたり、圧縮してなかったり、代替テキストを入れてなかったり...と、記事が増えてから多々修正が必要なことに気づきました。

記事が増えてからの修正は非常に手間で、疲れます。

ということで、自分自身がブログを始めるときに知っておきたかったな〜という内容をまとめました。

ブログを始めたばかりの方や、画像の注意点をおさらいしたい方に参考にしていただければと思います。

目次

オリジナルの画像を使う

ブログに載せる画像はできるだけ自分で撮影した写真を使ったほうが良いです。

もしくは、自分で作った図解や自分で描いたイラストなどの画像。

なぜかというと、Google は独自性のある記事を評価するからです。

ページには、独自の価値を追加する画像のみを表示することをおすすめします。特に、画像やテキストが独自のコンテンツではないページは推奨されません。

Google 画像検索に関する SEO のおすすめの方法 | Google 検索セントラル  |  Google Developers

以下の記事でも、商品レビュー記事では、メーカー提供の写真ではなく自分で撮影したオリジナル写真が評価されると Google は言っています。

Google Recommends Original Photos For Product Reviews

自分が読者としてブログを読むときも、レビューに限らずオリジナルな画像が使用されているほうが、信用できたり印象に残ったりしませんか？

オリジナル画像が用意できない場合は著作権フリーの素材サイトからダウンロードした画像を使うことになると思いますが、みんなが使っている画像なので独自性にはつながりません。

フリー素材も多少使うくらいなら良いと思いますが、できるだけオリジナル画像を用意したほうが良いと思います。

画像の形式は JPG？ PNG？ WebPって？

一般的な画像の形式は JPG と PNG で、従来から広く使われています。

WebP はファイルサイズの軽い新しい形式で、結論から言うと現在は WebP が推奨されています。

従来の形式である JPG と PNG は、WebP に比べるとファイルサイズが重くなることが多く、画像によって向き・不向きもあります。

カメラで撮影した写真データは基本的に JPG で出力されますし、スクリーンショットは PNG で出力されると思います。

JPG・PNG は、適切な形式で保存すればファイルサイズを抑えつつ画質の良い画像になりますが、逆に、たとえば風景写真を PNG で保存すると異常にファイルサイズが大きくなりますし、スクリーンショットを JPG で保存すると画像に粗が出やすいです。

使い分けに関しては、写真は JPG、写真以外は PNG と考えて良いと思います。

WebP は最近普及し始めた新しいフォーマットで、JPG・PNG と同程度の画質で、ファイルサイズが軽いという優れもの。

以前は対応ブラウザが限られていましたが、現在ではほとんどのブラウザ（95％）が対応しています。

そのため現在では基本的に、ファイルサイズの軽い WebP を使うのが一番良いです。

ただ WebP が面倒なのは、JPG・PNG からの変換作業が必要になるという点。なので、画像の枚数が少ない場合などページの表示速度に影響していなければ、JPG や PNG を使っても良いと思います。

PageSpeed Insights の「次世代フォーマットでの画像の配信」の指摘は、WebP にすることで対応できます。

WebP 画像への変換には通常 Squoosh などの変換ツールを使いますが、Blogger では画像 URL の特定箇所に-rwをつけることで変換可能です。

https://blogger.googleusercontent.com/img/a/AVvX...ZLQ=s600-rw

https://blogger.googleusercontent.com/img/b/uFkk...qSo/s600-rw/eyecatch.png

当ブログでも以前は JPG・PNG を使用していましたが、現在はほぼすべての画像を WebP に変換しています。

WordPress ではプラグインを使って WebP 画像を利用できるようです。

最適なサイズに調整する

画像はブログに掲載する前に最適なサイズに調整します。

サイズが必要以上に大きいと無駄にファイルサイズが重くなり、ページが重くなってしまいます。

一方で、十分なサイズがないと画像が粗くなり、きれいに見えません。

アイキャッチ画像は 1200 × 630px 推奨

アイキャッチ画像の場合は、横幅 1200 × 630px が最適です。

理由は、SNS のシェア時に推奨されているサイズだからです。

Twitter の大型画像付きサマリーカードの推奨サイズ

このカードの画像は、2：1のアスペクト比をサポートし、最小サイズは300x157、最大サイズは4096x4096ピクセルです。

Summary with large image | Docs | Twitter Developer Platform

Facebook のリンクシェアの推奨サイズ

高解像度デバイスで最高のディスプレイを得るには、1200 x630ピクセル以上の画像を使用してください。リンクページの投稿をより大きな画像で表示するには、少なくとも600 x315ピクセルの画像を使用する必要があります。

リンクシェアの画像 - シェア機能

Facebook の推奨サイズが 1200 x 630px （以上）となっており、それが Twitter の推奨サイズともほぼ重なるので、1200 × 630px が最適と考えて良いでしょう。

と言いつつ当ブログでは、横 1200px だとファイルサイズが大きくなりやすいため、画像によっては 800px 前後にしていることもあります。

通常の画像は横幅 800〜1000px が目安

アイキャッチ以外の画像に関しては、いろいろ調べて＆自分のブログで試してみて私が最適だと考えているサイズは、

横幅 800〜1000px です。

なぜかというと、スマホできれいに表示される、かつ PageSpeed Insights で指摘されにくいサイズがこのくらいだからです。

スマホのディスプレイは Windows PC よりも高解像度なので、PC で見たときは横幅 500px で大丈夫でも、スマホで見るとなんだか粗い... となることがあります。

私の感覚では、500px 以下の画像はスマホではぼやけて見えるように感じます。

実際スマホはどの程度の解像度なのかというと、以下の通り。（2022年５月時点）

ということで、800〜1000px 前後であればだいたいどのスマホでもきれいに見えると思われます。

1200px 程度にした方がより多くのスマホをカバーできますが、画像によってはファイルサイズが大きくなり PageSpeed Insights で指摘が出やすいです。当ブログでは、きれいに見せたい画像は大きめ、そんなに気にしない画像は小さめ、と分けています。

縦幅は自由ですが、横長画像の場合は一般的に以下の比率がよく使われています。

トリミングをする場合などは、この比率を参考にしてみてください。

圧縮してファイルサイズを減らす

最適サイズに調整したあと、さらにファイルサイズを抑えるために圧縮します。

ファイルサイズは、画質に大きく影響しない範囲でできるだけ小さいほうが良いです。

記事内の画像は圧縮後に 200kb 程度以下のサイズになっていれば問題ないと思いますが、アイキャッチ画像に関しては個人的推奨は 100kb 以下。アイキャッチは記事トップに表示されるので、ファイルサイズがページスピードに影響しやすいです。

画質、サイズ、表示速度との兼ね合いで許容できるファイルサイズも変わってくるので、そのあたりは自分の PC やスマホで画像の見え方を確認しながら調整してみてください。

圧縮するには、以下のツールが無料で万能で使いやすいのでおすすめです。

TinyPNG – Compress WebP, PNG and JPEG images intelligently

遅延読み込みを利用する（ネイティブLazy-load）

画像は基本的に、ファーストビュー以外は遅延読み込みさせます。

遅延読み込みとは、最初のページ表示時には読み込まず、必要になったタイミングで後から読み込むという仕組みです。

画像を後から読み込むことで最初のページ表示時の読み込み量が減り、ページ表示速度が速くなります。

遅延読み込みの一番お手軽な方法は、画像タグにloading="lazy"をつける方法（ネイティブ Lazy-load）です。

<img src="画像URL" loading="lazy" width="幅" height="高さ" alt="画像の説明">

WordPress 5.9 では、最初の画像以外は自動でloading="lazy"が付与されるようです。

Blogger では、HTML モードで画像タグを直接書き換えます。

このとき、ファーストビューの画像は書き換えないように注意してください。

ネイティブ Lazy-load は現状、一部ブラウザでは非対応です。
（Safari、iOS Safari は標準非対応、設定変更をすれば対応可）

Lazy loading via attribute for images & iframes | Can I use...

そのため、ユーザーのブラウザや設定状況によらず完璧に遅延読み込みをさせたい場合は、 JavaScript ライブラリを利用することになります。

ただ初心者にとっては設定も大変なので（私もよくわからない）、基本的にはネイティブ Lazy-load だけで十分だと思います。

JavaScript を使って完全対応をしたい場合は、以下が参考になると思います。

画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法 | コリス

width, height を設定する

上記のネイティブ Lazy-load を利用する場合は特に、画像タグのwidth、height は必須なので入力します。

<img src="画像URL" loading="lazy" width="1200" height="630" alt="画像の説明">

入力しておかないとブラウザが画像のサイズを把握できず、画像が遅延読み込みされる瞬間にレイアウトのずれが発生してしまいます。

レイアウトのずれ（レイアウトシフト）は誤クリックを誘発しやすく、ユーザー体験を損なうものとされています。

width, height を入力しておけば、画像の読み込み前でも画像分のスペースが確保されるので、遅延読み込み時にずれは起きません。

レイアウトのずれがあると検索順位にも影響するため、ずれが起こらないよう注意する必要があります。

詳細は以下の記事がわかりやすいです。

レイアウトシフトって何？SEO上、重要指標の一つCLSについて | ホームページ制作・作成なら大阪のweb制作.com

代替テキスト（alt属性）を入力する

画像タグには、代替テキスト（alt属性）として画像の説明文を入力します。

代替テキストの目的は２つです。

代替テキストには、画像の内容を簡潔にわかりやすく書くのが望ましいです。

キーワードを羅列したりするのは NG です。

<img src="画像URL" loading="lazy" width="1200" height="630" alt="中尾アルミ製作所の鉄フライパンで野菜を炒めている写真">

代替テキストの細かな注意点やサンプルは、以下サイトが参考になります。

アイコンなどの装飾用画像には、代替テキストは不要です。その場合はalt=""のように空白にしておきます。

以上です。

自分のブログの画像がなんかぼやけて見える場合は、こちらも参考にしてください。

Google Chromeの画像ぼやけ問題を解決する。Blogger独自の解消法も。

先日ブログデザインを変更した際、画像の掲載サイズを修正したりしてたのですが、その過程で一部の画像にぼやけが発生しました。調べたところ、原因は Google Chrome の仕様でした。一般的な解決策と、Bloggerの画像URLを利用した解決策をまとめます。

www.limosuki.com