画像の容量を削減する方法
（更新 ）
ホームページで画像を使用する際は、画像の容量（ファイルサイズ）を削減してから使用することをおすすめします。
画像の容量を削減する方法には、画質が劣化しないロスレス圧縮と画質が劣化するロッシー圧縮の2種類があります。
JPG
JPG画像は容量を削減する際に画質の一部が失われるロッシー圧縮が行われます。ただし、人間の目ではほとんど違いが分からないため、見た目を保ちながら容量を大幅に削減することができます。PNG
PNG画像は、ロスレス圧縮によって画質を保ったまま容量を削減できますが、削減幅はそれほど大きくありません。そのため、さらに容量を削減したい場合には、色数を減らす「減色処理」を行うことで、見た目を保ちながら大幅に軽量化することも可能です。TinyPNGのようなツールが当てはまりますが、その場合はロッシー圧縮となります。
なお、ZIPなどの汎用的なロスレス圧縮は、画像の容量削減とは目的が異なるため、ここでは対象外とします。
以下の方法は、いずれも画質の劣化が伴うロッシー圧縮になりますが、画質とサイズ容量のバランスをとって削減するようにしましょう。
Photoshopで画像の容量を削減する方法
こちらはデジカメで撮影したPhotoshopのパッケージ画像ですが、容量を削減していない状態では「7,500KB」となっています。
この状態から、Photoshopの場合は「ファイル」→「WEB用に保存」の箇所で画像サイズや画質を調節することができます。
まずは画像サイズを縮小して容量を削減します。が、640px～1280px程度に縮小するなり、トリミングしてから使うことをおすすめします。画像のサイズを小さくすれば、それだけで容量が削減されるはずです。
次に、画質を落として容量を削減します。
「低画質～最高画質」までありますが、同じ画像サイズでそれぞれの画質を比較してみますと、その差異はほとんど感じられません。
人間の目では画質の違いは感じられないものの、容量については最高画質が「215KB」であるのに対し、低画質は「11KB」まで削減されています。
元の画像が「7,500KB」であるのに対し、最高画質では「215KB」となっており、さらに低画質まで圧縮すると「11KB」になります。
個人的な印象ですと、「低画質」の場合は画質の荒いケースもありますが、「中画質～最高画質」についてはどれを選択してもあまり違いがないため、「中画質」あたりがおすすめです。
中画質で圧縮した場合ですと、320px程度の大きさだと数十KB程度、640px程度の大きさでもほぼ100KB以内には収まるはずです。
さらに最近では、従来のJPGやPNGよりも圧縮率に優れるWebP（ウェッピー）などの次世代フォーマットでの書き出しも推奨されています。同じ画質であればJPGよりもさらに軽量化できます。
最近では構造化データで1,200px以上の画像の大きさが推奨されており、サイト上で大きな画像を使用するケースも多くなってきましたが、そのまま使うと容量がかなり大きくなってしまいます。
画像の容量が大きい場合、モバイル環境ではサイトの表示速度が遅くなる可能性もあり、それが元で検索エンジンのランキングに影響してしまう可能性もあるため、できるだけ容量を圧縮してから使用されるとよいでしょう。
TinyPNGで画像を圧縮する方法
Photoshopを利用していない場合、ネット上で無料で簡単に圧縮できるサイトがあるので、そちらを利用することをおすすめします。いくつかの圧縮サイトがありますが、TinyPNGでは複数の画像を選択して圧縮することができます。
→ TinyPNG
無料の場合ですと、5MB以上の画像には対応していませんが、キャプ画などのPNG画像ならたいていは圧縮できるはずです。画像サイズをペイントなどで小さくしたのち、画質についてはTinyPNGにて圧縮するとよいでしょう。
例えば、上記の最高画質のJPG画像をTinyPNGで圧縮してみると「220KB」から「70.9KB」に削減されましたが、Photoshopの「WEB用に保存」の高画質あたりまでは圧縮できるかもしれません。
Photoshopで通常のPNG（PNG-24）として書き出した場合、画質を落とさないロスレス保存となるためファイルサイズが大きくなりがちです。
しかし、TinyPNGのようなツールに通すと、画質をほとんど保ったまま高度な減色処理（ロッシー圧縮）を行ってくれるため、Photoshopで出力したPNG画像よりも容量を大幅に削減できる場合があります。
そのため、簡単な画像でしたらWindows付属のペイントでサイズを調整しつつ、画質についてはTinyPNGを使った方が簡単かもしれません。