inamenaiの日記

画像のサイズ指定違いを可視化するGreasemonkeyスクリプト

JavaScript, Greasemonkey

先日の JavaScriptで画像の本来の幅と高さを取得する - inamenaiの日記 を利用して、画像のサイズ指定違いを可視化するGreasemonkeyスクリプトを作ってみました。インストールすると、画像本来のサイズとHTML/CSS/JSで指定されているサイズとが異なる画像を探して、その画像のボーダーを赤く表示して目立たせます。

インストールはこちらから⇒インストールする

インストール後にこのページを再表示して、左下のMIAUのバナーに赤い枠線がついていればインストール成功です（笑）。

デフォルトでは適用対象を全サイト(*)としていますが、他人のサイトの画像サイズを調べてもさほど意味がないので、自分が開発・運営しているサイトに対して適用しておくと、設定ミスがあったときに気づきやすくなっていいんじゃないでしょうか。サムネイル表示などのように意図的にサイズを変えている場合も対象に含まれてしまいますが、これは判別できないので仕様ということで。

ちなみに、一昔前のwebでは1px*1pxの透過GIF画像を任意のサイズに拡大表示してレイアウトを整えるテクニックが流行りましたが、今でもこれを多用しているサイトをこのスクリプトで見るとかなりかっこ悪い感じになります。

それ以外にも、Amazonのカテゴリトップページの商品サムネイルには1pxだけサイズ指定が違うものが散見することや（縮小時の小数の扱いに問題がある？）、はてなのfaviconが縦長or横長になってる人が結構いることに気づいたり（気づかないほど小さいのでどうでもいいですが）とか、どうでもいい発見があったりなかったり。

Firefox3.0.3 + Greasemonkey0.8環境で動作確認。初めて書いてみたユーザスクリプトなので、何か問題とかアドバイスとかあればぜひ教えてください＞＜

Permalink | コメント(0) | トラックバック(0)