1. ホーム > 
  2. Webサイト制作 > 
  3. サイト制作のヒント > 
  4. 画像圧縮サービス(無料)でどれだけ画像が軽くなるか試してみた!

画像圧縮サービス(無料)でどれだけ画像が軽くなるか試してみた!

画像を圧縮してファイルサイズを軽くするサービスを使って、サイズと画質のバランスを試してみました。画像のファイルサイズ圧縮はWebページの表示速度の高速化にも効果的ですので、積極的に活用しましょう。

  • 2015/10/5
  • 2015/10/5

Webページの表示速度は2012年に検索アルゴリズムに組み込まれました。
ページを表示する速度が速ければ、わずかな効果ですが検索順位の上昇に役立ちます。

表示速度の高速化をする時の課題を見つけるには、GoogleのPageSpeed Insights(ページスピードインサイト)がとても便利です。

表示速度高速化の課題を調べたいURLをテキストボックスに入力するだけで、どんなことをすればいいかが表示されます。

PageSpeed Insightsで推奨される対応には、Webサイトを動かすサーバー側で設定する必要がある項目も含まれますが、ページの制作時の工夫によってもページの表示速度を速くする事ができます。

そこで、ブログ記事の更新時も含めてページを制作するときに、少しでも表示速度を向上させる事ができる工夫をご紹介します。

ページの表示速度を向上させる工夫

ページ制作時にできる工夫には以下の様なものがあり、「劇的に」とまではいかないまでも、ページの表示速度を高速化することができます。

  • できるだけページのHTMLやCSSを軽くする
    不要なタグやコメントアウトして非表示になっているコンテンツがないかどうかチェックしましょう。
    ただ、後々の修正に必要なコメントまで削除してしまうと、HTMLやCSSのメンテナンス性が悪くなってしまいますので、あまり神経質に削除しない方がいいでしょう。
  • ページに利用する画像を圧縮して軽くする
    デジカメやスマホで撮影した写真などはそのまま使用せず、PhotoShopなどの画像加工ソフトを使ってファイルサイズを圧縮しましょう。

特に影響が大きいと思われる方法が画像ファイルの圧縮です。
高解像度の写真をそのまま利用すると数メガバイトものサイズになってしまいますが、圧縮する事によって、その数%もの数百キロバイト程度にまで軽くすることができます。

PhotoShopなどの画像加工ソフトを使って、Webに最適なサイズに縮小すればある程度は小さなファイルサイズまで画像を圧縮する事ができますが、そこからさらに画像を圧縮してファイルサイズを縮小してくれるオンラインサービスがあります。

そこで、実際にどの程度のファイルサイズの圧縮ができるのか、圧縮したあとの画像の見栄えはどんなものなのか、様々な圧縮率で試してみました。

画像圧縮サービスを使ってみた結果

今回使用するファイルは下の写真です。神社の建物内部で撮影させてもらった写真です。

圧縮をする前の画像

元画像は3.48MBもありますので、とてもそのままWebサイト用の画像としては使用できません。そこで、PhotoShopでサイズを600ピクセルx300ピクセルに変更して最適化して保存してあります。ファイルサイズはこの時点で102.2KBです。

今回利用するサービスは、Firefoxでお馴染みのモジラが開発したmozjpeg encoderを利用します。1枚ずつしか圧縮ができませんが、画面左側の枠内に写真をドラッグするだけで指定した圧縮率で画像の圧縮をしてくれるというシンプルなインターフェイスが気に入って、日常的に活用しているサービスです。

圧縮率10%

ファイルサイズ:7.29KB
圧縮率10%で圧縮した画像

ファイルサイズはかなり小さくなりますが画像もかなり荒れています。写真に写っている構造物がつぶれてしまっています。

圧縮率20%

ファイルサイズ:12.2KB
圧縮率20%で圧縮した画像
圧縮率10%の写真よりも若干構造物の輪郭がはっきりしていますが、まだ画像は荒れている感じです。

圧縮率30%

ファイルサイズ:16.2KB
圧縮率30%で圧縮した画像
構造物の輪郭は問題ありませんが、障子のあたりに見えているブロックノイズが気になります。

圧縮率40%

ファイルサイズ:19.7KB
圧縮率40%で圧縮した画像
圧縮率30%の画像と違いが分かりにくいのですが、全体的にブロックノイズの発生が緩やかになっています。

圧縮率50%

ファイルサイズ:22.9KB
圧縮率50%で圧縮した画像
かなりきれいな画像になっています。障子のあたりにブロックノイズが見えますが、気にならない人もいるかもしれないというレベルです。

圧縮率60%

ファイルサイズ:26.5KB
圧縮率60%で圧縮した画像
かなり実用的な画像になっていますので、サムネイル画像やページ中に大量の画像を設置する必要がある場合には、この程度でも十分だと思います。

圧縮率70%

ファイルサイズ:31.5KB
圧縮率70%で圧縮した画像
手前から2つ目の障子のあたりに見えるわずかなブロックノイズが気になりますが、十分にきれいな画像です。

圧縮率80%

ファイルサイズ:40.4KB
圧縮率80%で圧縮した画像
障子のあたりに見えているブロックノイズがかなり無くなっています。

圧縮率90%

ファイルサイズ:58.4KB
圧縮率90%で圧縮した画像
ほぼ元画像に近い画像になっていますが、ファイルサイズは約半分のサイズまで圧縮されています。
ファイルサイズと画像のクオリティバランスが良い画像になっています。

他にも写真などの画像ファイルを再圧縮してくれるサービスはたくさんあります。
今回利用したmozjpeg encoderはjpgファイル、BMP、targaのみの対応、1枚ずつしか圧縮できないサービスですが、一度に複数枚の画像を処理できるサービスやPNG形式にも対応したサービスなど、他にもいろいろなサービスがあります。
用途によって使い分けるといいのではないでしょうか。

参考:JPGの圧縮率をオンラインで調整できるウェブサービス5選 – CNET Japan

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします