スモール起業ビルダー・ZONOのブログ

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

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メディア構築 or リモートワーク(テレビ会議システム)の導入をご検討の方は、ぜひどうぞ🙇‍

おすすめコンテンツ

無料コンテンツ

有料コンテンツ

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

どうしても分からなかったり、1人で悩むことがあればご相談ください。

その他、ご相談&ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

無料から学べる「01blog College」に参加はお済みですか?メディア運営の基礎から応用を、順序立てて学べるオンライン学習サイトです。この機会にぜひどうぞ💁‍♂️

僕は、こんな人です

ゾノ@スモール起業ビルダー
当ブログの筆者。日本一わかりやすいブログ教師/高校教師の職を捨て起業失敗→在宅リモートワークで月収7桁達成→V字回復。10代から不登校や非行で根っからの引きこもり人間。現在はオンライン講座『外出せずに学べるパソコン教室』を運営し生徒は累計230名。個人がマイペースに生きるコツを発信しています。朝大好きです→ #01blog朝活の会
» プロフィール詳細はこちら

チップをいただけると、心から喜びます


人気記事【ブログ書くことない】ブログ書き方テンプレートで解決【ひな形】

人気記事【発表】オンライン学習サイト完備のコミュニティ【01blog College】