ブログの表示速度が遅い?画像サイズを確かめよう!掲載する画像の最適なサイズがやっとわかった!

ブログ運営

ブログの表示速度を早くするために画像サイズを最適化する!

画像を適切な大きさにすれば、表示速度が速くなる

ブログを運営していると、記事中やアイキャッチに画像を掲載するのは必然となりますね。

スマホやデジカメで撮ったものを載せたり、webで手に入れた無料・有料素材を貼ったりするかと思いますが、サイズや形式はどうしていますか?

私は、ブログを定期的に書くようになって半年近く経ったところでやっと(!)「適切な大きさ」がわかるようになりました(遅い)。

それまでは「綺麗な写真の方がいいだろう」とデジカメで撮ったものを載せたりしていましたが、それは大間違い!

●不必要に大きな画像を使うと、重くなってしまうんです(´;ω;`)

PCで作業している自分に問題なく見えているからといって、読んでくれている方がストレスなく見えているとは限りませんね(思い至らず、すみませんでした…)

調べてみたところ、ブログに載せる画像のおすすめサイズは

大きくても横幅600pxで、100KBくらいまで

のようです。

それを知ってから、画像サイズは横幅600pxまでにするようにしました。

でもさらに調べると、もっと自分のサイトにあった画像サイズと、それに合わせた画像加工のしかたがわかってきました。

自分のサイトにあった画像の大きさを調べてみよう!

自分のサイトにあった大きさを調べるには、デベロッパーツールを使います。

デベロッパーツールの表示のしかた

1.Chromeの場合右上の3つ縦に並んだ●をクリック

2.「その他のツール」→「デベロッパーツール」

3.モバイルのマークをクリックすると、モバイルで見た時の見え方(左側に表示)がわかります。

そしてこの四角が重なっている部分の一番内側の四角の数字を見ます。

当ブログの場合、「400×148.85」となっています。

つまり横幅400ピクセルがいいんですね。今まで使っていた画像は、ケタ違いに大きすぎでした!

その他、画像サイズを小さくする方法には

  • プラグインを使う
  • 画像圧縮サイトを使う

があります(らしいです・・・)

プラグインのことを書き始めると長くなってしまうので(すみません)これ↓だけ。

とりあえずEWWW Image Optimizer、入れました!

合わせて、画像を小さくするサイトは、以下の2つのうちどちらかを使っています。

●tiny png

こちら↑は最大サイズ5MBまでの画像を縮小できますが、それ以上の大きさの画像を加工したい時は、こちら↓を使っています。

●画像を圧縮する!

見えにくくない限り画像サイズは小さい方がいいかなと思い、今は、トリミングやリサイズした後、さらに上記のサイトで縮小しています。

どちらも1度に20枚まで縮小できます。

プラグインと上記のサイトのおかげで、だいぶ軽くなってきた気がします。

でも正しい方法なのかどうか、まだ自信がありません…。

PageSpeed Insightsを使って、自分のサイトの速さを計ってみましたが、モバイルで見ると、まだまだ遅い当ブログ…。

改善する方法が判明したら書きますね。判明したら、そして私がそれを実践出来たら…。

2019年8月31日追記:ブログのテーマをSimplicityからCocoonに変えたら、劇的に速くなりました。Cocoonに実装されている機能を使うことによって、停止することができたプラグインが複数あり、それも良かったようです。テーマ、大事ですね。

どうもPNGやJPEGより「次世代フォーマットの画像」ってやつがいいらしいんですが、ブラウザによって表示されないことがあるとか。まだ調べ終わっていないので、また次回ということで<(_ _)>

 

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