BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
imgタグのsrc属性には、一般的に画像ファイルのパスを指定しますよね。
しかし、base64という形式でエンコードされたデータをHTMLに直接埋め込むことができるんです。
このbase64を使用することで画像が軽くなり、ページ速度アップを図ることができます。

今回は意外と知られていないbase64についてご紹介いたします。

画像ファイルの仕組み

Webページで使用する画像ファイルは1枚1枚ブラウザからWebサーバーに「リクエスト」して、ダウンロードします。
使用する画像ファイルの数が多かったり、ファイルの大きさが大きかったりすると、「リクエスト」に時間がかかり、ページ表示が遅くなります。

利用シーン

サーバーへのリクエスト数を減らして表示速度を速くするために、小さなデータを直接HTMLに埋め込みたい時に利用しましょう。

base64とは?

コンピュータで扱うことができるすべてのファイルは「テキストデータ」と「バイナリーデータ」の2種類に分けられます。

テキストデータ:人間でも理解できる「文字」で記されたデータ
バイナリーデータ:データの中身が「文字以外」で記されたデータ

base64はバイナリーデータを文字列に変換するための「フォーマット」の一種です。
もともとはテキストデータしか扱えなかったメールに、ファイルを添付するために考え出されたフォーマットになります。

バイナリーデータをbase64に変換することを「エンコード
base64をもとのバイナリーデータに戻すことを「デコード」といいます。

base64のメリット

画像データをbase64でエンコードして直接 HTMLに埋め込んでおくと、そのぶんリクエストする数が減り、表示速度が速くなります。

base64のデメリット

エンコード変換の手間がある。

画像をbase64にエンコードする方法

画像データをbase64にエンコードするにはいくつか方法があります。

  • Webサービスでの変換
  • ターミナルやコマンドプロンプトで変換
  • デベロッパーツールで確認して貼り付け

最も簡単なのは「Webサービスでの変換」です。
「base64 エンコード」などのキーワードで検索すれば、いくつかサービスが見つかります。

base64をエンコードするWebサイト 参考
[url] https://rakko.tools/tools/24/

まとめ

base64はエンコードするという手間はありますが、画像読み込みスピードを速くすることができるので、
臨機応変に使用し、ページ速度を改善してみてください!