Norifumi Nakazono's Blog.

【テキトー禁止】ブログの画像サイズは、何ピクセルがベストか【検証】

HOW TO WORDPRESS

ブログの画像サイズについて悩んでいる人「何かサイトが重たいなぁ…。画像のサイズを調べてみると、超大きいサイズ(汗)ブログに挿入する画像サイズって、大体どのくらいなのかなぁ。」

今回の記事では、上記のような質問に答えます。

こんにちは、ゾノです。

この記事を書いている僕は、現役でWebデザイナー&マーケターとして活動しつつ、ブログを運営しながら生活しています。今では、外出せずに学べるパソコン教室を運営し、ブログ初心者に特化したブログ指導活動にも取り組んでいます。

本記事の内容

  • ブログの画像サイズを意識しないと、サイトが激重になる
  • ブログの画像サイズは、何ピクセルにすべきか
  • ブログの画像サイズを意識して、圧縮する習慣をつける

動画で見る(所要時間:9分10秒)

ブログの画像サイズを意識しないと、サイトが激重になる

ブログの画像サイズを意識しないと、サイトが激重になる
ブログには、表示速度というものがあります。
ページの表示が遅いと、「もういいや」とブログを閉じられてしまう可能性が高まります。

PageSpeed Insights」というGoogleのツールで点数チェックできるので、まずはしてみましょう。

ネットサーフィンしていて、「このサイト重たいなぁ」と感じたサイトでチェックしてみた結果がこちらです。
「このサイト重たいなぁ」と感じたサイトでチェックしてみた結果

大体の理由が、画像サイズに問題があります

スマホの進化によって、スマホで撮影した画像サイズは超高画質ですね。

例えば、ブログ執筆中にiPhone XSで撮影したこの写真のサイズは、なんと、、、
iPhone XSで撮影したこの写真のサイズ
ヤバめですね。
iPhone XSで撮影したこの写真のサイズ

ちなみに、僕は「横:1200ピクセル(px)」にしています

PageSpeed Insights」でテストした、当ブログの結果(2019年8月17日の検証結果)

パソコン

パソコン

スマホ

スマホ

なぜ、1200ピクセル(px)にしているのかという理由ですが、小さくもなく大きくもなく程よいからです。

あと、Appleのサイトで使われている画像が900〜1500ピクセル(px)で、この平均値が1200だからですね\(^o^)/
Appleのサイト

細かいことは、考えなくてOKです

ブログ運営は細かいことを考えすぎると、萎えまくります。

「うぇー、過去記事の画像とかどうしよう…」と思った人もいると思います。

結論:これから気をつければOKです

あとはスキマ時間を見つけて、リサイズしていきましょう。

ブログの画像サイズは、何ピクセルにすべきか

ブログの画像サイズは、何ピクセルにすべきか
上記で、僕は1200ピクセル(px)にしているという話をしましたが、自分のブログは何ピクセルがベストなのか、疑問に感じると思います。

なので、調べ方を教えます。

1:Google Chromeでブログを開く

Google Chrome」で自分のブログを開きます。

2:右クリックして「検証」をクリックする

右クリックをすると、メニューが出るので「検証」を押します。
右クリックして「検証」をクリックする

3:画像が配置される「横幅」のサイズを見る

750」と表示されているのがわかります。大体これが目安ですね。
ただ、今はレスポンシブデザインなので、各種媒体でサイズは変動します。なので、若干大きめにしておけばOKです。

※下記の画像は、クリックすると大きくなります。
画像が配置される「横幅」のサイズを見る

備考:レスポンシブデザインとは、閲覧者の画面サイズや、Webブラウザに応じてサイズが変動するデザインです。

これで終わりです。

まぁ、時代も5Gになるので、画像サイズがある程度重たくてもサクサク操作できる時代が来ると思いますが、適正サイズで画像を配置するといいと思います。

結論、700〜1600ピクセル(px)でいいんじゃないでしょうか。
画面いっぱいで表示するデザインとかだと、もうちょい大きくですね。

ブログの画像サイズを意識して、圧縮する習慣をつける

ブログの画像サイズを意識して、圧縮する習慣をつける
大前提として、画像のサイズを意識することが大事です。
そして、大きければ圧縮しましょう。簡単にできます。

2ステップだけです。

ステップ1:画像のサイズをチェックする

  • ファイルを右クリックする
  • 情報を見る」をクリックする
  • 大きさ」でサイズを確認する

画像のサイズをチェックする
画像のサイズをチェックする

ステップ2:画像を圧縮する

僕は、イラレでリサイズする or 「画像を縮小する」という無料ツールで圧縮しています。
» 画像を縮小する

これで、完了です\(^o^)/

まとめ:ブログを画像サイズは、絶対に意識すべき

まとめ:ブログを画像サイズは、絶対に意識すべき
面倒だな、、、と思ってもやるべきです。
ちゃんとブログ運営をしていくなら、こういう作業は面倒くさがってはいけません。

  • サイズ確認する
  • リサイズする

たった、この2ステップを疎かにする者、ブログを制することはできませんm(_ _)m(過去の自分にも言いたい…)

実際の操作動画も用意していますので、ご覧ください。

動画で見る(所要時間:9分10秒)

画像関係に関する参考記事はこちらです。

相談やお問い合わせ、ご依頼など

お気軽にメッセージください。
» お問い合わせ

Webマーケティング基礎知識の学習用に、「【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ」をまとめました。

【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ

ブログを使ったWeb集客の基本を学習したい方向け。本記事は初心者がブログを開設するために必要な基礎をまとめました。情報が変われば常にアップデートしていきます。これからWebマーケティングをを学びたい人や現在学習中の人は是非ご覧ください。

» 詳細を読む

当ブログと他のサイトの圧倒的な違いは様々な疑問や悩みを解決するために【無料体験レッスン】30分相談会(オンライン開催)に初回限定で参加できることです。

どうしても分からなかったり、1人で悩むことがあればご相談ください。
また質問やメッセージ、相談があればお気軽にお問い合わせください(*´∀`*)
» お問い合わせ

人気記事【Minimalカスタマイズ】マナブログをモデリングして、ブログを作る【manablog】

人気記事【目指せマナブログ】WordPressテーマコピー/相談チャット【無料】