Base64 Thumbnail Generator

Quickly create thumbnail images for the web in Base64 encoded format!

Tips and Hints

Supports most popular web image file formats ( SVG files are inconsistent ).
Provide only width or height to preserve aspect ratio of the original image.
A modern browser is required - all processing occurs on your local machine.
All images you process will be displayed below, complete with implementation code.

How To Use This Technique

Base64 images are commonly used on the web and are well supported across all major browsers. They are embedded into HTML documents and stylesheets through img tag srcattributes or the url property in CSS background-image definitions.

Encoding images as Base64 is a quick way to reduce the number of additional HTTP requests your site needs to make. Even though encoded image files are larger than their source file, the reduction in requests still boosts your page load times.

My Thumbnails ( click to select )

Nothing to display...

Base64 Thumbnail Generator

Select Image:

Tips and Hints

How To Use This Technique

My Thumbnails ( click to select )

How To Use This Technique

Thumbnail Viewer

Generated Image ( actual size ):

Ready to use code:

HTML <img /> tag

CSS background-image

Data URI

Raw Base64

Select Image:

Tips and Hints

How To Use This Technique

My Thumbnails ( click to select )

How To Use This Technique

Thumbnail ViewerBack

Generated Image ( actual size ):

Ready to use code:

HTML <img /> tagCopy to clipboard

CSS background-imageCopy to clipboard

Data URICopy to clipboard

Raw Base64Copy to clipboard

Thumbnail Viewer

HTML <img /> tag

CSS background-image

Data URI

Raw Base64