BraveCL如何在Mac上建立HTML圖片程式碼
為多張圖片產生含有內嵌Base64資料與描述性替代文字的HTML圖片標籤。
- 完成成果
- 完成一組含有3個圖片標籤的HTML圖片集，每個標籤均內嵌資料URI與描述性替代文字，可複製或輸出完整成品。
- 準備事項
- 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（描述）中輸入有意義的替代文字。保持Decorative image（裝飾性圖片）關閉，讓每段描述成為alt屬性。確認Set Readiness（圖片集就緒狀態）顯示圖片集已就緒，接著檢查3張圖片各自的HTML程式碼與合併後的snippets.html預覽。預覽可能會截短，但Copy（複製）與Deliver（輸出）使用完整成品。
Image Base64 Encoder顯示已就緒的HTML圖片集、3個個別程式碼片段，以及HTML圖片標籤中的描述性替代文字
實用提示
使用Image與Set分頁，比較單張圖片的資料URI與合併後的HTML輸出。
關閉Decorative image時，每段描述都會成為對應圖片的替代文字。
Base64內容較長時，預覽可能會截短；Copy與Deliver使用完整成品。
注意內嵌Base64圖片資料可能會大幅增加HTML的大小。分享或嵌入輸出內容前，請檢查畫面顯示的複製內容大小。
