ブログ画像やアイキャッチ画像が表示されやすいサイズとは?

ブログの画像適切なサイズは? Blog

ブログ投稿したのは良いけど、実際の表示画面にうまく表示されないことってないですか?


例えばこんな感じです。


記事中の画像が表示されていない スクリーンショット




私も最近SSL化したのがきっかけで、表示されなくなった時がありました。上記の画像のように表示されていない時って画像のサイズに問題があるのです!そこで本日はブログにおすすめのサイズをお伝えします。またその適切なサイズを選ぶときのポイントも併せて紹介します。

スポンサーリンク

ブログの画像の適切なサイズとは?

初めに結論を申し上げると、記事内画像は小さい(S)サイズ、アイキャッチ画像は900~1500px(縦) × 900~1500px(横)の間が望ましいです。



本日お伝えしたいことの7割話したことになりますが、これからこれじゃ物足りないと感じるかもしれないので結論の深堀をしていきます。


記事内画像

記事中の画像が表示されていない スクリーンショット




小さい画像とはどんなものか、これはつまりフリー素材画像でよく見るSサイズのことを指します。フリー素材サイトで有名なpixabayを例にすると、Sサイズは640px × 425pxとなります


pixabay Sサイズ選択中
pixabay より引用




このSサイズで十分です。


Mサイズも大丈夫ですが、Lサイズは考え直した方がいいでしょう。大きいサイズは容量が多いのです。容量が多いと画像表示スピードが遅くなったり、サーバー(のプラン)によっては表示してくれないところもあります。容量が多い画像は表示させるのにエネルギーがいるのです。



大きい画像でブログを運用したい方は処理速度の速い・大容量プランのあるレンタルサーバーを借りるのがいいでしょう。私はさくらのレンタルサーバを使っていますが、ページがうまく表示されないとあまり悩んだことがないのでおすすめはしています^^


逆に小さぎる画像は大丈夫なのか?という疑問もあるでしょう。小さぎる(640px × 425px以下の)画像は当然荒くなります。画像が大きく表示されるテーマを使っているようでしたら、荒く見えちゃいます。容量が少ない(小さぎる)画像は少し注意しましょう。


アイキャッチ画像

記事中のアイキャッチが表示されていない スクリーンショット




どちらかというと私はこちらでえらい悩みました。アイキャッチ画像は大きすぎても小さすぎてもダメなのです。


アイキャッチ画像は言葉の通り目を引くための画像で、もともと見ている記事から他の記事を見てもらうために視覚的に訴えかける大事な画像です。アイキャッチ画像が表示されないということはSNSで共有した時も同様に表示されません。(私はTwitterをやっていますが、TwitterだとTwitterカードと呼ばれています。)


記事中のアイキャッチが表示されていない スクリーンショット
関連投稿のアイキャッチが表示されていない スクリーンショット
Twitterカードが表示されていない スクリーンショット



悲しいです。
実際に何度もこうなって、やっと適切なサイズが分かっていつでも改善できる状態になっています。こうならないために適切なサイズを知っておきましょう。


大事なことなので改めて言いますが、アイキャッチ画像は900~1500px(縦) × 900~1500px(横)の間が望ましいです。アイキャッチは大きすぎるのはもちろん、小さいサイズも表示してくれません。細心の注意を払いましょう。


もし、大きさ(容量)の調整ができそうなら、正方形で1200px × 1200pxが一番安泰でしょう。もし、フリー素材を何かお探しならMサイズ、Lサイズを1200px前後に持っていくといいです^^



pixabay Mサイズ選択中
pixabay より引用




pixabayを例に例えるなら、上から3番目。横幅はトリミングして1200px前後まで削ってあげましょう。


スポンサーリンク

画像を探す時に容量や大きさに注意しよう!

写真以外で画像を探すとなると、有料素材サイトやフリー素材サイトを頼ることになると思います。先ほど例に挙げたpixabayもそうですが、見た目は同じでも容量(大きさ)別でダウンロードできるようになっているのでそこを間違いないようにしましょう。

photoAC ダウンロード前 サイズ選択画面
photo AC より引用




上記はphotoACの画像ダウンロード前ですが、アイキャッチ画像用にダウンロードしたい場合はSサイズではなく、Mサイズをダウンロードしましょう。Sサイズでアイキャッチを作ると表示されないことが多いです。私の場合は100%表示されません。


ちなみにphotoACのMサイズは無料会員の場合、1日しかダウンロードできないのでご注意を!

WordPressで運営すればサイズ調整してくれる!

いきなりぶっとんだ話になりますが、今後ブログ運営をしたいと思っている方はWordPressで運営することをおすすめします。なぜなら画像の大きさ調整やトリミングをしてくれる機能があるからです。


実際の編集画面がこちらですが…


WordPress画像編集画面




本当に便利です!
調整する前に画像をダウンロードしてしまっても、最悪ここで解決できます。少しでも画像編集の手間を減らしたいと思っている方はWordPressでブログを始めましょう。

>> WordPress 公式HP


【体験談】SSL化すると表示されなくなることもある

SSLとはSSLは Secure Sockets Layerの略です。SSL化は簡単に言うと、サイトに鍵をかける作業で、サイトの信用性を上げる意味で非常に重要な作業です。


画像で示すと以下のような感じです。


http://→https://




SSL化するとURLに使われるhttpがhttpsになります。レンタルサーバーによっては無料でできることもあり、私の使うさくらのレンタルサーバもできたのでやってみました!


しかし、「SSL化あるある」=「一部画像が表示されなくなるエラー」がやはり起こってしまいました。SSL化すると、どのレンタルサーバーでもこういうことが起こるらしいです。調べて分かりました。しかも、そういうエラーが起こっているところに限って画像のサイズ調整ができていませんでした。はじめから画像のサイズ(容量)調整ができている方はこういうエラーが起こらないのでご安心を♪


今お伝えしたSSL化がよく分からないという方はこちらも併せてご覧ください。

>> 初心者ブロガー必見!SSL化にはどんなメリットがあるのか?デメリットは?


スポンサーリンク

ブログ作成時にサイズを意識して貼ろう!

ブログを投稿する前に一度、画像の大きさが適切かしっかり確認しましょう。投稿時に確認を怠らなければ、後々編集することもありません。


読者の為にもなりますが、必ず将来の自分の為にもなります。編集がめんどくさいかもしれませんが本日お伝えしたことは意識して画像調整・貼付をしていきましょう。


何よりブログを見て、「画像が一切表示されない!」なんて思われるのは嫌ですよね…


パソコンを見て驚くスーツ男性




読者の為にも、小さいことですがやっていきましょう!


そもそも良い画像が見つからない、どんな画像を使っていいか分からないという方は以下の記事もご参考ください。

.>>ブログをやってる方必見!おすすめ フリー素材サイト7選


フリー素材サイトを7つまとめてます。7つ全てブックマークすれば画像探し迷わなくて済みますよ^^

コメント

タイトルとURLをコピーしました