Plugins are the most common answer to WordPress image optimization — but they're not the only answer. The no-plugin pre-upload workflow using a free online tool like ConvertiImage is actually the most effective approach for controlling image quality at the source. When you compress before uploading, WordPress generates all its derivative sizes from an already-optimized original — meaning every size it creates is proportionally smaller. This guide walks through the complete 5-step wordpress image optimization workflow, with specific recipe cards for each common image type.
Why Pre-Upload Compression Is Better Than Plugin Compression
Most site owners discover image optimization after the fact — they've been uploading uncompressed images for a year, their media library is 2GB, and now they install a plugin to fix it. The plugin works, but it's compressing derivative sizes (thumbnail, medium, medium_large) that were generated from an uncompressed original. The compression quality is a step removed from the original.
Pre-upload compression works differently: you compress the original before WordPress ever sees it. WordPress then generates all its derivative sizes from your already-optimized original. The result is better quality at equivalent file sizes, because every derivative is generated from a clean compressed master rather than a compressed derivative of a compressed original.
The 5-Step Pre-Upload Workflow
1Export or Prepare Your Image
Start with your source file — the highest-quality version of the image before any compression. If you're working from a camera, export from Lightroom or Capture One at full resolution JPEG (not RAW). If you're screenshotting content, take the screenshot at your monitor's native resolution.
Critical: make sure you're satisfied with the content and any edits before compressing. Re-editing a compressed image reduces quality further. Finalize crops, color corrections, text overlays, and branding before running compression.
2Open ConvertiImage and Upload
Go to convertiimage.com and select the Image Compressor tool (or Resize tool if you need to change dimensions). Upload your image by clicking the upload area or drag-and-drop. For batch processing — multiple images at once — drag all files simultaneously onto the upload area. ConvertiImage processes up to 20 images in parallel, making it efficient for WordPress media library updates.
3Resize to Correct Display Width
Use the resize settings to set the maximum width for your image's intended use:
- Blog post body images: 1200px maximum width
- WooCommerce products: 1000×1000px (square, cropped)
- Page hero banners: 1800px maximum width
- Sidebar thumbnails: 400px maximum width
- Blog featured images: 1600px maximum width
Always enable "Maintain aspect ratio" to prevent distortion. There's no reason to upload an image wider than the widest it will ever be displayed — WordPress can't make the image look better than what you upload, and every extra pixel is wasted data.
4Set Compression Quality and Output Format
For JPEG output: Set quality to 80–85%. The 80–85% range is the sweet spot where file sizes drop 60–75% from uncompressed while quality is indistinguishable to the human eye. Below 80%, compression artifacts become visible at product edges and in detailed textures. Above 85%, file sizes grow without visible quality improvement.
For WebP output: Set quality to 80%. WebP at 80% quality is visually equivalent to JPEG at approximately 85%, while being 25–35% smaller. If your WordPress theme and server support WebP serving, this is the best format for 2026.
Avoid uploading BMP, TIFF, or PNG for photographic content (photos with gradients, complex colors). PNG is best reserved for logos, icons, and images with large flat color areas. For photographic content, JPEG or WebP is always the better choice for file size.
5Download and Upload to WordPress
Click Download to save your compressed image (or Download ZIP for batch results). In your WordPress admin, go to Media > Add New and upload the compressed file. WordPress will generate its thumbnail, medium, and medium_large derivative sizes from your optimized original — all derivatives will be proportionally smaller since they're scaled down from an already-compressed master.
After uploading, use the image in your post or page as normal. Check the final rendered page with your browser's developer tools (Network tab, filter by Images) to confirm the actual file size being served to visitors.
Recipe Cards by Image Type
Blog Featured Image
- Resize to: 1200px wide (height proportional)
- Format: JPEG
- Quality: 82%
- Target file size: 80–200KB
- Why: Featured images appear in blog index pages, social shares, and the top of posts. They're the most-viewed image on your site — quality matters but so does fast loading.
WooCommerce Product Image
- Resize to: 1000×1000px (square — WooCommerce crops product images to square)
- Format: JPEG
- Quality: 85%
- Target file size: 100–250KB
- Why: Product images are zoomed by shoppers examining detail. Slightly higher quality (85%) preserves fine product textures. Square format prevents WooCommerce from making awkward crops on product grid pages.
Page Hero Banner
- Resize to: 1800px wide
- Format: JPEG or WebP
- Quality: 82%
- Target file size: 150–400KB
- Why: Hero banners span the full browser width — they need to look sharp on large monitors (1440px and above) and on Retina displays. 1800px gives sufficient resolution for 2x pixel density displays at 900px display size. Add a preload hint for the hero image in your theme's head to avoid LCP penalties.
Sidebar Thumbnail
- Resize to: 400px wide
- Format: JPEG
- Quality: 78%
- Target file size: 20–60KB
- Why: Sidebar thumbnails are small and never zoomed. Lower quality (78%) is perfectly acceptable here — the images are too small for compression artifacts to be visible. The file size savings are significant since sidebar images are loaded on every page.
Troubleshooting Common WordPress Image Issues
| Problem | Cause | Fix |
|---|---|---|
| Images look blurry in WordPress | Uploaded image width is smaller than the display width. WordPress can't upscale to fill the container. | Always upload at or above the display width. If the container is 1200px wide, upload at 1200px minimum. WordPress scales down, never up. |
| srcset not working correctly | WordPress generates srcset (responsive image sizes) from the uploaded original. If the original is too small, all srcset variants are too small. | Re-upload at the correct original size. Delete the old media library entry and re-attach the larger version to all posts using it. |
| WebP not displayed in some browsers or apps | Older browser or app doesn't support WebP. Or the plugin's WebP serving configuration has an issue. | If it's a browser issue: this affects less than 2% of users in 2026 — configure your plugin to serve JPEG as fallback. If it's a plugin configuration issue: check that your .htaccess or plugin settings include correct Accept header checking. |
| Images appear too large on mobile | WordPress is serving the full-width image to mobile visitors without responsive sizing | Ensure your theme adds width and height attributes to images, and that the srcset attribute is present. If not, update your theme or add code to your functions.php to enable responsive images. |
| Plugin compressed images but PageSpeed still flags images | Plugin only compressed existing sizes — new uploads are still uncompressed. Or plugin processed images but missed some file types (e.g., PNG). | Check plugin settings to ensure it's processing all file types including PNG and all derivative sizes. Enable "auto-compress on upload" in the plugin settings so new uploads are handled automatically. |
Related reading:
Complete WordPress image optimization guide 2026 — main hub
Why your WordPress site is slow because of images — 5 problems diagnosed
