利用シーン使用例
Base64 画像の使い方
代表的な利用シーンと、すぐにコピーして使える例を紹介します。変換結果を差し替えてすぐに検証できます
取得できる形式: Data URL（mime プレフィックス付き）と生の Base64（プレフィックスなし）
Data URL（推奨）
data:image/png;base64,QUJDZA==生の Base64
QUJDZA==Web ページに直接表示（HTML）
簡易プレビューや静的ページへの埋め込み、追加のリソース管理が不要な場面に適しています
Convert an image to a Base64 Data URL<img src="data:image/png;base64,QUJDZA==" alt="Base64 Image" width="240" />
背景画像として使用（CSS）
アイコン、プレースホルダー、小さな装飾画像に適し、リクエスト数を削減できます
Create an image Base64 string first.banner {
background-image: url("data:image/png;base64,QUJDZA==");
background-size: cover;
background-position: center;
}API / JSON での転送
デバッグ、プロトタイプ、一時的な転送に適しています。本番環境での大きな画像の長期インライン化は非推奨です
{
"filename": "image.png",
"mime": "image/png",
"dataUrl": "data:image/png;base64,QUJDZA=="
}バックエンドが生の Base64 のみを必要とする場合は、
QUJDZA== を送信し、mime/type は別途指定してください。モバイル / クロスプラットフォームでの使用（例）
Base64 に対応したあらゆる実行環境で利用可能です。代表的な書き方を示しています
Verify a Base64 string before using it in an appimport 'dart:convert';
import 'package:flutter/widgets.dart';
final bytes = base64Decode("QUJDZA==");
final image = Image.memory(bytes);Base64 を使わない方がよい場合
- 大きな画像を長期間インライン化する場合（容量増加・読み込み遅延）
- CDN キャッシュが必要で、長期的に再利用される静的リソース
- 初期表示速度やキャッシュ戦略を重視する画像リソース
Base64 は「データの流通と迅速な配信」に適しており、完全な静的リソース管理の代替ではありません