- Googleアナリティクス（GA4）探索レポートで外部リンクのクリック数を確認する方法
Topics
インフォコネクト最新情報
デベロッパーツールで画像を簡単にBase64にエンコード(変換)する方法
デベロッパーツールで画像を簡単にBase64にエンコード(変換)する方法
この記事は公開から2年以上経過しています。
こんにちは、チーフクリエイターのSHOJIです。
画像をBase64にエンコード（変換）する方法は、専用のWebサービスを利用したり、ターミナルやコマンドプロントで変換したりと様々な方法がありますが、Google Chromeのデベロッパーツールを使うと簡単にBase64のテキストデータを確認することができます。
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％程度データサイズは大きくなるため、注意が必要です。
［Webの豆知識］関連記事
Service
Contact
インフォコネクトに相談してみませんか？
経営コンサルティングからITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。