画像で速度改善！最適化によってページ表示速度を上げる為の４つの基礎知識

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ほどになります）
インライン化する事でサイズがおよそ３割ほど増加します。（画像は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で指定しない。

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

おわりに

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

井上

投稿 by モバイルファースト・マーケティングラボ.

クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。

資料請求