Blog
Images are the heaviest part of most websites. An unoptimized page might load 8-15MB of images. The same page, properly optimized, loads 1-2MB with identical visual quality. That difference is 3-5 seconds of load time, which directly affects your bounce rate, conversion rate, and Google ranking.
You do not need expensive plugins, CDN services, or developer tools. A browser-based compressor and converter handles everything. Here is the complete optimization workflow.
Every image on your website should go through these three steps before upload:
This is the biggest win most people miss. If your website displays an image at 800x600 pixels, there is zero reason to upload a 4000x3000 pixel file. The browser downloads the full 4000px image and then shrinks it to 800px for display. You pay for 4000px of bandwidth and storage, but only 800px of quality.
Use the Image Resizer to set the exact pixel dimensions your layout needs. Check your CSS or site builder to find the actual display width. Common targets:
For Retina/HiDPI screens, serve 2x the display size (e.g., 1600px for an 800px display slot). This keeps images sharp on high-density screens without going to the full camera resolution.
After resizing, compress the image using the Image Compressor. Set quality to 75-85% for photos. The file size drops 50-70% while the image looks virtually identical at web display sizes.
| Quality Setting | File Size vs Original | Visual Difference | Best For |
|---|---|---|---|
| 90-100% | ~70-80% of original | None visible | Hero images, portfolio pieces |
| 80-85% | ~30-45% of original | None at normal viewing distance | Most website images |
| 70-80% | ~20-35% of original | Very slight softening, fine for small images | Thumbnails, grid images, backgrounds |
| 60-70% | ~15-25% of original | Noticeable on close inspection | Decorative images, texture backgrounds |
| Below 60% | ~10-20% of original | Visible artifacts, color banding | Not recommended for web |
After resizing and compressing, convert to the optimal web format:
Compress your images for web. Free, no signup, processes locally.
Optimize Images Now →| Image | Before Optimization | After (Resize + Compress + WebP) | Reduction |
|---|---|---|---|
| Hero banner (camera photo) | 4.2MB (4000x2667 JPG) | 180KB (1600x1067 WebP @ 80%) | 96% smaller |
| Blog post photo | 2.8MB (3000x2000 JPG) | 120KB (1000x667 WebP @ 80%) | 96% smaller |
| Product thumbnail | 1.5MB (2000x2000 PNG) | 45KB (500x500 WebP @ 75%) | 97% smaller |
| Logo with transparency | 800KB (1200x400 PNG) | 35KB (400x133 WebP) | 96% smaller |
| Background texture | 3.1MB (3840x2160 JPG) | 95KB (1920x1080 WebP @ 70%) | 97% smaller |
These are real-world numbers. A page with 10 unoptimized images might weigh 25MB. After optimization: 700KB. The page goes from a 5-second load to under 1 second. Google rewards this with better ranking. Users reward this by not bouncing.
Google uses Core Web Vitals to evaluate page experience. Images directly affect two of the three metrics:
Running Google PageSpeed Insights on your site will tell you exactly which images need optimization and how much you can save.
| Format | Transparency | Compression | File Size | Browser Support | Best For |
|---|---|---|---|---|---|
| JPG | ✗ No | Lossy | Small | ✓ Universal | Photos without transparency |
| PNG | ✓ Yes | Lossless | Large | ✓ Universal | Graphics, logos, transparency (desktop/email) |
| WebP | ✓ Yes | Lossy or lossless | Very small | ✓ All modern browsers | Everything on the web (photos + transparency) |
| AVIF | ✓ Yes | Lossy or lossless | Smallest | ~Most modern browsers (not all Safari versions) | Cutting-edge sites targeting newest browsers |
| SVG | ✓ Yes | Vector (scalable) | Tiny for simple graphics | ✓ Universal | Logos, icons, illustrations (vector only) |
For 2026 websites: use WebP as your default format. It handles photos and transparency, produces the smallest files, and works in every current browser. Fall back to JPG/PNG only for email, print, or apps that do not support WebP. If you want to push the envelope, AVIF is even smaller but support is still catching up.
Optimize images before uploading to the Media Library. WordPress generates multiple sizes automatically, but it starts from whatever you upload. Upload a 4000px photo and WordPress creates 4000px, 1024px, 768px, and 150px versions, all uncompressed. Upload a 1600px pre-compressed WebP and every version is efficient.
Plugins like ShortPixel and Imagify can auto-optimize on upload, but they charge per image after the free tier. Pre-optimizing with free browser tools avoids these costs entirely.
Shopify auto-converts uploaded images to WebP for most visitors. But it starts from your uploaded file. If you upload a 5MB photo, Shopify converts it to WebP but the quality starting point is the bloated original. Pre-compressing to 80% quality before upload gives Shopify a better source to work with.
Most site builders apply some optimization but cannot resize your images to the exact display dimensions. You need to do that yourself. Check the actual display width in your layout (right-click > Inspect Element on Chrome), resize to 2x that width for retina support, compress, and upload. We covered WordPress and Shopify workflows in more detail in our batch processing guide.
Each image takes about 30-45 seconds to process. For 20 images, that is 10-15 minutes. For a site with hundreds of images, check our batch processing workflow. The time investment pays back in faster load times, better Google ranking, and lower hosting costs.
Start optimizing. Compress, resize, convert to WebP — all free.
Optimize Images →