Automatic image compression
ButterCMS has automatic image compression enabled across all images. When you upload an image, it’s automatically optimized to reduce file size while maintaining visual quality.Viewing compression results
When viewing an image in your Media Library, you’ll see both file sizes:- Optimized File Size - The compressed version being served
- Original File Size - Your original upload size
Reverting to original
If you prefer to use the original file without compression, you can revert by clicking the Use original file button:
Automatic WebP conversion
To help with the optimization of your images, ButterCMS automatically converts them to WebP format. WebP is a modern image format that provides superior compression compared to JPEG and PNG.Benefits of WebP
Smaller file sizes
WebP images are 25-34% smaller than JPEG at equivalent quality
Faster loading
Smaller files mean faster page loads on all devices
Better SEO
Google favors fast-loading pages in search rankings
Transparent support
WebP supports transparency like PNG, but with better compression
Optimal file size guidelines
For optimal page speed and appearance, follow these guidelines:| Image Type | Recommended Max Size | Notes |
|---|---|---|
| Large/background images | 1 MB | Full-screen or hero images |
| Standard images | 1200px width | Resize before uploading |
| Thumbnails | 300-500px | Keep as small as practical |
| Icons | 100px or less | Use SVG when possible |
Best practices
How it works behind the scenes
Automatic processing pipeline
When you upload an image to ButterCMS:- Original Stored - Your original file is safely stored as backup
- Analysis - The image is analyzed for optimal compression settings
- Compression - Lossless or near-lossless compression is applied
- WebP Conversion - A WebP version is created for modern browsers
- CDN Distribution - The optimized image is distributed globally
Browser compatibility
ButterCMS handles browser compatibility automatically:| Browser | Format Served |
|---|---|
| Chrome, Firefox, Edge, Opera | WebP |
| Safari (modern) | WebP |
| Older browsers | Original format (JPEG/PNG) |
ButterCMS uses content negotiation to serve the best format for each visitor’s browser automatically.
Compression tips
Before uploading
- Remove metadata - Strip EXIF data from photos to reduce file size
- Choose appropriate quality - 80% JPEG quality is usually sufficient
- Crop unnecessary areas - Remove parts of the image you don’t need
After uploading
- Check the size comparison - Review optimized vs. original sizes in Media Library
- Monitor page speed - Use tools like Google PageSpeed to verify improvements
- Consider further optimization - Use URL transformations for responsive images
Tools for pre-upload compression
| Tool | Best For | Link |
|---|---|---|
| TinyPNG/TinyJPG | Quick web-based compression | tinypng.com |
| Squoosh | Advanced options, comparison view | squoosh.app |
| ImageOptim (Mac) | Batch processing | imageoptim.com |
Performance impact
Typical improvements
| Metric | Typical Improvement |
|---|---|
| Image file size | 30-70% reduction |
| Page load time | 20-50% faster |
| Bandwidth usage | Significantly reduced |
| Mobile performance | Greatly improved |