Base64.imBase64 オンラインエンコードデコード(最も使いやすい Base64 オンラインツール)
Base64.im の使用チュートリアル
1. Base64 エンコードを使用する理由
Base64 エンコードは、バイナリ データ (画像ファイルなど) をテキスト形式に変換する方法であり、次のシナリオに最適です。
- 小さな画像の高速読み込み: HTML または CSS ファイルに Base64 画像を埋め込むと、余分な HTTP リクエストが回避され、読み込み速度が向上します。
- HTML 電子メール署名: 電子メール クライアントで「画像を表示」警告が表示されないように、Base64 エンコード経由で画像を埋め込みます。
- 単一ファイルのデモ: 外部リソースを必要としないクライアント向けに、単一ファイルのモックアップまたはデモ ページを作成します。
2. サポートされている画像形式
このツールは、.jpeg、.png、.gif、.webp、.svg、.BMP、.bmp の一般的な画像形式のエンコードをサポートしています。
3. Base64.im を使用して画像を変換する方法
画像をアップロードする: 画像ファイルをブラウザ ウィンドウにドラッグするか、[アップロード] ボタンをクリックして、エンコードする画像を選択します。
結果の表示: ファイルがアップロードされると、以下の Base64 文字列が表示されます。
アップロード制限: 一度に最大 20 ファイルをアップロードできます。
4. Base64 でエンコードされた画像を HTML 画像ソースとして使用する
Base64文字列は、HTMLの`img`タグの`src`属性値として使用できます。以下に例を示します。
<img src="data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA..." width="100" height="50" alt="base64 test">
使用手順:
①. ツールが提供するコピーボタンをクリックして、Base64 文字列をクリップボードにコピーします。
②. ブラウザが直接コピーをサポートしていない場合は、ダイアログ ボックスから文字列を手動でコピーできます。
③. HTML ファイルの `src` 属性に文字列を貼り付けます。
CodePen で base64 イメージのデモを表示できます。
5. Base64 でエンコードされた画像を CSS 背景として使用します
Base64 文字列は、背景画像を定義するための CSS `background` プロパティの値としても使用できます。以下に例を示します。
.my-class {
background: url('data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...');
}
使用手順:
① ツールのコピーボタンをクリックしてBase64文字列をクリップボードにコピーします。
②. コピー ボタンが使用できない場合は、ダイアログ ボックスから文字列を手動でコピーできます。
③. CSS ファイルの `url()` パラメータに文字列を貼り付けます。
CodePen で base64 CSS デモをご覧いただけます。
6. 注意事項
Base64 エンコードは、小さな画像に適しています。大きなファイルは、頻繁にロードする必要がある大きな画像やリソースには推奨されません。
エンコードされた文字列がプロジェクトの要件を満たしており、さまざまなデバイスで適切に表示されることを確認してください。
上記の手順により、Base64 ツールを簡単に使用して画像エンコード タスクを完了し、開発効率を向上させることができます。