BraveCLMacでHTML画像コードを作成する方法
複数の画像から、Base64データと説明的な代替テキストを埋め込んだHTML画像タグを生成します。
- 完成イメージ
- データURIと説明的な代替テキストを埋め込んだ3つの画像タグを含むHTMLセットが完成し、全体をコピーまたは出力できる状態になります。
- 必要なもの
- MacにImage Base64 Encoderがインストールされていること
- 内蔵のサンプル画像、または自分のPNG・JPEGファイル
Image Base64 Encoderは、複数の画像を単体で使えるHTML画像コードにまとめます。内蔵のサンプルから始めて、画像セットと説明の仕組みを確認しましょう。
1.サンプル画像を読み込む
Try Samples（サンプルを試す）を選び、付属のPNGとJPEGのサンプルを読み込みます。Sources（ソース）一覧にはCheckout-Badge.png、Developer-Workspace.jpg、Circuit-Board.jpgが表示されます。Image（画像）表示では、選択したファイルをエンコードしたデータURIをプレビューできます。
MacのImage Base64 Encoderに、読み込まれた3つのPNG・JPEGサンプルとエンコード済みData URIのプレビューが表示されている 2.HTML画像セットを作成する
プレビュー上部のSet（セット）を選び、出力形式はHTMLのままにします。Sources（ソース）の各項目を選択し、Description（説明）に内容の伝わる代替テキストを入力します。各説明がalt属性になるよう、Decorative image（装飾画像）はオフにします。Set Readiness（セットの準備状態）で準備完了と表示されることを確認し、3つの画像それぞれのHTMLコードと、結合されたsnippets.htmlのプレビューを確認します。プレビューは省略されることがありますが、Copy（コピー）とDeliver（出力）は完全な出力を使用します。
Image Base64 Encoderに、準備完了のHTML画像セット、3つの個別コード、HTML画像タグ内の説明的な代替テキストが表示されている
ヒント
ImageとSetタブを使うと、1枚の画像のデータURIと、まとめたHTML出力を比較できます。
Decorative imageがオフの場合、それぞれの説明が対応する画像の代替テキストになります。
Base64の内容が長いとプレビューは省略されることがありますが、CopyとDeliverは完全な出力を使用します。
注意Base64画像データを埋め込むと、HTMLのサイズが大幅に大きくなることがあります。共有や埋め込みの前に、表示されたコピー対象のサイズを確認してください。
