【極秘】ページ高速化でお悩みの方へ画像圧縮便利ツール紹介

【極秘】ページ高速化でお悩みの方へ画像圧縮便利ツール紹介

MATEREATE(マテリエイト)会社ロゴ

雨降ったり晴れたり、最近は天気が不安定ですね。
鹿児島ではそれに加えて灰も日常茶飯事で降ってくるため、洗車のタイミングが掴めません・・・。

鹿児島といえば桜島かと思いますが、県民としては困ったものです(笑)

ということで、今回は前回の画像に関する記事【初級編】Webパフォーマンスにお悩みの方へ、今から実践できるサイト高速化 「画像の取り扱いについて1」をさらに掘り下げ

「【極秘】ページ高速化でお悩みの方へ画像圧縮便利ツール紹介」

について述べていきたいと思います!

ページ高速化でお悩みの方へ画像圧縮便利ツール紹介

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

まずは画像の扱い方についておさらい

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

デザイン面での画像の効果的な使い方に関してはまた今後投稿していきたいと思いますが、こちらの記事(※リンク貼る)でも紹介しましたが、一先ず「サイトの高速化を図る」ための画像の取り扱いについて見ていきたいと思います。

重要なポイントは

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

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

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

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

Online Image Сompressor – Optimizilla

Online Image Сompressor – Optimizilla

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

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

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

【手順】

  1. サイトを開き、「UPLOAD FILES」よりファイルを参照しアップロード、または直接ドラッグ&ドロップにて貼り付けます。
  2. 圧縮が開始されます。画面下部にてクオリティの設定と、処理前後の画像の比較ができます。
  3. クオリティを設定し適用を押します。
  4. 画像をダウンロードします。必要であればファイル名を変更します。

以上で圧縮化は終了となります。

【結果】

今回、クオリティを80に設定したところ、

  • 圧縮前→163KB
  • 圧縮後→32KB

となり、約81%の削減となりました。

圧縮後の画像

TinyJPG

TinyJPG

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

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

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

【手順】

  1. サイトを開き、「Drop your .png or .jpg files here!」よりファイルを参照しアップロード、または直接ドラッグ&ドロップにて貼り付けます。
  2. 圧縮が開始されます。
  3. 画像をダウンロードします。

以上で圧縮化は終了となります。

【結果】

今回、圧縮を試したところ

  • 圧縮前→163KB
  • 圧縮後→34.1KB

となり、約80%の削減となりました。

圧縮後の画像

圧縮後の画像

iLoveIMG

iLoveIMG

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

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

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

【手順】

  1. サイトを開き、「画像の圧縮」を選択。
  2. 「画像を選択」よりファイルを参照しアップロード、または直接ドラッグ&ドロップにて貼り付けます。
  3. 「画像の圧縮」を押すと圧縮が開始されます。
  4. 画像をダウンロードします。

以上で圧縮化は終了となります。

【結果】

今回、圧縮を試したところ

  • 圧縮前→163KB
  • 圧縮後→38.98KB

となり、約77%の削減となりました。

圧縮後の画像

総括

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

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

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

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

ではでは!!