Webサイト(ホームページ)やブログに画像をよく使いますが、画像のファイルサイズが大きいことでサイトの表示速度やサーバの容量など、見えない部分で負担がかかってきます。

ファイルサイズが大きい画像を多いページは表示速度が遅くなるので、おそらく多くの方が気にしているSEO的にもマイナスです。サーバの容量などの見えない部分での負担は、今は大丈夫と思っていても後々、ボディーブローのようにじわじわと効いてきます。
皆さんお使いのスマートフォンなどで撮った写真も、すでに圧縮形式でもあるJPG画像でも2、3MBほどあったりします。そのままWebサイト(ホームページ)やブログに使うにはかなりファイルサイズが大きいです。

 
例えば、安くて小さい容量のレンタルサーバを借りていて、ファイル数・ブログの記事数が増えてきてアップロードされている画像も沢山あり大きいサイズの画像をバンバン使っていると、サーバの容量がいっぱいになって画像がアップロードできなくなったりします。
それで容量の大きめのサーバを借りるなどの対処をしないといけなかったりと。
一般の方には「サーバ???」ってお話しなのですが、知識が乏しいと後々苦労することに。

このサーバの容量がパンパンな状態でもサイトが重くなる原因にもなりますので、こちらもSEO的にもマイナスです。

実は画像のファイルサイズが大きいままだといいことがないのです。
デメリットだらけです。

なので画像を使用する前にファイルサイズは小さくしておきましょう。
画像のファイルサイズが軽いにこしたことはありません。

 
もちろん、人気のCMSであるWordPressをお使いの方はアップロードしたファイルを圧縮してくれるプラグインもありますが、プラグインばかりに頼っているとサイトも重くなりますし、セキュリティ面でも脆弱性が発見された時に厄介です。
なのでアップロードする画像くらいは自分でなんとかしましょう。

 

今回ご紹介するのは簡単な方法なので、是非試してみてください。

 

画像のファイルサイズを圧縮してくれるWebサービス

Compressor.io

Compressor.io
https://compressor.io/

Compressor.ioは、JPG・PNG・GIF・SVGと4つの形式の画像を圧縮できるWebサービスです。
圧縮したい画像ファイルをドラッグ&ドロップするだけで、アップロードした画像のファイルサイズを小さくしてくれます。

また、圧縮はLossy(非可逆圧縮)Lossless(可逆圧縮)のどちらかを選択することができます。

データ容量を小さくするために不要な情報を削除するのを非可逆圧縮。
圧縮・展開を経たデータとが完全には一致しないデータ圧縮方法でデータを置き換えることで容量を小さくするのが可逆圧縮。

可逆圧縮よりも非可逆圧縮の方が圧縮率が高いです。

ちょっと難しくてよくわからないという方は、元に戻せないものを「非可逆圧縮」、あとで元の品質に戻せるものを「可逆圧縮」と思っていただければ良いです。
わかりやすいところで、ZIP形式の圧縮が可逆圧縮になります。展開してもファイルは壊れたりしていないですよね。

基本的にはデフォルトで設定されているLossy(非可逆圧縮)で圧縮していきます。

 
ページ右側の「TRY IT!」をクリックして、ファイルのアップロード画面にいきます。

 
Choose your compressionの枠内に圧縮したい画像をドラッグ&ドロップ、または「SELECT FILE」をクリックしてコンピュータ内の画像を選択。

 
試しに画像解像度1920×1440、ファイルサイズが3.7MBのPNG形式の画像ですとこんな感じです。

 
画像解像度1920×1440、ファイルサイズが872KBのJPG形式の場合。

 
Before / Afterと圧縮率が表示されます。
どちらも半分以上とかなり圧縮できましたね。
DOWNLOAD YOUR FILE」をクリックして自分のパソコンにダウンロード、またはGoogle DriveDropboxにも保存できます。
また別の画像を圧縮したい場合は「Compress another picture」をクリックしてページを更新します。

ちなみにGIFの圧縮は、GIFアニメーションも対応しています。

 

TinyPNG / TinyJPG

TinyPNGとTinyJPG。

PNGとJPGと2つのサイトになっていますが、TinyPNGでもTinyJPGでもどちらもPNG・JPG両方の形式に対応しています。また、LINEのアニメーションスタンプ画像を作る形式でお馴染みのアニメーションPNGにも対応しているそうです。
これからいろんなWebブラウザでアニメーションPNGが対応していくと思うのでこれは嬉しいですね。

TinyPNG
https://tinypng.com/

 
TinyJPG
https://tinyjpg.com/

 
両サイトの見た目はそんなに変わりません。

こちらも簡単で、「Drop your .png or .jpg files here!」の枠内に圧縮したい画像をドラッグ&ドロップ、またはすぐ上のアイコンをクリックしてコンピュータ内の画像を選択。

TinyPNGとTinyJPGの特徴といえば、複数のファイルを一気に圧縮できるところでしょう。

実際にPNGとJPGを一気に圧縮してみたのがこちら。

圧縮したファイルの右側のダウンロードボタンから個別にダウンロードできますし、「Download all」 ボタンでZIP形式で一括ダウンロードもできます。また、「Save to Dropbox」のボタンからDropboxにも保存することができます。

 

まとめ

4つの形式の画像を圧縮できるCompressor.ioは使い勝手がいいでしょう。
PNGの圧縮率はTinyPNGの方が優れている印象です。
画像にもよりますが、JPGはCompressor.ioの方が圧縮率がいいです。

なので3つのWebサービスを紹介しましたが、
PNGはTinyPNG、その他のJPG・GIF・SVGはCompressor.ioを利用するといった使い分けが良いでしょう。

 
Webサイト(ホームページ)やブログ等だけでなく、他にも画像のファイルサイズを小さくしないといけない時でも是非こちらのWebサービスを使ってみてください。