たまには技術的な話をしようか~ mod_pagespeed の話

今、ウェブサイト制作のお客様第1号のサイトを鋭意制作中です。日夜残業して作業した結果だいたい形にはなって来たのですが、今日、突然テストサイトで画像が縦長に(縦だけおよそ3倍ほど?)なるという怪現象が発生しました。キャッシュをクリアしても治りません。コーディングを見直したり、差し戻したりしても治りません。ウソだろ、もう完成間近だったのに…

背中にいやな汗が流れますが、ここは慌てず騒がず、Google先生に尋ねることにします。なかなか苦労したのですが、ついに原因がわかりました。「エックスサーバーで Google が作った高速化プラグインの mod_pagespeed をONにしている場合、画像の大きさが乱れることがある」…なんだよ!Google先生のせいかよ!

Google謹製の mod_pagespeed の中で画像の width をごにょごにょしてるらしいんですが、height は放って置かれるためにこの現象が発生するとのこと。具体的にいうと私の場合は、大きな画像をやや縮小して表示していたのですが、mod_pagespeed が勝手に max-width:100% で上書きして横幅を決め打ちするのに対して、縦幅はもとの大きさのままになるために、「横だけ縮小されたのに、縦は縮小されずに(つまりは縦長に)表示される」という現象になったわけです。

せっかくごにょごにょするんだったら自動的にアスペクト比(縦横比)を保存してくれればいいのにね。というわけで、対策としては、IMG タグの height 属性に auto を指定します。

おそらくこれで大丈夫?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です