Blog Know-how

【必須】これでサクサク!ブログで使う画像を圧縮してページ速度を上げよう。

悩む人

画像圧縮ってそんなに重要なの?

必須級だよ!しっかりと理解をしておこう。

ばる

ブログ(WordPress)において、画像圧縮は必須レベルで重要です。

画像圧縮をすることで、画像のサイズを小さくすることができ、ページの表示速度を上げることができます。
ほとんどのブログは、画像を入れる際に画像圧縮をしています。

ページの速度を上げることでブログの読み込みが早くなり、検索エンジンにも読者にも優しい記事を作ることができます。

今回はそんな画像圧縮のメリットや、画像圧縮の手順までまとめてきました。

ブログで画像を圧縮するメリット

ブログで画像を圧縮するメリット

  • ページの表示速度が速くなる
  • 写真のアップロード時間を短縮できる

冒頭で述べたとおり、画像圧縮をするとページの容量が減少するので、ページの表示速度が上がります。

ページの表示速度が上がることでSEO的にも有利になり、サイトの検索順位上昇にも繋がります。
検索順位の10位以内に入ることができれば、大幅なアクセスアップが見込めます。

逆にページの表示速度が遅いと、読み手側のストレスが大きくなり、ユーザーの離脱にも繋がります。
なので画像圧縮は必ずしましょう。

関連記事>>>【解決】実際にブログのアクセス数が伸びた!ブログのアクセス数を増やす方法。

画像を圧縮してサイズを小さくする方法

画像を圧縮してサイズを小さくする方法

  1. Bulk Resizeで画像のサイズを変更する
  2. TinyJPGで画像を圧縮する

画像の大きさを変更(リサイズ)をして、画像をブログに適切なサイズにしてから画像圧縮を行います。
適切なサイズにした後に画像圧縮をすることで、より画像の容量を軽くすることができます。

順に解説をしていくので、参考にしてください。

① Bulk Resizeでサイズを変更する

まず最初に「Bulk Resize」というサイトを使って、画像のサイズを変更していきましょう。
このBulk Resizeはインストールが不要なので、すぐに使うことができます。

Bulk Resizeはこちら>>>Bulk Resize

Bulk Resize

「画像を選択します」にリサイズしたい画像を入れます。

”150枚”まで一括でリサイズができるよ。

ばる
Bulk Resize

幅をクリックし、”700px”に設定して「スタートリサイズ」をクリック。

ブログに使う画像は、700pxがオススメ!

ばる
Bulk Resize

この画面になったらリサイズは完了です。
Bulk Resizeは、自動で画像のインストールがされるのでかなり楽だと思います。

次はリサイズした画像を圧縮してきましょう。

② TinyJPGで画像を圧縮する

「TinyJPG」というサイトを使用して画像を圧縮していきます。
Bulk Resizeと同様、インストールは不要です。

JPGと書いてありますが、PNGとついた画像でも圧縮をすることができます。

TinyJPGはこちら>>>TinyJPG

TinyPNG

「Drop your .png or .jpg files here!」をクリックし、先ほどリサイズした画像を選択します。

TinyPNG

画像の圧縮が終了したら「Download all」をクリックし、PCに画像をインストールすることができたら完了です。

TinyPNGはすごく有名なツールだよ!

ばる

圧縮前と圧縮後の容量の比較

犬 トイプードル 走る

変更前の容量 1660 KB

犬 トイプードル 走る

変更後の容量 31 KB

結果として容量は変更前に比べ、”50分の1”になりました。

画像を圧縮することで、多少の画質の劣化はしているのですが、人間の目で見た感じほぼほぼ変わらないと思います。
少なくとも自分には同じ画像に見えます。

この結果を見て、タイトルに【必須】を入れた意味が理解できたと思います。

ブログのページ表示速度を調べる方法

悩む人

画像を圧縮することで、容量が大幅に減ることは理解できたけど、実際のページの表示速度を調べる方法も知りたい。

こういった人たち向けに、ページの表示速度を調べる方法も紹介するよ!

ばる

・ Google PageSpeed Insightsを使う

今回は「Google PageSpeed Insights」というツールを使います。
こちらもインストールが不要なのでオススメです。

Google PageSpeed Insightsはこちら>>>Google PageSpeed Insights

Google PageSpeed Insights

「ウェブページのURLを入力」という欄に、調べたいウェブページを入力し、「分析」をクリックします。

Google PageSpeed Insights

読み込みが終わると、100点満点でページの速度が分析されます。
出た数字が100に近ければOKです。

73だとあまりいいとは言えない数字なので、100を目指す勢いでいきましょう。

Google PageSpeed Insights

下にスクロールすると実際のページの表示速度も分析されます。

自分はトップページを入れたけど、みんなは自分が見たいページを入れようね。

ばる

まとめ

画像圧縮をすることで、画像の容量が大幅に減少することが分かったと思います。
そして画像圧縮は、SEO対策にもなるので重要です。

サイトの表示速度は、ブログを更新したタイミングで見ることをオススメします。

気になって、他のブログの表示速度を調べてみたところ、検索上位はやはりページの表示速度が速い傾向にあります。
成功しているブロガーは、細かいところにまで気を配っていることがよく分かります。

成功しているブロガーに習い、ブログの表示速度を上げ、読者がより見やすいブログにしていきましょう。

-Blog, Know-how
-,

© 2021 ばるブログ Powered by AFFINGER5