低速回線でWebサイトがなかなか読み込まれなくてイライラすることはありませんか？ ウェブページの読み込みは速ければ速いほど良いです。そして、その速さに大きく影響を与えている要素のひとつが画像です。Webサイトを更新する立場なら、できるだけ画像のファイルサイズは小さく抑えて配信したいもの。
アップロードした画像がそのアップロード先のシステムで変換されたり圧縮されたりしない場合は、自分の手で圧縮することになります。そんなとき、画像ファイルのサイズと品質のバランスはどのように調整したらいいのでしょうか？ 実装テクニックまで踏み込むと話が大きくなるので、手元で画像を圧縮するときに知っておくと便利な知識に絞ってまとめてみます。
画像のファイルサイズを小さくする取り組みを行う前に、まず次の3つの観点で画像というものを考えてみましょう。
ファイルフォーマットと縦横のサイズはすんなり決まります。フォーマットは絵の内容から決まりますし、縦横のサイズは表示したいサイズから逆算したら導き出せます。
ただ、圧縮率はちょっと考えてしまいますね。圧縮をすればするほど画像は荒れていくので、品質が大事！というプロジェクトでは高圧縮はできません。いくらファイルサイズが小さくなって読み込みが速くなったとしても、綺麗に見せたい画像がガビガビでは残念なものです。何でもかんでも小さくすれば良いということでもないですよね。
ひとつずつ見ていきましょう。
まず、パスで表現されたベクター画像ならSVGにすると良さそうです。
次に、ラスター画像については、Google Developersの記事 Choose the right image format に従うのがよいでしょう。記事末尾にあるフローはこんな感じでした。
以下意訳（それぞれの理由はリンク先を読んでみてください）
また、画像を最適化する | PageSpeed Insights | Google Developersによると、
とのことです。
次世代の画像形式WebPも使えるようになってきていますが、出し分けの実装とも絡んできますのでこの場では言及するに留めておきます。
次に縦横のサイズです。現代では表示されるサイズ（CSSピクセル）の3倍や4倍ものデバイスピクセルを搭載した高解像度端末があります。経験的には、ほとんどのケースでCSSピクセルの2倍サイズの画像を用意すれば十分だと考えています。
2倍もあれば、目を近づけてつぶさにみるでもしない限りは、普通に満足できるくらい綺麗に見えます。逆に最低でも2倍のサイズはないと荒れて見えるので、これ以上のサイズは用意したいです。大きめの画像を用意しておいて、圧縮を強めにしておくというのもありかもしれません。
最後に圧縮率です。こちらに良いページがあります：
画像を最適化する | PageSpeed Insights | Google Developers。
ポイントは次の部分でしょう。
画質が 85 を超えている場合は、85 に下げます。画質が 85 を超えると画像の容量が急増しますが、視覚的な品質はほとんど向上しません。
基本的には85にしておくということ。これより大きくても品質にほとんど影響を与えないというのは驚きです。僕も普段は85にしていますが、ちょっと品質を下げてもいいと思える画像なら60-80くらいにすることもあります。
僕がいつも使っているのはImageOptimというアプリ（アプリ版はMacのみ）。内部的にはさまざまな圧縮ツールを組み合わせているようなので、これをひとつ入れておけば画像の圧縮については十分です。
ちなみに圧縮率と縦横サイズの関係について、JPEG画像を利用したこちらの記事のテスト結果が興味深いです。
High DPI Images for Variable Pixel Densities - HTML5 Rocks
1倍のサイズで90の画像よりも2倍サイズの20の画像の方が鮮明に見えるということ。この2枚の画像を比べると、ファイルサイズは同じか2倍サイズの画像の方がわずかに小さいという結果です。ただ画質が落ちていることには変わりなく、色味の変化もあります。また、これではファイルサイズは小さくなっていないので、やはりバランスをとって60-85くらいに落ち着かせるのが良いのかなと思います。
細かいチューニングに多くのコストをかけられるのであれば、この記事で書いたこと以上にもっとできることがあると思います。実装面の最適化もたくさんできます。しかしそれをやるかどうかは案件の中での優先度次第になるでしょう。この記事に書いたようなナイーブな最適化でも十分という場合も多いですから、まずは小さく取り組んでみることをおすすめします。