5,インラインイメージのメリット・デメリットと注意点 5.1,メリット インラインイメージを使うことで画像自体のHTTPリクエストが発生しません。 例えばファイルサイズの小さな10個の画像を読み込んでいるとします。それらすべてをインラインイメージ化することで10回のHTTPリクエストを削減できます。 データサイズが37%増加するというデメリットはありますが変換前のデータが数MBでもない限りHTTPリクエストが減らせることの方が有益です。 5.2,デメリット IEの古いバージョンでは使えない Base64エンコードによりデータサイズが約37%増加する HTMLやCSSに直接埋め込むため画像を変える度に差し替えが必要(ツールで改善可能) data URI schemeで埋め込まれたデータはキャッシュされない 同じデータを複数箇所に表示したい場合、それぞれの場所に埋め込む必要があるためインライン
![身につけておきたいWebサイト高速化テクニック #5|リクエスト数削減テクニック01:インラインイメージ編 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/f004e6c87e8f6ab743d2cc7b2fd9203216cd37e0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F01%2Fspeed.png)