• WEB

インラインイメージBase64でサイト速度高速化!画像最適化テクニック!!

  • つっつ
    つっつ デザインちーむ
  • このエントリーをはてなブックマークに追加
インラインイメージBase64でサイト速度高速化!画像最適化テクニック!!

つっつです。

古今のWEBサイトには絶対必須な画像軽量化テクニックについて、全3回に分割で語りたいと思います。

何故、今も昔も画像軽量化が必要かというと、、、

昔の場合

そもそも通信速度(昔のモデム回線でのインターレースとか覚えてます?)+サーバーの処理スペックが低く遅くて遅くってどうしようもなくてやむなく転送容量を少なくする為に必要だった。

今の場合

通信速度が速くなった分いろいろな事が出来る様になり、デザイン的に凝ったり(重い画像を平気で使う無駄にカッコいいJS)、遅いと有名なWordPressを無駄に使ったりと、どんどん重くなってきたので圧縮する必要が出てきた。

通信速度の変化の説明画像

そんな風に感じてます。

ではでは早速ですが2015年現在使用できるだろう、各種画像圧縮技術について説明して行きたいと思います。

※IE9以下はごめんなさい
※これらの技術は実際に弊社で作成したサイトでも余すことなく使ってます。

インラインイメージで画像をファイルに埋め込む

インラインイメージとは画像などのバイナリファイルをBase64というテキストデータに変換してデータをHTMLのIMGタグなどに埋め込む技術です。

HTTPリクエスト(サイトを表示するとき必要なファイル)を減らすことでサイト表示速度を早くしようという考え方です。
データが数MBでもない限りHTTPリクエストを減らす方が有利です。
逆にデータが数MBだとhtmlファイル自体のダウンロードに時間が掛かり不利になってしまう可能性があります。

やり方は、、、

こちらのサイト(よく使う)で変換したソースをIMGタグのsrc属性に埋め込むだけです。

普段だと


<img src="1.png">

base64の場合は


<img src="data:image/png;base64,iVBORwiVBORwiVBORwiVBORw">

謎の長い文字がsrcに入る感じです。

実践編!!

※測定値ですがサーバーの状態などにも左右されるので今回のものが絶対ではありません

サンプルコードです。ついでに計測に使ったサイトです。

インライ化前


<img src="img/1.png">
<img src="img/2.png">
<img src="img/3.png">
<img src="img/4.png">
<img src="img/5.png">
<img src="img/6.png">
<img src="img/7.png">
<img src="img/8.png">
<img src="img/9.png">
<img src="img/10.png">
<img src="img/11.png">
<img src="img/12.png">
<img src="img/13.png">
<img src="img/14.png">
<img src="img/15.png">
<img src="img/16.png">
<img src="img/17.png">
<img src="img/18.png">
<img src="img/19.png">
<img src="img/20.png">
<img src="img/21.png">
<img src="img/22.png">
<img src="img/23.png">

サンプルはこちらChromeデベロッパーツールでソースを確認してみてください。

インライ化前の計測結果

インライン化前の測定結果

インライン化後


<img src="data:image/png;base64,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" alt="">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA/CAYAAABQHc7KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAB8FJREFUeNrsWkty20YQnQFAgpRo05ULOCdIeZmddQPrKFlmqWWWPoqOIO+ydOUEyQVSsi2LJD4z6dfd8wEt2VWihEgloKprQJEQ571+3dPTQ+u9N8/5KswzvyYCJgImAiYCJgImAiYCJgImAp7rVY39hb/+/tcbGl6Rney9dUF2+ecfv3wccz72oTdDBBhgT9UAev2DRz4pGecwIuTySRKgwH9TW/fOm6YVw33fGx5xlYU1ZSnjfCaGeyXjPeyhiHgQAgg8QJ8B+GbnDAzALWGqCFxRkVH2sSED0RScI+s9mTFd582cPrOsCzYl4oxIeP+oCVCvQ7pvAfjTVc9entXkVQJSzS0RQJm3FAKMFfCYAoD3IIDAdx2RQM93Dd4gFlclq4KuDwil+1TDvRGgye2c8L6+uu7N9daZGQGujwpTLwsmAa9LeJ/kbq06P/d+J97vAZ6sbYSEdudNTQSsjkpDkfGPkvDx0RCg4C8I/Prfzx2DWK4KtgURMF8IAZB/WUH6NjjfeHqICQBwJSB4n8ErAQ2FkSeV/PSyAgkIiZP7IOFgAlT2fwfwkPzxy9IcvSDwx+L9ekng5xQClcg/xL5I30f59y2NnQJvg/edEkC2lRBREqCEN4eGw33UAec5+NWawIOAVSDAsgKqIP9C5O99IoBXBCiggvcNhwgbf7Ygow9ax881W2PwXUTCayLh/IZ6YrxKULP9W8Q8pHv8QjwPW0YrJRyOhZDFUVAFQkPImXOStJInbjEk0XBfkNvwnfhuncP4IRCkT9mevQ+Aq1dEwBoElDH+oYAZVoCZJj9zi/c19jkBNoZCQKSPMID8Qx5oKQx2lGCbjTcvl7w6IB/8fNdQOEQBXOBgqQM4ljsBXqh36wUseTisArIUSjiImXhfhb/RUol7/txMxmDxNf2fL6KCtc5lvBAIVR4KHMQ9gM/3JM1Zf55NHsCw/pc2xbi+LrP7aFVOUiIqEFOVKCENF1mYi85pNAWchioPIPP43fcwyz4UPTYEnuWEFq2Q5MiWJcDBWCqBIAL3lDBB3LZxQQWnoxIQavtc1pV6qqhMBG5jxSNxH+5N4iKO4fMFDLVCoWoo9lWTSEMQ6J5iVAJO8to+FDhS41sGkSo9r0lPR5fu98mIhKglhWjxFFTChHgyx68xl7suh8Ud4h9V3xpfmstcgKdJ514HaFR7qPoSIWrmFiKC5USE0AEhxnN9UBS0QnT88Frn9uCFECcbyC4WKxn4UOEF0AVGTBRT/oYYnxSRLY838JGRYbUwCinFG7c3t4cOAZYa1u9CZWlNSnABmHg8lboyqrlgGhLB/DA8/A1ExAsPQwUgINUyJ2MowAQFzGyW2v0QjNOmhyRBgLIpvn0GVpXiohrS3yMDfkiEV+Y8Jz9LBJT/517ADyTPwCH9niZG8dlb8VPhfcoNcSc4DIVIgoZFTkokDR4nSXllyB8A/iACuGUVvZ7JGsBpWyvgbVoJwpI4yAM+9gN871NfICZNw/IWRYgh4H3b0ueJBGHXFHbczdAFE1BmzQxnYpz3uXW5pY4P7/1jbkh7ApeT0Gd5JBDi8T96er6j9/VNgEjSuhhDAZdBAV1IaBGwZbB5x0cUQKmq8GmlsHuyVvnnfcEBEX0iod/umARPBCD2sb5Udji3B1WAdmE+oUcXPM/e7dKuThobYnGHF3Z8+Hu79/nBrjC0x3xSlsofYdI1O+NaUgG9KQlTKlDM6S4dorvmgAsi4F1/tSdzAtaVaZ1mpah0pR4YvpevBoP4DyGRhUrP3eLe9E1L3wUCKkoHlp+fCwEXYybBcwqBd1BBAk/eQTncZlIHuErAh7CIdUNYCQargIbCPvhOQqG73pICWnrPSmK0JYViGc4QzkclAIcVy7pYf9k4ljl2Z7wJKvywKFLvF33Y7Oznh2HxFCQvBCTwzddr02w2GhqoKisisORusZ4bnI+1ChjtvoAAA0V3bejkmtjKzju78fUPDCqKaspyRLdrTQPvIwF2juPeefQKK7OcM4Q7nxwdUgjhlOa39apcX37taFnExsRJEzNWbCJrboX3JjZEBxVhtnfwbpgLmAACv7u6Nt1my0QAOKTv7cy8qMv8+GzcpqgyfoY8sJgV0r//jsUef37g0d6iEO0PNl83Zvv5irx/bdpdQ8qg5c/MCfzC1PM6nBadHdIav49zARyIvEVjlByjvb9C+wRGt8vfbpnNfh5waTUA0G67Ne31hshp2POS+clf81f0P5dmfTxDBfiBwB/UFr+Pc4FTmshH9OlBArq3vFFB8UPJCklNkqMkyLB1zgngw1EqbPrdlgH3TUckINs7Xgm8A3sLmm1NpB6bl9kR2aM8GkO2DwchoaEZDkRDD1C2d1TNcVUnYF3XMhEO3sborJbAiPmaiKyD5x/P0dhth6M78px0gg0vkdLDky6O5T0djawUz2C963V0vAxi98QJj0SKkndBMX+0KB7n4ehtx+OfiQju47H3ndxHAlwkwGtvTHKAqMOZktd5S4llVT+B4/Hv/UACreveh2UwtLPcoFUsg3gdL8pSihxd55/GDyRuOjwxez+RQQOTt/VeRoZdyJYWqWFGYYPa/kn/ROYGIp7fj6R+kCyfz8/kHvs1/VR2ImAiYCJgImAiYCJgImAi4Lle/wkwAIGXlmhPtwkRAAAAAElFTkSuQmCC" alt="">
<img src="data:image/png;base64,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" alt="">

<!-- 以下省略 -->

サンプルはこちらChromeデベロッパーツールでソースを確認してみてください。

インライン化後の計測結果

インライン化後の計測結果

まとめ

どうですか??初めて訪問した場合の速度は圧倒的に速くなってますね!
欠点はインライン画像はキャッシュが効かないので次回訪問はちょっと速度が遅くなってしまう事ですかね。
でも重要な初回表示が圧倒的に速いので効果ありと判断してもいいかと思うのですが。

実際にクロムのデベロッパーツールの"初回リロード"なんかで確認してみてください効果が実感できるかと思います。

初回リロードの操作説明

どうでしたかインラインイメージ、ではでは次回もサイト高速化のテーマで行かせてもらいます!

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

つっつが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ