デベロッパーツールで画像を簡単にBase64にエンコード(変換)する方法

この記事は公開から1年以上経過しています。

こんにちは、チーフクリエイターのSHOJIです。

画像をBase64にエンコード（変換）する方法は、専用のWebサービスを利用したり、ターミナルやコマンドプロントで変換したりと様々な方法がありますが、Google Chromeのデベロッパーツールを使うと簡単にBase64のテキストデータを確認することができます。

• \\　目 次　//
• Chromeのデベロッパーツールで変換
• Base64とは？
• Webサイトの表示速度を速くする「インラインイメージ」
• あとがき

Chromeのデベロッパーツールで変換

① Base64へ変換したい画像をChromeで開きます。

② デベロッパーツールを開き［Application（アプリケーション）］パネルを選択します。

③ Applicationパネルのツリーに「Frames（フレーム）」の項目があり、「top」配下にある該当ファイル名を選択します。

④ 表示されたプレビュー画像上で右クリックして［Copy image as data URI（データURIとして画像をコピー）］をクリックすると、Base64に変換されたテキストデータがコピーされます。

⑤ コピーされたBase64のテキストデータをエディタなどにペーストすると確認できます。

これで、画像をBase64に変換することができました。思った以上に簡単だったでしょ？
後は、このテキストデータをコピーしてHTMLのimg要素にペーストすれば、Webページに表示することができます。

Base64とは？

Base64とは、データを64種類の英数字を使って、それ以外の文字を扱うことが出来ない通信環境においてマルチバイト文字やバイナリデータを扱うためのエンコード方式をいいます。

具体的には、アルファベット（a～z、A～Z）、数字（0～9）、２つの記号（+、/）等の64文字が使われるのですが、入力数が足りない場合にパディングとして（=）を末尾に付与するため、実際には65文字となります。
 

Webサイトの表示速度を速くする「インラインイメージ」

SEO対策のひとつで、HTTPリクエスト数を減らすことでWebページの表示レスポンスを向上させるというものがあります。これは、Webページの表示が速いと、ユーザーにストレスを与えないため検索エンジンの評価向上が期待でき、結果として検索順位が上がると言われているのです。

Webページでの表示画像は、一般的にHTMLファイルとは別の画像ファイルを読み込んで表示されるため、その都度HTTPリクエストが発生することでWebページの表示速度の低下に繋がります。

そこで、画像をBase64に変換してHTMLに埋め込むことでHTTPリクエスト数を減らすことができるので、Webページの表示速度の向上に繋がります。この手法をインラインイメージといいます。

また、HTTPリクエスト数を減らす以外にも、外部の画像ファイルにアクセスできず表示できないといった特殊な場合においても、インラインイメージで実装ができるというメリットもあります。
 

あとがき

画像をBase64に変換してHTMLに埋め込むことでWebページの表示速度を向上することができるのですが、あくまで「HTTPリクエスト数が減る」ことによるもので、画像としてのテキストデータがサイズダウンするものではありません。

逆に、エンコードすることで30～35％程度データサイズは大きくなるため、注意が必要です。
 

• 前の記事へ

  跳ぶクリエイターRIMPEIの陸上記：第71回伊勢度会陸上競技選手権大会編

• 次の記事へ

  【ホームページ制作費】安さの裏側と良い会社を見極める質問９選とは