• このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

画像の最適化で見る人が心地良いページに

もくじ

こんにちは、井上です。今回は画像の最適化についてご説明します。

1.拡張子とは
2.ファイルサイズを抑えるには
3.リクエスト数を減らすには
4.レンダリングの負荷を減らすには

1.拡張子とは

※基礎の基礎なので、特に必要の無い方はこの節は飛ばしてご覧下さい。
拡張子とは・・・画像の種類の事です。これを知ることで、どのようなケースでどの種類の画像を使えば良いかが分かります。
test
例えばこちらのファイルだと、ファイル名は【test.png】になりますが、拡張子は.(ドット)の後ろにあるpngです。
webサイトに主に使われる拡張子には、以下のようなものがあり、それぞれに特性があります。

  • jpgもしくはjpeg(ジェーペグ)・・・写真やグラデーションのある画像など、色数が多い場合に使う。保存のたびにデータが損なわれる。
  • png(ピング)・・・PC画面キャプチャ、図表、線画など、色数が少ない画像の場合。または画像ファイルサイズを気にせず、画質重視の場合に使う。
  • gif(ジフ)・・・色数の少ない画像、動く画像に最適。

以上を踏まえた上で、以下の記事を見て行きましょう。

2.ファイルサイズを抑えるには

ファイルサイズが減ると、サイトの表示が早くなります。

ⅰ)非可逆圧縮

非可逆圧縮は、データを欠落・改変させて圧縮する方法です。
その方法の内の一つにツールを使用するというものがあります。
実際にTOP画像は圧縮されたものです。今回はこちらのサイトを使いました。
tinypng
85.1→23.3KBに。73%も圧縮されました。非可逆圧縮なので画質はある程度劣化しますが、目視で問題ない部分まで容量を削ると、大幅なサイズダウンが可能になります。
圧縮パンダ

TinyPNGの使い方についての詳しい記事はこちら
Lig.inc/簡単&綺麗に圧縮できる!「TinyPNG」でPNG画像を大幅ダイエット!

ⅱ)可逆圧縮

可逆圧縮は、データを損失させずに圧縮する方法です。画像の見た目は一切代わりません。
その方法のうちの一つに、メタデータを消すというものがあります。
メタデータとは、カメラ等で撮った画像に入っている、撮った時刻や機種などのデータです。
これを削除することでも、容量を削る事が可能です。
JPEG & PNG Stripperというフリーソフトで行えます。


元々の容量は322KBでしたが、PNG Stripperでメタデータを省く事で17KB削りました。
いくら削り
このような方法でも容量を減らす事が可能です。

JPEG & PNG Stripperの使い方についての詳しい記事はこちら
9ineBB/JEPG PNG からメタ情報を削除し画像サイズを小さくしてくれるフリーソフト JPEG & PNG Stripper

3.リクエスト数を減らすには

リクエスト数とは・・・サーバ上に設置された全てのファイルに対し、閲覧者がアクセス(ダウンロード)した数です。
リクエスト数が減ると、表示が早くなります。

ⅰ)インラインイメージを使う

インラインイメージとは、画像が文字列になってHTMLやCSSに組み込まれたものです。
duri.me等のツールを使うとインライン化が可能です。
duri.me
inline
↑の画像を実際に文字化したものの画像が↓になります。
こわい
(これで1/3ほどになります)
インライン化する事でサイズがおよそ3割ほど増加します。(画像は19.9kb、文字は26kbです)
但し、サイズの大小に関わらず増加率はほぼ一律なので、この手法は小さなサイズのファイルに使うことで、サイズ増加を抑え、リクエスト数を減らす事ができます。

ⅱ)CSS Spriteを使う

CSS Spriteとは、複数の画像を1つの画像にまとめることでHTTPリクエスト数を減らし、ページの読み込み速度を速くするCSSテクニックの1つです。
例えば矢印アイコンやカート画像などで、それぞれ個別の画像に分けるのではなく、まとめて1つの大きな画像として作成します。
画像をアップロードした後、CSSの「background-image」で背景画像にする画像を設定し、「background-position」によりその画像の中で表示させる画像の位置を設定していきます。

例えばこの画像。

実はこれ、youtubeのものなんです。
あのページにあるあれこれ細かいアイコンについては、元を辿れば1枚の画像なのです。

CSSspriteに関しての詳しい記事はこちら。
Lopan.jp/CSSスプライトについてあれこれ。

4.レンダリングの負荷を減らすには

レンダリングとは、HTML等の記述を読み込んで、文字列をページに変換する作業です。
画像で工夫できる点は2つ。

  • ページに使用している全ての画像のwidthとheightを正しく指定する。
  • 実際の画像と同じサイズを指定する。
    例)100×100の画像を40×40で指定しない。

です。とても簡単ですね。

おわりに

画像を最適化して、より快適に閲覧してもらえる環境を整備しましょう。

井上