初代編集長ブログ―安田英久

Webページの画像が重過ぎないか、いい感じにチェックする仕組みを作ってみた

既存の画像をもとに、画像の面積(総ピクセル数)から「いい感じ」のファイルサイズを求める式をつくりました
よろしければこちらもご覧ください
Web担のなかの人

今日は、Webサイト運用を改善する仕組みの話を。Webコンテンツで使っている画像が減色して適切なサイズになっているか、ファイルサイズが大きくて表示時に重くないか、画像ごとにいい感じにチェックする仕組みを作り、Web担のCMSにいれてみました。

Webコンテンツの画像、重くなっちゃってませんか?

コンテンツマーケティングだ、ブログだ、サイト更新だと、Webコンテンツをどんどん更新するのもWeb担当者の仕事。

そして、イマドキのWebコンテンツにはビジュアル要素が大切。なので、写真や画像をうまく使うようにがんばりますよね。

でも、その画像、ちゃんといい感じに減色したり不要なメタデータを削除したりして、ファイルサイズを可能な限り小さくできていますか?

たまにあるんですよね。「弊社が先日出展した展示会のレポートです」っていうブログコンテンツに使われている画像が、デジカメで撮影した数Mバイトの画像そのままっていう……。

最近だとレスポンシブデザインで作られてて、大きな画像を貼り込んでも見た目は問題ないんですよね。しかも、自社ネットワークからだし、1回表示したらブラウザがローカルにキャッシュされるので重く感じないという。

そうでなくても、理想的なファイルサイズから1画像あたり150Kバイトぐらいずつ重いだけでも、画像が6つあれば1Mバイト弱の不要なトラフィックが生まれます。

そして、モバイルで見ている人が「なんか重いな、このサイト」ってなる。

つまり、エクスペリエンス悪化ですね。

Webページの公開前チェックに、画像ファイルサイズチェックを入れてみた

こういうことを防ぐために、Web担では、記事公開前チェックの仕組みに「画像ファイルが重すぎないか」を入れてみました。

でも、実際には画像もいろんなものがあります。JPEGとPNGの違いもありますし、300ピクセル×150ピクセルと800ピクセル×600ピクセルでは理想のファイルサイズが違います。

そこで、過去に使った画像ファイルを総ざらえして、画像の幅と高さとファイルサイズを調べ、そこから「いい感じ」を見つけてみました。

このチェックは、プログラムでやると意外と簡単です。画像置き場にあるファイルを全部なめて、次の情報をぜんぶ出力するだけですから(プログラマに頼めば30分ぐらいで作ってくれるはず)。

  • ファイル名から画像フォーマットを判断(今回はPNGとJPEGだけを対象)
  • ファイルサイズはファイルシステムの情報から取得
  • 画像の幅と高さはオープンソースのグラフィックスライブラリ「GD」などの機能を使って取得

こうして取得したデータをExcelに読み込ませ、散布図にしたところ、こんな感じでした。

こちらがJPEG画像(1万4483ファイル)のデータです。

JPEGの画像サイズとファイルサイズ(Y軸がファイルサイズ、X軸が幅と高さから求めた画像の面積)

こちらがPNG画像(2万1079ファイル)のデータです。

PNGの画像サイズとファイルサイズ(Y軸がファイルサイズ、X軸が幅と高さから求めた画像の面積)

この状態で近似曲線などを試してみたのですが、どうもうまくいきません。モノによっては画質優先だったり手抜きだったりでファイルサイズが大きいものも含まれているからですね。

そこで、大きすぎる画像や小さすぎる画像をフィルタしてみました。

具体的には、画像のピクセル数をもとに適当に階級を分けて、各階級内で極端値を除いてみました。

その結果が、こちら。

JPEGのほうは、こんな感じになりました。

JPEGの画像サイズとファイルサイズ(大きすぎる画像と小さすぎる画像をフィルタ済み)

PNGのほうは、こんな感じ。

PNGの画像サイズとファイルサイズ(大きすぎる画像と小さすぎる画像をフィルタ済み)

階級分けがかなりラフだったので、PNGのほうの散布図がガタガタになっているのはご容赦ください。正確なデータを知りたかったのではなく、「いい感じの基準」を知りたかっただけなので。

このデータだと、まぁ線形の近似線が悪くない感じで出てきました。それが次の数式です。これが、「画像のピクセル数から、いい感じのファイルサイズを求める式」です。

  • PNG: 画像ピクセル数 × 0.0849 + 3088.7(バイト)

  • JPEG: 画像ピクセル数 × 0.1783 + 5526.7(バイト)

実際には画像サイズが小さいときにちょっとブレがあるのですが、そこは気にせずにおきましょう。

この数式がわかれば、あとは簡単です。

Webコンテンツの公開前チェックで、

  1. 記事で使っている画像それぞれについて
  2. 画像の幅と高さから面積(画像ピクセル数)を求め
  3. その面積を前述の数式にあてはめて「いい感じのファイルサイズ」を求め
  4. 実際のファイルサイズがそれと比べて大きすぎないかチェックする

という流れです。

Web担では、グラフの感じをみて、数式で求めた「いい感じのファイルサイズ」の2倍ぐらいまでは許容範囲として、実際の画像ファイルサイズがそれを超えていたら警告が出るようにしました。

ざっくり作ったので完ぺきだとは言いませんが、何かのミスでやたらと大きい画像ファイルを使ってしまっている場合に見つけられるようになりました。

Web担では、こういう仕組みをCMSに組み込んで動かしているのです。

「で、それはどこで使えるんだ」と聞かれそうなので答えておきますが、Web担が内部的に使っているものなので、公開はしていません。簡単なので、ぜひ作ってみてください。

質の高いコンテンツだけでなく、ページ表示もできるだけ遅くしないようにするには、いろんな細かいチェックが必要です。

それを人間ががんばるのではなく、うまいこと自動化していくのが、忙しいWeb担当者には大切ですよね。

あなたのところでは、どんな「これ便利!」を導入していますか?

この記事が役に立ったらシェア!
よろしければこちらもご覧ください
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

今日の用語

ビジネスエスノグラフィ
ユーザー中心設計/人間中心設計における、ユーザー調査の方法論の1つ。 ユー ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

data-sprite-position-y="250" data-image-original-width="200" data-image-original-height="125">株式会社ブレインパッド株式会社サイバーエージェント株式会社フレームワークスソフトウェア
[SPONSOR]
株式会社キノトロープ株式会社アイレップユーザーグラム富士通株式会社Sitecore株式会社ミツエーリンクス