サイトの最適化をめざすなら、まずブログ画像を圧縮して軽量化する必要があった!

ブログ画像の軽量化

 

今まで写真についてはとにかく高画質がいい!という考えから、撮影する時もその機種での最大サイズに設定して撮っています。

ブログに使用している画像は、少し色を明るくするなどのレタッチくらいはたまにしていましたが、「画像の最適化」についてはよく知りませんでした。

写真は高画質であればあるほど容量も重くなり、そのまま使えばその分サイトの表示も遅く(重く)なります。

そこで今回は、ブログで使用する画像の軽量化について考えてみます。

 

目次

 

画像を軽量化する目的

そもそも、なぜ画像を軽量化する必要があるのでしょうか?

答えはひとつです。

 

いいブログをつくるため。

ブログの中身はもちろんですが、表示が遅いサイトはあまり好まれないですよね。

画像をたくさん使っているサイトは見ていておもしろいのですが、それゆえに重たくなりがち。全てのページが表示される前に離脱されてしまうことが考えられます。

ブログを書くからにはやっぱりたくさんの人に見てもらいたいので、画像を軽量化することでサイトの最適化をはかる必要があります。

 

画像を軽量化する方法

画像を軽量化するには「圧縮」「リサイズ」です。

そのどちらも一瞬にかなえてくれる無料のソフトがあります。

 

圧縮とリサイズが同時にできる無料ソフトの縮小専用。

ダウンロードはこちらから

縮小専用。 | 窓の杜ライブラリ

縮小専用。」は驚くほどかんたんな操作で、画像を希望のサイズにリサイズし、圧縮してくれます。オプションでは、画像をくっきりさせたり、彩度を上げて保存ができます。なお、JPEGファイルのみが対象です。

 

起動画面

縮小専用

指定範囲内のサイズを指定することで、同時にリサイズもできます。

たとえば、画像の最大幅を720にしたい場合は上図のように入力します。一眼レフなどで撮影した3:2の写真なら、幅720×縦480ピクセルのサイズで出力されます。

もともと指定のサイズより小さい画像はそのままのピクセルサイズとなります。

 

オプション部分では、好きな項目をチェックします。

おそらくここで悩まされるのはJPEG量子化率という項目ですが、私はとりあえず80%にしています。デフォルトのままでもいいと思います。

または、ファイルサイズを指定してもOKです。

 

あとは右下のあいている部分に画像ファイルをドラッグ&ドロップすると、一瞬で圧縮作業が終了です。できたのかどうか不安になるくらい、ほんとうに一瞬で終わります。複数のファイルをいっぺんに行うこともできました。

 

オンラインで無料で使えるTinyPNG

TinyPNG

 

TinyPNG | 公式サイト

さきほどの縮小専用。JPEGファイルのみでしたが、こちらのTinyPNGは、JPEGPNGファイルどちらでも圧縮できます。

一度に20個までとなっていますが、ウェブページを更新(再読み込み)することで何度でも利用可能です。一つ当たりのファイルサイズは5MBまでのものが対象です。

 

TinyPNG01

ドラッグ&ドロップするだけなので操作もかんたんで、複数のファイルを指定して行うことができます。

右側のdownloadボタンから圧縮後のファイルをダウンロードします。

今回は79%、965KBもファイルサイズを圧縮することができたようです。

 

圧縮前後の画像ファイルサイズを比較

縮小専用。JPEG量子化率を80%に設定して圧縮しました。画像の質の変化も見比べてみます。

圧縮前 720×480 263KB

maroharu100

圧縮後 720×480 58.7KB (圧縮率77.7%

maroharu80

 

圧縮前 720×480 219KB

sairinka100

圧縮後 720×480 46.4KB (圧縮率78.8%

sairinka80

 

どちらの画像も変化はほとんど分かりません。

 

まとめ

今回使用したどちらの圧縮方法でも、圧縮前後の画像での劣化はほとんど分かりませんでした。これで安心して画像の軽量化ができそうです(量子化率の詳しい比較は別の記事でお話します)。

サイトの検証までは行っていませんが、画像をアップロードする際にもサクサクしているなと体感できました。

最近はスマホのカメラも驚くほど高画質になっているので、どんな写真でも軽量化する必要性が高まりそうです。