画像をbase64エンコード形式に変換してCSSで表示する方法

フロントエンド開発プロセスでは、画像、SVG、ICO などを Base64 に変換して CSS で直接使用する必要がある場合があります。これにより、読み込み速度が向上します。画像を Web 上の小さな画像に一般的に使用される Base64 エンコードに変換します。これにより、画像リクエスト (js および css コードに収集される) の数が削減されるだけでなく、相対パスやその他の問題によって引き起こされる 404 エラーも防ぐことができます。

変換手順:

1) 変換したい画像を選択し、このウェブサイトを開きます

画像をbase64に変換

 

2) Base64データをコピーする

 

3) 見積書

• CSS で使用します: background-image: url("data:image/png;base64,iVBORw0KGgo=...");
• HTML では次のように使用します: <img src="data:image/png;base64,iVBORw0KGgo=..." />