編集長ブログ―安田英久

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担当者には大切ですよね。

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

この記事が役に立ったらシェア!
tweet41はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

ファセットナビゲーション
ファセットナビゲーション(Faceted Navigation)とは、サイトのナ ... →用語集へ

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

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


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

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper株式会社ブレインパッド
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore