今、ウェブサイト制作のお客様第1号のサイトを鋭意制作中です。日夜残業して作業した結果だいたい形にはなって来たのですが、今日、突然テストサイトで画像が縦長に（縦だけおよそ3倍ほど？）なるという怪現象が発生しました。キャッシュをクリアしても治りません。コーディングを見直したり、差し戻したりしても治りません。ウソだろ、もう完成間近だったのに…
背中にいやな汗が流れますが、ここは慌てず騒がず、Google先生に尋ねることにします。なかなか苦労したのですが、ついに原因がわかりました。「エックスサーバーで Google が作った高速化プラグインの mod_pagespeed をONにしている場合、画像の大きさが乱れることがある」…なんだよ！Google先生のせいかよ！
Google謹製の mod_pagespeed の中で画像の width をごにょごにょしてるらしいんですが、height は放って置かれるためにこの現象が発生するとのこと。具体的にいうと私の場合は、大きな画像をやや縮小して表示していたのですが、mod_pagespeed が勝手に max-width:100% で上書きして横幅を決め打ちするのに対して、縦幅はもとの大きさのままになるために、「横だけ縮小されたのに、縦は縮小されずに（つまりは縦長に）表示される」という現象になったわけです。
せっかくごにょごにょするんだったら自動的にアスペクト比（縦横比）を保存してくれればいいのにね。というわけで、対策としては、IMG タグの height 属性に auto を指定します。
おそらくこれで大丈夫？