---
title: "Base64とは？画像を文字列で埋め込むdata URIの仕組み"
description: "HTMLに埋め込まれた長い英数字の画像URLがどういうものかを知りたい人向けに、Base64とdata URIの仕組みをやさしく解説。使いどころとファイル肥大化のトレードオフも合わせて整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-base64"
markdown: "https://giga-site.com/articles/what-is-base64/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Base64とは？画像を文字列で埋め込むdata URIの仕組み

HTMLのソースを見ると、画像のはずなのに長い英数字の羅列になっている。これがBase64で文字列化した画像をdata URIとして埋め込んだ形です。本記事ではBase64とは何か、data URIで画像を埋め込む仕組みと使いどころをやさしく解説します。

> Source HTML: https://giga-site.com/articles/what-is-base64
> Article index: https://giga-site.com/articles/index.md

## Base64とは

Base64とは、画像などの「バイナリデータ」を、英数字といくつかの記号だけの文字列に変換する方式です。バイナリデータはそのままではテキストの中に安全に書き込めないことがあるため、テキストとして扱える形に置き換えるのがBase64の役割です。

Base64は暗号化ではありません。データを読みにくい見た目に変えますが、誰でも元に戻せます。あくまで「テキストとして運べる形に変換する」ための仕組みであり、秘密にするための手段ではない点に注意が必要です。

## data URIの仕組み

data URIとは、外部ファイルを参照する代わりに、データそのものをURLの中に直接書き込む書き方です。画像であれば、data: に続けてMIMEタイプ、base64 の指定、そしてBase64でエンコードした文字列、という形で一つの長いURLになります。

このdata URIを画像のsrcやCSSの背景画像に指定すると、ブラウザは外部ファイルを取りに行かず、その場の文字列を画像として描画します。つまり画像が、別ファイルではなくHTMLやCSSの中身として一体化します。

小さなアイコンやロゴをdata URIで埋め込むと、画像ファイルを別途用意しなくても一つのHTMLで完結します。HTMLだけを渡せば画像も一緒に届く、というまとまりの良さが生まれます。

## 実務ではどこで関係する？

Base64は言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

Base64について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## 利点と注意点

Base64によるdata URI埋め込みには明確な利点がある一方、向かない場面もあります。特徴を理解して使い分けることが大切です。

- 利点: 画像が単一ファイルに収まり、リンク切れや配布漏れが起きにくい
- 利点: 小さなアイコンなら読み込みリクエストを減らせる
- 注意: Base64化するとデータ量が元より増える（おおむね三割ほど）
- 注意: 大きな画像を埋め込むとHTMLが肥大化し、表示や編集が重くなる
- 注意: 同じ画像を複数ページで使い回す場合はキャッシュが効きにくい

## 画像をdata URIで埋め込む手順

小さな画像をdata URIにしてHTMLに埋め込む流れは次のとおりです。

1. 埋め込みたい画像を用意し、容量が小さいものを選ぶ
2. ツールやコマンドで画像をBase64文字列に変換する
3. data: に続けてMIMEタイプ、base64 指定、変換した文字列をつなげてdata URIを作る
4. そのdata URIを画像のsrcやCSSの背景画像に指定する
5. ブラウザで開き、画像が正しく表示されるか確認する

## 一枚のHTMLにまとめて共有する場面

画像をdata URIで埋め込めば、HTMLファイル一枚に画像まで含めて完結させられます。とはいえ画像が多い、または大きい場合は、ファイルが重くなりすぎることもあります。

ギガサイト便は単一HTMLだけでなく、CSS・JS・画像を含むZIPもそのまま共有URLにできます。data URIで全部埋め込んで重くするより、画像は通常ファイルとしてZIPに同梱して共有する、といった使い分けがしやすく、レビュー用にまとめて見せる用途に向いています。

## よくある質問

### Base64は暗号化やセキュリティ対策になりますか

なりません。Base64は誰でも元のデータに戻せる単なる変換方式です。見た目は読みにくくなりますが秘密は守れないため、見せたくない情報の保護には別途アクセス制御が必要です。

### data URIにするとファイルは軽くなりますか

いいえ、むしろデータ量は増えます。Base64化により元のサイズよりおおむね三割ほど大きくなります。小さなアイコンには向きますが、大きな画像の埋め込みには向きません。

### どんな画像をdata URIにすべきですか

ごく小さなアイコンやロゴなど、容量が小さく使い回しの少ない画像が向いています。大きな写真や複数ページで共有する画像は、通常の画像ファイルとして読み込むほうが効率的です。

### data URIの画像はキャッシュされますか

data URIはHTMLやCSSの一部として読み込まれるため、独立した画像ファイルのようには再利用のキャッシュが効きにくい傾向があります。複数ページで同じ画像を使うなら通常ファイルが有利です。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)
- [403 Forbiddenとは？アクセスが拒否される意味](https://giga-site.com/articles/what-is-403/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Base64とは？画像を文字列で埋め込むdata URIの仕組み",
  "description": "HTMLに埋め込まれた長い英数字の画像URLがどういうものかを知りたい人向けに、Base64とdata URIの仕組みをやさしく解説。使いどころとファイル肥大化のトレードオフも合わせて整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-base64",
  "url": "https://giga-site.com/articles/what-is-base64",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Base64は暗号化やセキュリティ対策になりますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "なりません。Base64は誰でも元のデータに戻せる単なる変換方式です。見た目は読みにくくなりますが秘密は守れないため、見せたくない情報の保護には別途アクセス制御が必要です。"
      }
    },
    {
      "@type": "Question",
      "name": "data URIにするとファイルは軽くなりますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "いいえ、むしろデータ量は増えます。Base64化により元のサイズよりおおむね三割ほど大きくなります。小さなアイコンには向きますが、大きな画像の埋め込みには向きません。"
      }
    },
    {
      "@type": "Question",
      "name": "どんな画像をdata URIにすべきですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ごく小さなアイコンやロゴなど、容量が小さく使い回しの少ない画像が向いています。大きな写真や複数ページで共有する画像は、通常の画像ファイルとして読み込むほうが効率的です。"
      }
    },
    {
      "@type": "Question",
      "name": "data URIの画像はキャッシュされますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "data URIはHTMLやCSSの一部として読み込まれるため、独立した画像ファイルのようには再利用のキャッシュが効きにくい傾向があります。複数ページで同じ画像を使うなら通常ファイルが有利です。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```