ブログに最適な画像サイズとは?

大小

サイトに画像を貼るときには、ページの見た目がキレイかどうかだけではなく、画像サイズもひとつのポイントです。

「画像のサイズが重たくないか?」

を考えて軽くしておくと、サクサクと表示されるため、サイトが見やすくなるからです。

画像が重たいと、ページが表示されるまでに時間がかかり過ぎてしまい、待つのが面倒になった訪問者はどこか他のページに移動してしまいます。

せっかく、自分の記事に興味を持ってくれたのに、見てもらえずに終わってしまうのはもったいないですね。

今回は、最適なサイトの画像サイズについてまとめていきたいと思います。

よく使う画像サイズ

写真素材フリーサイト、photoACで写真を選ぶとしたら、スモールサイズで十分なことが多いです。

【写真ACのサイト】

無料写真素材なら【写真AC】
写真素材無料【写真AC】

640×427とか、640×480とか、少しの差はありますが、大きいほうの長さが640ピクセルになっています。

(同じく素材集でイラストACというサイトの場合、イラストのサイズは作品によってそれぞれ違っています。)

ワードプレステーマのシンプリシティの製作者さんのサイトによると、横幅の最大が680ピクセルくらいになっているようで、photoACのスモールサイズの大きさがあれば十分だということがわかります。

スマホやiPadで撮ったそのままの写真を使うと、サイズが大きすぎます。

それで、写真を取り込む前にトリミングして少し大きさを小さくしたり、写真を取り込んでから、700×700サイズの中に入るくらいになるように調整しています。

最大幅680あれば、きれいに見れます。

写真ACについての記事

画像圧縮プラグイン

ワードプレスのプラグインで、画像を圧縮して、ページの表示を軽くしてくれるものがあります。

今使っているのが、

EWWW Image Optimizer というプラグインです。

プラグインの有無での表示速度の差を比べたことはありませんが、きっと画像表示が早くなっているのだと思います。

プラグインの関連記事

画像のサイズの使い分け

カメラ
カメラ

記事を書きながら画像を入れる際には、画像をある程度大きめにして入れています。

画像を入れることで、読み手がちょっとリフレッシュして、記事を読むときにひと呼吸入れることができるようにという狙いがあります。

また、「記事の文章で足りない部分は、写真で補ってもらいたいなー」

という願いもあります。

そんな感じで、写真やイラストが、話と話のあいだに入るのような感じになってくれたら、と思っています。

上手な話し手は、間の取り方が上手なように、人気ブロガーたちは、行間や写真の使い方が上手です。文章の内容だけでなく、余白の使い方も上手なので、長い文章でも流れるように、読みきってしまうのです。

(関連して、「どうしてそんなに長いサイト記事が多いのか?」の記事もどうぞ。)

ワードプレスで記事を作成する際に、フルサイズ、中サイズ、サムネイルというように、大きさの種類を選べるようになっています。

写真を取り込むと、画像サイズを変更することができますので、早めにサイズダウンさせておくと、使いやすいですよ。

サイズ変更後は、だいぶ軽い画像になっているので、フルサイズ、大サイズ、中サイズまでを選んでいます。

中サイズにすることは少なめです。小さいサイズをたくさん使うと、ゴチャゴチャした印象になってしまうので、大きめにしています。

写真ACで無料素材もある

写真は、自分で撮ったものを使うこともできますし、素材サイトからダウンロードすることもできます。

レビュー記事などの場合、実際に自分で使った様子がわかるほうが伝わりやすいですが、一方で、自分では撮るのが難しかったりする写真もあるので、素材サイトがあると大変助かりますね。

写真ACのサイトでは、メールアドレスとパスワードで登録できる無料会員でも、ダウンロードできる写真の種類がとても多く、使いやすいのでおすすめです。

ダウンロードの待ち時間を無くしたり、1日あたりの枚数の制限がなかったり、まとめてダウンロードできたりする有料会員コースもあります。

【公式サイト】

写真素材ダウンロードサイト【写真AC】
写真素材無料【写真AC】

まとめ

ページに入れる写真やイラストは、680ピクセルくらいを目安に入れています。

画像サイズは、重すぎず小さすぎないサイズが扱いやすいです。

トリミングしたり、サイズ変更をしたり、圧縮プラグインなどを使って調節してみましょう。

画像を記事に入れると、サイトを読みやすくなって、見栄えが良くなりますよ!

サイト制作関連記事

レンタルサーバー Xserver

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク