画像の容量気にしてますか？

例えば、縦横1000px正方形の画像をCSSで300px四方でを指定し 縮尺掲載 したとします。

<img src="画像アドレス" width="1000" height="1000" style="width: 300px; height: auto;" alt="代替テキスト">

このパターンはオリジナル画像(原寸画像)がそのまま存在しており、htmlやCSSを利用して「縮尺」して「表示」する方法です。これでは画像の容量を削減することはできません。オリジナル画像の容量と全く同じ負荷です。オリジナルの画像を一旦読み込んだ後に表示上のリサイズをしているだけですので、小さく掲載する = ページへの負荷が減る という方程式は成り立ちません。ということは、1000px四方、画像容量1MBの画像を縮尺で300px四方掲載しても容量は1MBのままである。 ということです。
ここを誤解されている方が結構いらっしゃるのではないでしょうか。

容量を減らすためにはオリジナル画像に直接なんらかの修正を加えます。いわゆる「画像の編集」です。

なにが言いたいかというとですね、iPhoneやAndroidで写真を撮りますよね。スマホの写真サイズ(縦横寸)いうのはとんでもなく大きいんです。2000pxとか3000pxとかそんな感じ。ちょっと前までは最も流通しているパソコンの画面サイズは1024px と言われていました。現在では 1300ちょいぐらいかなぁ、と思います。それを踏まえ、ブログテンプレートの全体幅としては900～1300あたりが多いかと思います。900程度の記事幅の中に2000pxもある写真の全体像をそのまま見せるというのは物理的に不可能(横スクロールを除く)

縮尺表示ってサイズ記述するだけなので楽なんですよね。でもそれだとページ表示の負荷というのがあまりにも大きい。例えば、テンプレートの仕様が「全文表示」さらに1ページあたりの「表示件数10記事」だとします。写真がメインのブログで撮った写真には特に手を加えずそのままアップロード。1記事あたりの写真掲載数が 5点。写真1枚あたりの容量が800KB(このあたりが平均です)
すると単純に、
5×800=4000KB (4MB)
4MB×10記事=40MB

1ページあたり40MBですよ。40メガバイト！！！(笑)
これ比較的画像表示に強いChromeでもスクロール中にクラッシュするレベルです。IEだとクラッシュする前にホワイトフリーズかな、というところ。せっかく綺麗な写真を載せていらっしゃるのに　クラッシュしてしまったら元も子もない (´・ω・｀)

というわけで、画像はしかるべき処理をして容量は極力減らしましょう。大きけりゃ良いってもんでもない。 写真というのは全体像を目で捉えることができて初めて「ああ、綺麗だな」という認識ができます。それが人間の「感覚」です。大きい = 綺麗 ではないんです (´・ω・｀)

最適サイズはどうでしょうね。最近のパソコンは大画面化していますので、横1000px～1200px というところじゃないでしょうか。逆に小さすぎても辛いですよね。大画面スライドを利用したテンプレートなども最近では多いです。ということで、おすすめは横1000pxあたり(モバイルファーストを考えるとまたちょっと違います)
縦横のサイズを画像編集で小さくしただけでも容量は減らせますが、さらに専用ソフトなどで「容量削減」を行うと良いですね。私は平均サイズ横1000px 画像容量は最大でも100KB(平均だと 60KB程度) まで減らしています。1000pxを基準にしているのは大きめのスライダー付きテンプレを作成する可能性を考慮してです。極論を言うとスライダー等で抽出できる画像というのは記事の一番最初の画像だけですので、それ以外は小さいサイズでも良いと思うー (´・ω・｀)

写真の拡張子は主にjpgですが、この拡張子の画像というのは 拡大しても縮小しても解像度が落ちます。縮小でも解像度は落ちるんです。ですから専用ソフトを利用するのが望ましい。なので以下のソフトあるいはwebサービスを探します。

1. 拡大専用
2. 縮小専用
3. 縦横サイズを変更せずに容量だけを削減

大きくこの3つです。3についてのおすすめ(ソフトでなくオンラインツールです)は以下のリンク先で。

画像を圧縮して軽くするおすすめサイト「Tiny PNG」

最近の写真ってとっても高解像度ですよね。 iPhoneなどのスマホで写真撮る ↓ ガンガン撮る ↓ ブログにUP～♪ ↓ クッソ重たい！なんやしこれ！ ← イマココ スマホの写真というのはサイズ(縦横の大きさのこと)自体が大きいんです (´・ω・｀) ガラケー全盛期の写真と比べるとパソコンに送ってビックリするぐらい。そしてどこも(DoCoMoじゃないよ) こぞって『高解像度』祭り。そら重たいわーそらそうやわー。 と...

vanillaice000.blog.fc2.com