高速化

こんにちは、久川和人です。

Webサイトを見ようとしたときに、表示が遅いときってありますよね。あなたのWebサイトでも表示に時間がかかると、読者さんがせっかくWebサイトを見ようとしたのに閉じてしまうことにもなります。

それに最近ではグーグルなどの検索エンジンでも、Webサイトの表示速度は、SEO(検索エンジン最適化)と呼ばれる検索結果の順位を決めるための評価の対象となっているともいわれています。

Webサイトの表示を改善する方法はいくつかありますが、簡単にできる方法として、Webサイトの画像ファイルの容量を小さくすることで改善させることができます。

今回は、簡単にブログを高速化!無料サイトで高画質のまま画像を圧縮する方法についてお話していきます。

画像を圧縮する前の基礎知識

画像を圧縮する方法を説明する前に、つぎの2つのことを説明いたします。

  • 最適な画像ファイル形式
  • 画像ファイルの大きさ

最適な画像ファイル形式について

画像ファイルを圧縮するには、画像にあった画像ファイル形式になっているほうが、画像がきれいに表示されたり、より小さいファイルになります。Webサイトで使用する画像ファイル形式でよく使われるのが、JPEG、GIF、PNGです。

特徴としては次のとおりです。

  • JPEG:圧縮率が高く、写真などの色彩が多い画像に適しています。不可逆圧縮のため、圧縮すると画像が劣化します。
  • GIF:色数が256色と少なく、その分、JPEGよりも圧縮率が高いです。背景透過やアニメーション化することができます。可逆圧縮のため画像劣化が生じません。
  • PNG:色数が多くフルカラーに対応しています。背景透過が可能でGIFよりも圧縮率が高いです。ただし、フルカラーの場合、JPEGよりもファイルサイズが大きくなります。

一般的には、写真はJPEG、アイコンやイラストはGIF、PNG形式にします。なお、不可逆圧縮は画像を圧縮する前の状態に戻しても同じ色彩の画像にならず、可逆圧縮は同じ色彩の画像になります。

画像の大きさ

ここでいう画像の大きさとは、画像のファイルサイズではなく、画像の縦横幅です。画像が大きい方が、画像ファイルのサイズも大きくなります。Webサイトで使用する場合は、横幅が680px(ピクセル)~800pxあれば大丈夫です。

Webサイトの横幅は、WordPressの場合、テーマによって違います。たとえば、WordPressテーマのSimplicityでは横幅は680pxです。そのため、横幅が680px以上の画像でも、680pxにリサイズされ表示されます。

なお、リサイズされますが、画像自体のファイルサイズはそのままなので、Webサイトにあった画像の大きさにするとよいです。

横幅が不明な場合は700pxあれば十分ですが、心配な場合は800pxとしておきましょう。

 なお、画像の縦横幅を変えるには、このあと説明する、画像圧縮サイトで変更できます。

画像圧縮サイトを利用して画像ファイルを小さくする

画像圧縮サイトは多数ありますが、ここでは、つぎの2つの無料で利用できるWebサイトを使って、画像ファイルを小さくします。

『BULK RESIZE PHOTOS』で画像の圧縮とリサイズ

画像の圧縮とリサイズを同時に行えるのが、『BLUK RESIZE PHOTOS』です。

①『BLUK RESIZE PHOTOS』にアクセスします。

②【Drag & Drop Images Here!】に画像を移動させます。複数の画像をまとめて圧縮とリサイズができます。
bulkresizephotos

③リサイズしたい内容を選び、
④サイズを入力、
⑤【スタートリサイズ】をクリックします。
画像圧縮

⑥自動的にファイルがダウンロードされます。
リサイズ完了

リサイズした結果

リサイズした結果は次のとおりです。

リサイズ前
(元のファイル)
6000×4000px 6402.1KB
リサイズ後 780×520px 186.5KB

ファイルサイズが2.9%になりました。画質はこのようにとっても小さくなります(縮小しています)。
縮小イメージ

画像の仕上がりは、上がリサイズ前、下がリサイズ後で、品質を落とさずに画像を小さくしていることがわかります。
リサイズ前後の画像

このように、画像を最適な大きさにするだけで、画像ファイルサイズを小さくできます。

『TinyPNG』でさらに画像を圧縮する

つぎに『TinyPNG』を使って、さらに画像を圧縮します。

①『TinyPNG』にアクセスします。

②【Drop your .png or .jpg files here!】に画像を移動させます。最大20ファイル、5MBまで、複数の画像をまとめて圧縮ができます。
TinyPNG

画像ファイルが圧縮されます。どのぐらい圧縮されたかは、画面に表示されます。
③まとめてダウンロードする場合は、【Download all】をクリックします。
画像ファイルを圧縮

圧縮した結果

圧縮した結果は次のとおりです。

リサイズ前
(元のファイル)
6000×4000px 6402.1KB
リサイズ後
(BULK RESIZE)
780×520px 186.5KB
画像圧縮後
(TinyPNG)
780×520px 150.3KB

さらに画像ファルサイズが80.6%になりました。元のファイルと比べると、2.3%の大きさです。画像仕上がりは、上がBULK RESIZE PHOTOS、下がTinyPNGになります。
圧縮後の比較

TinyPNGで画像ファイルサイズが小さくなっていますが、ほとんど見分けがつかないかと思います。

まとめ

今回は、無料サイトで高画質のまま画像を圧縮する方法についてお話ししました。

画像の圧縮とリサイズができるサイトとして2つの無料Webサイトを紹介しました。

画像の圧縮とリサイズを行うのは、そのままWebサイトに画像を貼り付けるよりも手間はかかります。しかし、写真などの大きなファイルは数%の大きさまで小さくできます。

そうすることで、画像ファイルだけ見れば、Webサイトの表示速度が何十倍も速くすることも可能です。

写真などの大きなファイルだけでも、画像の圧縮とリサイズをしてみてはいかがでしょうか。

 

久川和人のうつ病克服への日記を別のブログで書いています。読んでもいいよって方は、以下をクリックしてみてくださいね♪
日記
好きなことを仕事にできるブログライティングが身に付く教科書”ドリームライティング”
ドリームライティング

趣味ブログから始めて、
あなたの好きな場所で、好きな時間に、好きなことを仕事にできるブログライティングを身に付けてみませんか?
そんな夢が叶う教科書が”ドリームライティング”です。
今なら僕の特典も付いています。

Twitterでフォローしよう

おすすめの記事