Implementation guide

How to Use a Base64 Image in CSS

Place a Base64 Data URL inside background-image for a small, self-contained style asset.

.icon {
  background-image: url('data:image/webp;base64,UklGR...');
  background-size: contain;
  background-repeat: no-repeat;
}

Use a quoted URL

Wrap the complete Data URL in quotes inside url(). This avoids parsing problems and keeps the declaration easier to copy.

Choose decorative images

CSS backgrounds have no alt text, so meaningful content should normally use an HTML img element instead.

Measure the tradeoff

Inlining may remove one request, but it increases stylesheet size and prevents independent image caching. Prefer small, page-specific assets.

Continue with the tool or reference that matches your next step.

Create the Base64 outputEncode a local image and copy the correct format.Data URL builderNormalize the prefix and inspect the payload.Base64 images in HTMLCompare the other embedding method.