どのようにするBase64変換するのために画像および反へ操作する
Base64エンコードするはする二入制画像データ表示のために文本の基本技术。にかかわらずあなたはでHTML中直接嵌入画像、を通じてAPI転送する画像,それともデータベースに保存画像データ,理解するどのようにでBase64と画像フォーマットの間入行変換するすべてはWeb開発者の必备技できる。
とはBase64エンコードする?
Base64は一種の二入制まで文本のエンコードする方案,使用64个字符集する二入制データ変換のためにASCII文字列:A-Z、a-z、0-9、+と/。=字符に使用される填充。毎三个字节の二入制データられる表示のために四个Base64字符,これは以下を意味しますBase64エンコードするのデータ比原始二入制データ約33%。
これ種類エンコードする最も初はのためにだけできる転送する文本の电子邮件系统開発するの。如今,Base64でWeb開発する中られる広くに使用されるする小画像直接嵌入HTML、CSSとJSON負荷中,消を除いて正単独HTTPリクエストするの需求。
なぜする必要があるする画像変換するのためにBase64?
する画像変換するのためにBase64文字列ありいくつかの实际理由:
- 内联嵌入:使用Data URIする小画像直接嵌入HTMLまたはCSS,減らすページ必要とする发出のHTTPリクエストする数量。
- API負荷:でJSON API対応中を含む画像データ,なし需単独のファイルアップロードするエンドポイントまたはCDN引用する。
- データベース保存する:時にファイル系统またはオブジェクト保存するできない用时,する画像データストレージでに基づく文本のデータベース字段中。
- 电子邮件テンプレート:でHTML电子邮件中嵌入画像,させる其なし需外部资源即可表示する,向上させると邮件クライアントの互換性。
- データ転送する:を通じて仅支持する文本の通道(如JSON、XMLまたは表単字段)安全転送する二入制画像データ。
どのようにする画像変換するのためにBase64
でブラウザ中使用JavaScript
ブラウザ提供するたFileReader APIとCanvas APIに使用されるする画像変換するのためにBase64。FileReader方法する画像ファイルとしてData URL読み取る,そしてCanvas方法許可するあなたでエンコードする前调全体大小または変更する画像。
使用Canvas,あなたする画像ペイントまでCanvas元素上,それから调用toDataURL()获取Base64文字列。此方法まだ許可するあなたを通じて传递'image/jpeg'など参数と0まで1の間の质量值来より改出力するフォーマットと质量。
オンラインツールを使用
する画像変換するのためにBase64最速の方法は使用オンライン変換するツール。だけ需アップロードする画像,ツールすぐにできる即時生成Base64文字列。時にあなた必要とする高速変換するそしてなし需编写コード时,これ特にあり用。あなた可しないように费试用私たちの画像转Base64コンバーター。
使用コマンドライン
でLinuxとmacOS上,あなたできる使用base64コマンド直接からターミナルエンコードする画像。これに対して必要とする一次処理する多张画像の脚本编写と自動化するワークフロー非常にあり用。
どのようにするBase64変換する回画像
でブラウザ中
元素のsrc属性。フォーマットのためにdata:[MIME-type];base64,[data]。例えば,PNG画像使用data:image/png;base64,iVBORw0KGgo...。
する必要があるする画像保存するのためにファイル,あなたできるを通じてするBase64データ変換のためにBlobオブジェクトかつ生成オブジェクトURL来作成するダウンロードするリンク。此方法完全でブラウザ中実行する,なし需任意のサーバー端処理する。
オンラインツールを使用
オンラインBase64转画像コンバーター許可するあなた貼り付けるBase64文字列かつ即時プレビューするとダウンロードする生成の画像。時にあなたで电子邮件、API対応または設定ファイル中收までBase64文字列かつ必要とする查看实际画像时,これは最もシンプルの方法。
理解するData URI
Data URIはでWebページ中嵌入Base64エンコードする画像の標準方式。完全構文を含むMIMEタイプ、エンコードする声明とBase64データ本身。
画像の常见Data URIフォーマットを含む:
- JPEG:data:image/jpeg;base64,/9j/4AAQ...
- PNG:data:image/png;base64,iVBORw0KGgo...
- GIF:data:image/gif;base64,R0lGODlh...
- WebP:data:image/webp;base64,UklGRj...
- SVG:data:image/svg+xml;base64,PHN2Zy...
何时使用Base64画像(何时不使用)
Base64画像かつ不常に正しくの選択する。もって下は何时使用と何时避けるのガイド:
適合するのユースケース
- 2KBもって下の小アイコンと装饰元素
- JSON API対応中の画像
- 电子邮件テンプレート画像
- 画像较少の単页適用する
- プロトタイプ設計すると高速デモンストレーション
应避ける使用Base64の情况
- 超たことがある10KBの大画像(33%の大小開销变て显著)
- を含む多张画像のページ(各内联画像すべてできる増やすHTML大小)
- 閲覧する必要があります器キャッシュの画像(Base64画像なし法独立キャッシュ)
- 必要とする针正異なる屏幕尺寸提供する異なるバージョンのレスポンシブ画像
よくある質問と解决方案
- 出力する损悪:確保するBase64文字列完全かつ未られる截断。缺少字符できるをもたらすデコードする失敗。
- 間違いのMIMEタイプ:常にでData URI中を含む正しくのMIMEタイプ。使用JPEG MIMEタイプエンコードするのPNGするなし法正しく表示する。
- 文字列中の改行符:某些系统できるでBase64文字列中挿入する改行符。デコードする前请削除するそれ们。
- URL安全变体:Base64URL使用-と_代の代わりに+と/。使用標準Base64デコードする前请変換するこれらの字符。
必要とするする画像変換するのためにBase64またはするBase64文字列デコードする回画像?試してみる私たちの無料ツール。
画像转 Base64よくある質問
Base64エンコードするできる増やすファイル大小か?
はい,Base64エンコードするできる増やす约33%のファイル大小。これはなぜならBase64する毎3个字节の二入制データ表示のために4个ASCII字符。これ種類開销はできるでに基づく文本のフォーマット中嵌入二入制データの代价。
Base64画像エンコードする正パフォーマンスあり影響するか?
過度の使用Base64画像できる损害パフォーマンス。それ们できる増やすHTML大小,なし法られるブラウザ単独キャッシュ,かつできるブロッキングページレンダリングする。しかし,に対して2KBもって下の小アイコン,内联Base64できる減らすHTTPリクエストするかつ改善する読み込む時間。
できるする任意の画像フォーマット変換するのためにBase64か?
はい,任意の二入制ファイル,を含むすべての画像フォーマット(JPEG、PNG、GIF、WebP、SVG、BMP),すべてできる変換するのためにBase64。生成のBase64文字列を含む一つの指示原始MIMEタイプのData URI前缀。
Base64とData URI違いは何か?
Base64はする二入制データ変換のためにASCII文本のエンコードするアルゴリズム。Data URIは一種のするBase64エンコードするデータ直接嵌入URLの方案,前缀のためにMIMEタイプとエンコードする情報。Data URIフォーマットのために:data:[mediatype][;base64],data。