どうしてもできるだけ早く効果が欲しい方におすすめなので、是非お試しください！

サイト制作においての画像の扱いというのは「デザイン性を高める」という面でも「サイトの高速化を図る」という面でも非常に重要なポイントとなってきます。

デザイン面での画像の効果的な使い方に関してはまた今後投稿していきたいと思いますが、こちらの記事
【初級編】Webサイトパフォーマンスにお悩みの方へ、今から実践できるサイト高速化　「画像の取り扱いについて1」
でも紹介しましたが、一先ず「サイトの高速化を図る」ための画像の取り扱いについて見ていきたいと思います。

重要なポイントは

• 画像をサイトにアップロードする前に、まずは最適化を施す（画像の容量削減）。
• 表示デバイスに合わせた画像を用意する。
• その画像が画像である必要があるのかを疑い、可能であればデザインをCSSで表現することによるWebサイトパフォーマンスの向上を狙う。（CSSの無限の可能性を信じ、自己研磨を怠らない。）

上記の3ポイントを押さえれば、サイトを構築する際の画像の扱いに関してはほとんど問題ないかと思います。

今回はその中でも
「画像をサイトにアップロードする前に、まずは最適化を施す（画像の容量削減）」について、誰でも手軽に対策できる「ツール」を3つとそれぞれの「手順」を紹介しようと思います！

今回はフリー素材の画像を使い、圧縮率を比較してみます。
元々の画像容量は163KBとなっております。

今回使用する画像

画像容量163KB

Online Image Сompressor – Optimizilla

こちらのツールはMATEREATEでも急いでいるときにはよくお世話になります（笑）

ツールの魅力としては20枚までの画像を一括で軽量化できるのに加え、容量削減のパフォーマンスに優れている点かと思われます。
ダウンロード自体は、個別またはZIPファイルにて一括でダウンロードできます。

ただし、圧縮後のファイル名には「min」という記述が付与されますので、実際にサイトにアップロードする際には名前を再編集する手間が発生する場合もございます。（そのままでいい人はそのままでも）
私的には、「min」がついてくれると、どれが処理を施した画像か、元の画像かが整理しやすいので、助かっています。

TinyJPG

こちらのツールは画像の圧縮ツールとして有名なのではないでしょうか。

ツールの魅力としては、Optimizillaと同様に、無料で20枚までの画像を一括で軽量化できます。
ただ、こちらは任意のクオリティを設定することができないので注意が必要です。
しかしながら、ダウンロード時にDropboxへの保存が簡易的に可能な点は追加の魅力であると言えます。

ダウンロード自体は、個別またはZIPファイルにて一括でダウンロードできます。
Optimizillaとは違い、圧縮後のファイル名に変更もありません。

iLoveIMG

こちらのツールは画像の軽量化に加え、リサイズや切り抜き、透かしなどの加工までをサポートしているツールとなります。

ツールの魅力としては、このサイト内でほとんど全ての処理を完結できる点かと思われます。
画像の追加をする際はGoogle DriveやDropboxから簡易的に選択することも可能です。
ただ、こちらも任意のクオリティを設定することができません。

また、Optimizillaとは違い、こちらも圧縮後のファイル名に変更もありません。

いかがでしたでしょうか。
圧縮後の画像を見ていただければと思うのですが、どのツールも80%近い容量の削減ができたにも関わらず、見た目においてほとんど変化は感じられないかと思います。

補足として、今回はフリー素材の画像を使用しましたが、圧縮元の画像によっては容量の削減が実感できないこともあります。（スマホで撮影した、元々サイズや解像度が低い画像など）
フリー素材はほとんどがデジカメや専用機器で撮影されたもの、また加工を施したものとなりますので、元々のファイルサイズが大きい可能性が高いため、積極的にツールの使用を行うのが良いかと思います！

今回紹介したツールはどれも無料で使用が可能ですが、無料版では1日のファイル量に上限があったりするので、大量の画像の処理を必要とされる際は有料版の使用も検討してみてはいかがでしょうか。

今後も、サイト制作において便利だなと感じるツールの紹介も順次行ってまいりたいと思います！

ではでは！！