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

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

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

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

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

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

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

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

目次

オリジナルの画像を使う

ブログに載せる画像はできるだけ自分で撮影した写真を使いましょう。

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

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

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

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

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

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

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

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

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

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

JPG と PNG には、画像によって向き・不向きがあります。

不向きなほうで保存すると画質が落ちたりファイルサイズが無駄に大きくなるので、使い分けた方が良いです。

JPG の特徴
  • 写真のような色数が多い画像に向いている
  • 保存を繰り返すと劣化する
PNG の特徴
  • 色数が少なく線がはっきりしている文字画像、イラスト、スクリーンショットに向いている
  • 保存を繰り返しても劣化しない

適切な形式で保存すれば、ファイルサイズを抑えつつ画質の良い画像になります。

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

私は基本的に、写真は JPG、写真以外は PNG という使い分けをしています。

写真に文字やイラストを入れて加工したアイキャッチ画像などは微妙ですが、そういう場合は一度 PNG と JPG の両方で出してみて、ファイルサイズと画質を確認します。画像を比較してみて、納得した形式を選んでいます。

さてもう1つ、WebP という画像形式があります。

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

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

そのため現在では基本的に、ファイルサイズの軽い WebP を使うのが一番良いと思われます。画像の枚数が少ない場合など、ページの表示速度に影響していなければ JPG や PNG でも問題ありません。

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

WebP 非対応ブラウザは2022年2月現在、IE と 古い Safari(MacOS Catalina 以前、iOS13 以前)です。

参考:WebP image format | Can I use...

非対応ブラウザ(5%)にも対応したい場合は picture タグを使うなどして画像を切り替える処理が必要です。

参考: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

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

はてなブログは、まだ WebP 画像のアップロードに対応していないようですね。

当ブログでは、私自身が WebP 非対応の古い Mac を使っており、Safari でのブログ閲覧時に画像が表示されないとちょっと気持ち悪いので、これまでは基本的には JPG・PNG を利用していました。現在は記事のリライト時に 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 以下の画像はスマホではぼやけて見えるように感じます。

実際スマホはどの程度の解像度なのかというと、以下の通り。

画面サイズ シェア(日本) 横幅の解像度
375 x 667 19.18% 750
390 x 844 14.15% 1,170
414 x 896 13.91% 828・1,242
375 x 812 12.98% 1,125
360 x 640 5.62% 720〜2,160(4K)
428 x 926 2.85% 1,284

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

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

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

  • 16 × 9
  • 3 × 2
  • 4 × 3

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

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

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

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

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

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

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

TinyPNG – Compress WebP, PNG and JPEG images intelligently

TinyPNGサイト

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

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

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

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

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

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

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

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

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

この場合の「ファーストビュー」は、厳密にいうとスクリーンに見えている領域から 1250px もしくは 2500px までの領域です。4G のような高速回線では 1250px、3G のような低速回線では 2500px が適用されるようです。

参考:
ネイティブLazy-loadのしきい値をChromeが改良。ビューポートからの距離を短くし、遅延読み込みが適用されやすく – 海外SEO情報ブログ

厳密に領域を測るのが大変な場合でも、最低限記事トップの画像からは loading="lazy" を外してください。

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

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

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

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

width, height を設定する

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

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

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

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

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

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

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

代替テキスト(alt属性)を入力する

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

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

  1. 画像が表示されなかった場合や、目に障害のある人が音声読み上げソフトを使ってページを読む場合に、画像の内容がわかるようにする
  2. 画像の意味や関連性を検索エンジンに伝え、画像検索に表示されやすくする

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

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

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

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

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

以上です。

関連記事

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

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

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

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

記事へのコメント・ご質問は こちら まで
NEXT PREV