Image Encoding for the Web

Base64 Data URIs

A data URI embeds file content directly in HTML or CSS using Base64 encoding. This eliminates an extra HTTP request but increases file size by ~33%.

<!-- Inline image as data URI -->
<img src="data:image/png;base64,iVBORw0KGgo..." alt="icon" />

/* CSS background */
background-image: url("data:image/svg+xml;base64,PHN2Zy...");

• Good for: Small icons (<5KB), CSS backgrounds, email templates
• Avoid for: Large images, frequently changing assets, images needing lazy loading

SVG Optimization

SVGs from design tools often contain unnecessary metadata, comments, and attributes. Optimizing can reduce size by 20-60%.

• Remove XML declarations and editor metadata
• Strip comments and empty groups
• Remove unused IDs and data attributes
• Minify whitespace between tags
• Use tools like SVGO or our SVG Optimizer for automated cleanup

Image Formats Compared

Performance Tips

• Use WebP or AVIF for photos on modern browsers
• Inline small SVGs directly in HTML instead of using img tags
• Set explicit width and height on images to prevent layout shift
• Use loading="lazy" for below-the-fold images
• Serve responsive images with srcset for different screen sizes