簡単にブログを高速化！無料サイトで高画質のまま画像を圧縮する方法

2018年11月11日 2019年4月14日

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

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サイトを使って、画像ファイルを小さくします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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