The benefit of using base64 encoded images embedded in your img tags is that the web browser doesn’t have to load an external resource. This can greatly speed up infrequently visited pages under certain circumstances. But there’s also a trade off in manageability of your images.
Bottomline: As a good rule of thumb only use in-line base64 on really small images, like pixels.
Why use Embedded Versus Url Images?
Upside
- Faster loading images. Caching aside, less round trip time between the user and web server.
Downside
- Base64 adds about 33% overhead to binary data
- Base64 images don’t appear to be indexed by Google.
Example In CSS
.spacer{ background-image:url(data:image/png;base64,R0lGODlhAQABAIAAAP...);}
Example In Image (IMG) HTML Tag
<img src="data:<MIMETYPE>;base64,<BASE64_ENCODED_IMAGE_DATA>">
Smallest Possible Transparent Gif Pixel
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
Base 64 image data generator tool
base64-image.de is a great service for converting your images into base64 data.