[{"data":1,"prerenderedAt":171},["ShallowReactive",2],{"\u002Fbase64-encode-image\u002Fja":3},{"id":4,"title":5,"body":6,"description":149,"extension":164,"meta":165,"navigation":166,"path":167,"seo":168,"stem":169,"__hash__":170},"content\u002Fbase64-encode-image\u002Fja.md","Ja",{"type":7,"value":8,"toc":148},"minimark",[9,14,27,30,33,49,52,55,60,63,67,73,77,83,87,93,96,99,114,117,120,134,137],[10,11,13],"h2",{"id":12},"画像base64エンコードとは","画像Base64エンコードとは？",[15,16,17,18,22,23,26],"p",{},"画像ファイルをBase64文字列へ変換するツールです。変換結果は Raw、Data URI、HTML の ",[19,20,21],"code",{},"img"," タグ、CSS の ",[19,24,25],{},"background-image"," 形式で確認できるため、用途に合わせた形でそのまま使えます。",[15,28,29],{},"小さな画像をHTMLやCSSへ直接埋め込みたいときや、画像データをテキストとして扱いたいときに便利です。複数画像にも対応しており、ブラウザ上でまとめて確認できます。",[10,31,32],{"id":32},"使い方",[34,35,36,40,43,46],"ol",{},[37,38,39],"li",{},"画像ファイルを選択するか、ドラッグ&ドロップで追加します。",[37,41,42],{},"自動でBase64変換結果が表示されます。",[37,44,45],{},"必要な出力形式を選びます。",[37,47,48],{},"結果をコピーして使います。",[15,50,51],{},"一度に最大20枚まで扱えるため、複数ファイルの比較やまとめて確認にも向いています。",[10,53,54],{"id":54},"出力形式",[56,57,59],"h3",{"id":58},"base64rawデータ","Base64（Rawデータ）",[15,61,62],{},"Data URI宣言を含まない、純粋なBase64文字列です。APIや独自処理でBase64本体だけが必要なときに使います。",[56,64,66],{"id":65},"base64datauri宣言付き","Base64（DataURI宣言付き）",[15,68,69,72],{},[19,70,71],{},"data:image\u002F...;base64,"," を含む形式です。ブラウザでそのまま画像として扱いたいときに向いています。",[56,74,76],{"id":75},"html-imgタグ","HTML imgタグ",[15,78,79,82],{},[19,80,81],{},"\u003Cimg src=\"...\" \u002F>"," の形で出力します。HTMLへそのまま貼りたい場合に便利です。",[56,84,86],{"id":85},"css-background-image","CSS Background Image",[15,88,89,92],{},[19,90,91],{},"background-image: url(\"...\");"," の形で出力します。CSSへ貼り付けたいときに使いやすい形式です。",[10,94,95],{"id":95},"確認できる情報",[15,97,98],{},"変換結果ごとに、画像のプレビューと次の情報を確認できます。",[100,101,102,105,108,111],"ul",{},[37,103,104],{},"ファイル名",[37,106,107],{},"最終更新日",[37,109,110],{},"縦サイズ",[37,112,113],{},"横サイズ",[15,115,116],{},"出力形式だけでなく、元画像の基本情報も合わせて見たいときに便利です。",[10,118,119],{"id":119},"活用シーン",[100,121,122,125,128,131],{},[37,123,124],{},"小さな画像をHTMLやCSSへ直接埋め込みたいとき",[37,126,127],{},"Data URI形式の画像データを作りたいとき",[37,129,130],{},"APIやJSONで画像をテキストとして扱いたいとき",[37,132,133],{},"複数画像のBase64結果をまとめて確認したいとき",[10,135,136],{"id":136},"使うときの注意点",[100,138,139,142,145],{},[37,140,141],{},"Base64化すると文字列が長くなるため、大きな画像では扱いにくくなります",[37,143,144],{},"小さな画像や埋め込み用途との相性が良く、大きな画像ではファイル参照のほうが向くこともあります",[37,146,147],{},"画像を追加すると結果はブラウザ上で生成されますが、極端に大きな画像では表示や操作が重くなることがあります",{"title":149,"searchDepth":150,"depth":150,"links":151},"",2,[152,153,154,161,162,163],{"id":12,"depth":150,"text":13},{"id":32,"depth":150,"text":32},{"id":54,"depth":150,"text":54,"children":155},[156,158,159,160],{"id":58,"depth":157,"text":59},3,{"id":65,"depth":157,"text":66},{"id":75,"depth":157,"text":76},{"id":85,"depth":157,"text":86},{"id":95,"depth":150,"text":95},{"id":119,"depth":150,"text":119},{"id":136,"depth":150,"text":136},"md",{},true,"\u002Fbase64-encode-image\u002Fja",{"description":149},"base64-encode-image\u002Fja","xkhBBq8bgGdQFexSKwST7UnCteFF6UZV1mFGajGHp1A",1778928561751]