誰かのブログやサイトを見てるとき、ページの表示に時間がかかるとイラッとして閉じてしまった経験ありませんか？
わたしはよくあるんですよね。せっかちなので。
どんなにためになる記事を書いても、ページが重ければ閉じられちゃうんです。
ということで今回は、画像を軽くしようというお話です。
サイトが重いと離脱する
タイトルを見て「読んでみようかな」と思っても、表示が遅ければ読まずにページを閉じてしまう人は多いはず。
大好きな芸能人のブログなら、きれいな顔の画像が表示されるまで待ってくれます。
しかし、わたしたちのような得体の知れない一般人のブログは、表示に時間がかかったら読んでもらえないんです。世の中甘くないのよね。
サイト表示が遅くなる大きな原因は、画像サイズが大きいこと。文字だけすぐに表示されて、画像は表示に時間がかかることってありますよね。
画像サイズが小さくなれば、表示速度は上がるんです。
適切な画像サイズを確認しよう
スマホで撮影した画像は、横幅3000～4000pxくらいあります。 無料画像サイトでダウンロードした画像は、横幅5000px以上あることも。
以下は無料画像サイトにあった写真です。
1秒くらい画像にカーソルを合わせると、上記画像のように詳細が表示されます。「大きさ」という数字の単位がpx（ピクセル）。
でも、ブログで表示される最大横幅は700～800px程度。
スマホ画像や素材サイトでダウンロードした画像をそのままブログに載せたら、サイズが大きすぎて表示速度は確実に遅くなります。サイズ確認とリサイズは必ず行いましょう。
なお、WordPressのテーマによってヘッダー画像やアイキャッチ、記事内で表示される画像のサイズが異なります。
各テーマの公式サイトで適切な画像サイズを確認してくださいね。
ちなみに、このブログのテーマ「JIN」のアイキャッチは、「横760px：縦428px」がおすすめサイズとして紹介されてます。
記事内の画像も、最大横幅をアイキャッチと同じ760pxにするときれいに収まります。
アイキャッチ画像の大きさはどれくらいが最適？／JIN MANUAL
サイズ変更ならCanvaフォトエディター
簡単に画像サイズを変更できるツールといえば、またまた登場「Canvaフォトエディター」です。
サイズを指定してリサイズできます。
不要な部分を切り取ってしまうのもいいですね。
簡単にサイズ変更できますよ。
実際にリサイズした結果がこちら
大きさを 5311×3541 から 760×428に変えたところ、「2.11MB ⇒ 593KB」という容量ダウンに成功。
2.11MB（メガバイト）= 2110KB（キロバイト）なので、約4分の1のサイズになりました。
一般的なブログに使う画像は、50KB以下にできるといいですね。画像は軽ければ軽い方がいいので、見た目が劣化しない範囲で容量ダウンしてください。
画像のリサイズや切り取りについては「Canvaフォトエディター3つの良いところ」という記事にも書いてるので、よかったら読んでみてくださいね。
Canvaフォトエディターは以下からアクセスできます。利用登録なども無く、すぐに使えますよ。
読まれない原因をなくそう
今回は、画像を適切なサイズに変更しようというお話でした。
- サイト表示が遅いと読者が離脱する。
- 画像サイズが大きすぎるとサイトが重くなる。
- 自分のブログに合う画像サイズを確認する。
- Canvaフォトエディターを使えばリサイズできる
画像があるとブログが華やかになるし、目を引くこともできます。
そんな画像のせいで、読者が離れてしまうのはもったいないこと。
ブログを書いてアップする習慣が身についてきたら、画像サイズなどの細かい部分も気にするようにしてくださいね。
ではでは。
いつも楽しく拝見しています。ためになる記事をありがとうございます。
私はDTPオペレーターの経験があり、紙媒体の編集はまぁまぁできるんですが、ネットの世界はさっぱり理解できません。
とか言いながらWPで最近ブログを始めました。
ひとつお聞きしたいのですけど、PhotoshopでWeb最適化すると幅1000pxの画像が数十kbにリサイズされます。
これはブログにあげていいレベルの画像でしょうか？
見た目はほとんど劣化が見られないのですけど。
お答えいただけたら嬉しいです。
しゅうさん、コメントありがとうございます^^
数十KBの画像は、ブログにアップして問題ないですよ。
見た目の劣化が無いならなおさら問題なしです。
当ブログの画像は平均30～40KB。容量が大きいものでも200KB以下、少ないものだと5KBです。
画像は、見た目の劣化が分からないギリギリまで圧縮するのがベスト。
写真家のギャラリーサイトのような、写真のクオリティにこだわるブログなら別ですが、一般的なブログなら画像の質はあまり気にしなくて大丈夫ですよ。
DTPオペレーターをされてたとのことで、Adobeソフトを使えるのはブログ運営で有利です。
Webの世界にもすぐ慣れるはずなので、ぜひブログを続けてほしいと思います。
お答え、ありがとうございます！感激してます。励ましまでいただいて、ステキなクリスマスプレゼントです。
編み物や織りものに関するブログを書いていますが、分からないことばかりでオドオドしながら作業しています。イラレで図解などできることが強味だと自覚して、いっぱい失敗しながら成長したいと思っています。
ありがとうございました(^-^)/
ご返信ありがとうございます！
こちらこそ、素敵なクリスマスプレゼントと言っていただいて嬉しいです(*´▽｀*)
編み物とイラレの両方が得意な人ってなかなかいないので、オリジナリティ溢れるブログになりそうですね。
今回のご質問は記事にさせていただきます。
分からないことがありましたら、お気軽にコメントくださいね。