ここから本文です

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

Web担当者Forum 9/27(火) 11:06配信

今日は、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に読み込ませ、散布図にしたところ、こんな感じでした。

1/2ページ

最終更新:9/27(火) 11:06

Web担当者Forum

なぜ今? 首相主導の働き方改革