UAP14475 のブログⅢ

Yahoo!ブログから引っ越してきました。パソコンとトイガンが大好物です。  暇になると艦これを始めてしまいます。とにかく秘書艦は阿武隈ちゃんで。

ページがデカすぎる

JPEGも積もれば激重となる


最近のカメラレンズの購入頻度は想定を上回っています。
新たに買ったレンズはテキスト情報と共に 「 カメラ関連 」 に追加されることになっていますが、
あまりに大量のレンズを買い込んだため、この一覧がかなーり重くなっていることが分かりました。

Webページの重さは以下の方法で測ることができるそうです ( Firefoxユーザー向け )
  ・ 『 webページの容量を調べる方法 | 67th Star



で、実際に測った結果が・・・



ほぼ28MB。動画ファイルかな?(すっとぼけ)
このままではスマホユーザー用地雷と化してしまうのでなんとかしなくてはいけません。
というか読み込みが長すぎてPCユーザーにも怖がられそうですね・・・。

そして、あまりに重いページはGoogle検索に載せてもらえないという問題もあるそうです。
  ・ 『 容量「10MB以上」のWebページを、Googleはクロールしない/Google明かす

私はアフィリエイトはやってないので、アクセス数が増えようが減ろうが関係ないと言えば関係ないものの、
せっかくなら検索結果に載せてもらいたいというのも本音ですから、なるべく「10MB以下」としたいと思います。
あのページの重さの原因は100%、画像ファイルの重さと多さであるため、画像の掲載方法を考え直す必要があります。

はてなブログTwitterなどと同じく、画像ファイルにサムネイルはなく「オリジナルの縮小表示+クリックで拡大」
という仕組みをとっているため、少なくとも標準の機能を使う限りではサムネイルを別に作ることはできません。*1
そのため、画像を軽量化するにはオリジナルの画像に手を加えるほかありません。



で、いくつか方法を考えました。

① ページを分割する
② 掲載画像の解像度を下げる
③ 掲載画像のJPEG品質を下げる
④ 掲載画像の枚数を減らす

実は初めは①でやってみようと思って、実際に試作までしてみたんですが・・・
「一覧」が「分割」されてしまうと非常に使い勝手が悪く、使い物にならないと感じたため中止しました。

②は飾り板の写真などについては可能と思いますが、レンズ全体の写真を小さくすると見栄えしない、
③はすべての掲載画像に対して行っても1/2くらいまでの圧縮が限界、
④はあんまりやるとスカスカになっちゃう、
ということで②③④を合わせて実施することにしました。

現在、あのページに掲載している画像ファイルは、一律1500x1000px、JPEG品質95、となっています。
これを、レンズ全体1500x1000px、それ以外600x400px、JPEG品質80、にまで引き下げようと思います。
JPEG品質80でもリンギングノイズはまだ小さく、それでいてファイルサイズは1/2程度にできます。
飾り板の写真は解像度も引き下げるため、ファイルサイズは1/9程度にまで小さくなります。


モデルケースとして、Tokina・100-300mmで試してみました。

従来
460KB

456KB
新基準
178KB

51KB


従来の画像2枚組では916KBでしたが、新基準では229KBまで軽量化できています。
ちょうど75%削減になるようなので、まあまず間違いなくページ全体で10MB未満まで軽くできるでしょう。
なお、この変更は一覧ページのみの適用で、それ以外の記事に掲載する画像は変更なしです。
JPEG品質80ってやっぱり細かく見ると粗いからね・・・

ちなみにクロマサンプリングはYUV444で変更ありません。( スチルカメラではYUV422が一般的 )
YUV444とYUV422では10%程度しかファイルサイズが変わらないため、こだわりを堅持することにしました。
技術的には縮小リサイズしたYUV422の写真はYUV444で保存した方がキレイなはずです。
まあほとんど違いは判りませんが・・・。




*1:サムネイルをimgタグで掲載し、aタグでオリジナルにリンクさせる、といった方法もある・・・けどめんどくさいし、画像をクリックするたびにページを行ったり来たりすることになるので、それはそれであまりユーザビリティ的によろしくない。