47714548 ec7f95c846

Photo by: m4tik

どうも。「HTMLを書くのは嫌いじゃないぜ。むしろ好き。」な、するぷ( @isloop )です。

今日はHTMLが好きな人には、たぶん役立つChrome拡張機能「Image Properties Context Menu」をご紹介します!

画像のピクセルサイズやファイルサイズが一発でわかる!

Thumbnail Chrome ウェブストア - Image Properties Context Menu
https://chrome.google.com/

Image Properties Context Menuはここからインストールできます。

Skitched 20120619 084426
使い方はちょーカンタンです。詳細が知りたい画像を右クリックして、「Image Properties」をクリックするだけ。

Skitched 20120619 084525
すると、画像の詳細がこんな風にわかってしまいます。

ファイルサイズから、画像の種類(jpegかgifなのかとか)、Altタグの中身、画像の大きさまで一目瞭然です。

Skitched 20120619 084707
ちなみに、右にあるつまみを左右に動かす事で画像の拡大ができます。(右に動かすと大きくなる。)

どういうときにつかう?

どういうときに使うのよ!

って声があがりそうですが、僕はファイルのサイズを特にみてますかねー。というのもSkitchが生み出すPNG画像ってベラボウに大きいんですよ。

ちょっとアクセスが大量にあったとき時に、これを使って記事内にデカイファイルサイズの画像がないか点検し、あったらPhotoshopで圧縮するようにしています。転送量はでかくなればなるほどサーバに負担をかけますからね。

あとはピクセルサイズをよくみることがありますね。現在、和洋風◎ではRetina display対応するべくすべてのパーツ画像を実際の二倍にしてるので、これでただしく設定されてるか確認しています。

いやー。普段はあまりガツガツつかう類いの拡張機能ではないんですけど、あるのとないのとではホント違うんですよ。

地味ですけどマジオススメな拡張機能ですので、HTMLを書く人が好きな人は、ぜひインストールしてみてください!