画像の最適化で見る人が心地良いページに
もくじ
こんにちは、井上です。今回は画像の最適化についてご説明します。
1.拡張子とは
2.ファイルサイズを抑えるには
3.リクエスト数を減らすには
4.レンダリングの負荷を減らすには
1.拡張子とは
※基礎の基礎なので、特に必要の無い方はこの節は飛ばしてご覧下さい。
拡張子とは・・・画像の種類の事です。これを知ることで、どのようなケースでどの種類の画像を使えば良いかが分かります。
例えばこちらのファイルだと、ファイル名は【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
↑の画像を実際に文字化したものの画像が↓になります。
(これで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で指定しない。
です。とても簡単ですね。
おわりに
画像を最適化して、より快適に閲覧してもらえる環境を整備しましょう。
井上