Chromeに表示されている画像のサイズ（容量）を確認する方法

たまたまGoogle Analyticsの普段は見ない項目を眺めてまして、「速度にたいする提案」的なのを見てんたんです。

ブログのデザインとかをいじった時は、タイトル画像が大きすぎないかとかそういう意味での確認はしてたんですが、記事ごとの確認とかしたことがなかったので、確認してみたところ。

検索上位のページがかなり読み込みが遅い事が判明。

んで原因なによ？って調べてみたところ

記事内で使ってる画像が３Mとかドでかいヤツがあるみたいでそれが悪さをしている模様。

どうやらInkscapeってソフトで画像を組み合わせたり貼り合わせたりする事があるのですが、そのソフトで書き出したモノが高画質設定だったのでバカでかいサイズになっていたらしい。

Chromeで確認しようと思ったら

IEとかFirefoxの場合は、ブラウザ上の画像を右クリックして「画像の情報」的なのを見てやれば、簡単に確認できるのえすが、Chromeの場合はデフォルトだとその手の機能がないので
画像ダウンロード→保存→右クリック→プロパティ
って感じで面倒な手順を踏んでたんですね。

これってなんかプラグインで一発で解決できないのかなぁ？って検索してみたところ、無事見つかりましたのでシェアしておきます♪

Image Size Info

Chromeに追加することで、右クリック→View Image Info で画像の解像度や容量が確認できるようになります。

⇓ダウンロードはこちらから⇓
>>Image Size Info – Chrome ウェブストア

実際の使用例

って事で、3MByte級の画像が2つもあると言われていたスマホの記事で確認してみると・・・。

うわ・・・でかっ！！！

まだまだ結構いろんなところにでかい画像が埋もれているようなので、一個一個潰していくという地獄のような作業が待っているようです（涙

まとめ

と、まぁそんな感じでちょっとしたお役立ちネタでございました。

ページの読み込み速度っていうのは、検索順位にとって結構重要なファクターらしいですし、みなさんも画像のサイズには気をつけてくださいねー♪

うちは・・・なんか面倒くさいし徐々に手をつけていきますわー（やらないフラグｗ

追記

画像の軽量化とリサイズを同時にやってくれるフリーソフトを発見したので置いておきます♪

⇓ダウンロードはこちらから⇓
Caesiumの詳細情報 : Vector ソフトを探す！