身につけておきたいWebサイト高速化テクニック #5｜リクエスト数削減テクニック01：インラインイメージ編 | DevelopersIO
5，インラインイメージのメリット・デメリットと注意点 5.1，メリット インラインイメージを使うことで画像自体のHTTPリクエストが発生しません。 例えばファイルサイズの小さな10個の画像を読み込んでいるとします。それらすべてをインラインイメージ化することで10回のHTTPリクエストを削減できます。 データサイズが37％増加するというデメリットはありますが変換前のデータが数MBでもない限りHTTPリクエストが減らせることの方が有益です。 5.2，デメリット IEの古いバージョンでは使えない Base64エンコードによりデータサイズが約37％増加する HTMLやCSSに直接埋め込むため画像を変える度に差し替えが必要（ツールで改善可能） data URI schemeで埋め込まれたデータはキャッシュされない 同じデータを複数箇所に表示したい場合、それぞれの場所に埋め込む必要があるためインライン
画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例:phpspot開発日誌
Base64 Encoding for Images. 画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例。 Googleがインスタントプレビューや画像検索で導入してその読み込み速度に驚いた方も多いかもしれません。 その手法をPHPで実現するコードが掲載されていましたのでご紹介。 PHPでやるにはそんなに難しいわけではなさそう。 <?php $img_src = "image/sample.png"; // 画像ファイルの指定 $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); // バイナリデータを読み込み $img_str = base64_encode($imgbinary); // base64エンコード echo '<img src="data:image/png;base6
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
