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

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

カスタマイズ
2015/08/17
2
vanillaice (Akira)
vanillaice (Akira)
Education初心者向け

一般的に「画像の大きさ」と言ったとき

  • 画像の縦横サイズ
  • 画像の容量

この二つを指しますよね (´・ω・`)
本記事は主に「容量」についてです。ひとつ大きな誤解として、「画像のサイズをCSSで縮小表示したら画像容量も小さくなる」
これは間違いです。

例えば、縦横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」

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

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

Related post

Comments  2

hige
2015/11/15 (Sun) 16:52

No title

 (FC2)ブログを始めた当時は画像の容量が気になってて、gif にしたりしてましたが、始めて5年経った結果全体容量の5%も使ってませんでした。
 100%になるのは100年後!
 最近カメラに凝ってまして、画像の大きい方が表現力が大きいと云うことに気づいてから、おっきな画像を貼るようになりました。(横長写真はW=1200px)
 記事本文の画像はどうもサムネールの方が表示は速そうです。
 投稿画像を縮小表示させると表示に時間が掛かるようです。
 それでも、どうもサムネール表示よりは元画像の縮小表示の方が画質がいいようで、結局そうしてます。
 画像の編集はXnView がファイラーも兼ねていてめっちゃ使い勝手がいいです。モザイクをかけたりとか、明暗レベルの調整とか、縮小とか・・・。

 テンプレート。いじってるとなかなか勉強になります。

Akira
2015/11/16 (Mon) 22:38

To higeさん

お返事大変遅くなりました (*_ _)

そうですね。サムネイルは高速表示に特化していると言っても良いと思います。
極東あたりの画像サイトなんかは未だに3MB, 4MB級のPNGを元画像のまま載せたりしていることが多いです。
めちゃくちゃ重たいっつーの(笑)
何事もバランスですかね。
画像にしろ人生にしろ((((笑)

コメントありがとうございますe-454

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)