Web用画像のファイルサイズを抑えるメリットと使えるツール【検証データ付き】

Publish2012/09/15(土)

Update2015/04/10(金)

Web用画像のファイルサイズを抑えるメリットと使えるツール【検証データ付き】

今日はWebで使う画像のファイルサイズについて説明します。
Webサイトを作る時に欠かせないのが画像ファイルです。
今はCSS等で画像の代替手段ができたりしてきてはいますが、写真等やはり画像ファイルでないと厳しいですし、サイトに彩りを添えたり高級感を演出したりするのにはやはり画像といいう選択肢になるでしょう。
ただし、画像は何も考えずに使用してしまうとサイトの表示速度に影響を与える事になりますので、出来る限りファイルサイズを縮小して適切な形で運用したほうがいい思います。
画像のファイルサイズを押さえるメリットとその為にお手軽に使用できるツールを紹介します。

ファイルサイズを抑えるメリット

画像を使う上で注意しないといけない事、それが画像のファイルサイズです。
なぜファイルサイズを注意しないといけないかというと、画像のファイルサイズは通常のHTML等のテキストベースのデータに比べて大きくなりがちです。
その為、大きなファイルサイズの画像を表示しようとすると、通信環境の悪い場所などではコンテンツが表示できないという場合もあります。
最近はサイトの閲覧環境も、以前のようにPCがメインというわけではなくてスマートフォンがよく使われるようになってきました。
また、WiFiを使って外出先でノートパソコンで閲覧する等、通信環境が必ずしも安定しているという前提も崩れています。
そういう事を考えると、閲覧するお客さんに少しでも快適にコンテンツを見てもらう為には、「ファイルサイズを小さくしてスムーズに閲覧できるように配慮する」という事も必要だと思います。
また、Googleもサイトの表示速度を高速化することが検索順位を決定する上で有利になるポイントの一つであるという事もいわれており、ますますファイルサイズを抑える事のメリットが向上しているといってもよいでしょう。
ファイルサイズを縮小する事はメリットはあってもデメリットはないと言ってもいいくらいです。
ファイルサイズの縮小時には画質も劣化が起こりますが、これから紹介するツールでは圧縮前と遜色ない形で劣化を処理してくれるので、画質が下がっている事を認識する事が難しいくらいになっていますのであまり気にならないレベルです。

ファイルサイズの圧縮に役立つツール

基本的な部分になりますが、Web上で使用する画像はGIF,JPG,PNGの3種類です。
GIFは元々ファイルサイズを小さくする事を目的にして作られた仕様になりますので、たいていのソフトですでに調整がされており、ファイルサイズを縮小するする事は出来ますが手間の割にあまり変わらないという事の方が多いので、あまり気にする必要はありません。
気にした方がいいのはJPG,PNGで、この2つは画像データが比較的大きくなる傾向が高い形式です。
この2つのファイル形式を効果的にファイルサイズを抑える事が、サイトの表示パフォーマンスの向上に大きく役立つと思います。

今回検証するツール

今回紹介するツールを3つ紹介します。
まずはjpgファイルを専門に圧縮するオンラインツールの「JPEGmini
JPEGmini

サイトを見てもらえればわかりますが、だいたい半分くらいのサイズにはなります。
画像が大きければ大きいほど効果を発揮する感じになります。
使い方は簡単で、左下の「UPLOAD PHOTO」ボタンを押して対象ファイルをアップロードするだけです。
オンライン版だけではなく、デスクトップ版もありますので作業効率を考える場合だと、デスクトップ版という選択肢もありかと思います。

オンラインでpngファイルを圧縮できる「tinypng
tinypng

JPEGminiと同じようにオンラインでpngファイルを圧縮できるサービスです。
JPEGminiと違って、jpgも圧縮できるので便利ですね。
WordPressのプラグインもあってそれはそれで便利っぽい感じです。

デスクトップ版で使うのであれば「ImageOptim
ImageOptim

こちらのソフトはMacで動作するものになるのですが、対象ファイルをどかっとドラッグするだけで自動的にファイルサイズを縮小してくれるのでとても便利です。
作業効率を重視する場合はImageOptimで対応するといいかと思います。

実際にファイルサイズを変更して検証してみましたので、以下よりご確認ください。

JPGのファイルサイズ圧縮にはJPEGminiかTinypng

今回の検証用に用意した画像がこちらです。

sample.jpg
調整を一切入れずに作って578KBです。
これをそれぞれのツールにかけます。
まずはJPEGmini
JPEGminiで圧縮
JPEGminiで圧縮すると、何と驚きの164KB。
めちゃくちゃ軽くなってますね。すごい。

続いてTinypng
Tinypngでjpg
JPEGminiとほぼ同じの164KB。

最後にImageOptim
ImageoptimでJpg
500KBを切っての422KB

どのツールも確実にデータを軽くしてくれますが、今回の検証ではJPEGminiとTinypngがほぼ同じサイズになりました。

PNGのファイルサイズ圧縮にはTinypng

今回の検証用に用意した画像がこちらです。

sample.png
調整を一切入れずに作って2MBです。
jpgの写真を何も考えずにpngにしているので大変重いですね。
ではこのファイルをツールにかけます。

まずはTinypng
Tinypngでpng
一気に削って250KB。
なんだかよく分からないくらいのレベルで軽くなっています。

次はImageOptim
Imageoptimでpng
こちらもかなり減って741KB。
決して悪い数字ではないですが、Tinypngに比べるとどうしても見劣りする結果となってしまいました。

この結果からも分かるように、これらのツールを使えばサイトに使用する画像のファイルサイズをかなり抑える事ができます。
間違いなくサイトの高速化に役立つサービスです。
まずは試しに使ってみる事をオススメします。

追記。
優しい人が教えてくれた情報。
TinyPNGは、PNG8形式にしているので画質が落ちます。
(上記でのサイズの違いはここが影響している感じです。)
また、
で、ImageOptimは不要なメタ情報のみを削除するので、そこまでファイルサイズの削減はできない。
という事らしいです。
その辺を考慮すると、やはり状況に合わせてツールを使い分ける必要がありますね。
ファイルサイズだけの事を考えるよりも、上記の特徴を考慮してその時に適したツールで対応した方がいいかと思います。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を平日毎日更新中。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month