Why do I have so many images on my site?
The short answer is "resizes". WordPress creates 4 resizes by default for every image you upload to your site. Your theme, or other plugins you have installed, may add additional sizes to be created for each upload. So while you might look at the Media Library and think you only have 1,000 images, it is likely that you have at least 5,000. As a rough estimate, you can simply multiply the number of resizes by the number of images listed in the Media Library. To find a complete list of resizes, check the resize settings for the EWWW Image Optimizer. You can run a Scan from the Bulk Optimizer to find out how many total images need to be optimized. Running a scan doesn't use any credits, so you can safely run it at any time to count the number of images you have left to optimize.
What to do when the resizes are out of control?
As the video describes, there are two purposes for the resizes that WordPress generates:
- Convenience: by automatically generating various resizes when you upload an image, you no longer need to manually scale the image prior to upload. You can simply upload your image, and insert whichever size is appropriate into your content. And if none of the sizes quite fits your theme or layout, then you can adjust the dimensions of those sizes on the WordPress media settings.
- Responsive design: WordPress 4.4 introduced the new srcset attribute, which lists various sizes of an image alongside whichever image you chose to insert in your post or page. This allows the end-user's device to choose the most appropriate size, whether it is a phone, tablet, laptop, etc.
There are 4 sizes generated by default with WordPress, but themes and plugins can add more for various layouts, eCommerce grids, galleries, widgets, etc. These can quickly add up to 10, 20, or even 30 resizes per upload. If you're not sure which sizes are being used on your site, it's time for some investigation.
The first task, is to think through all the different layouts on your site, and the various widgets that you are using. Do you have a blog page? Do the individual blog posts look different than the main blog listing? Do your pages look different than your posts? Do you have custom content, like testimonials or services that might use a different layout? Do you have a store on your site? Is there a grid view to display your products? Do the individual product pages have a special layout? Lastly, look through all your widgets, and see which ones use images.
Once you have a good feel for all the different layouts on your site, it is time to find out what images they use. It's easiest to watch the video and see how to do this, but the short version (using Google Chrome) is this:
- Visit a page or two for each unique layout.
- Right click on every image that appears to use a unique size on the page, and click Inspect.
- Hover over the image url/address in the source, and see what size it is.
- Make a note of every unique size you encounter.
- If an image has the srcset attribute, with multiple images listed, look for the dimensions of each of the images listed in the srcset.
When you have a complete list of all the sizes used on your site, there are two things you can do:
First, you might find you want to adjust the dimensions for the default WordPress sizes to make them fit your page(s) better. Then, you'll want to visit the EWWW I.O. settings page, click on the Resize tab, and look through the full list of registered sizes. Any that you could not find on your site, can be disabled. If you disable a size from being created, and you find out you need it later, you can run a plugin like Regenerate Thumbnails to get those sizes back. If you just disabled a size from being optimized and find you need it optimized, simply uncheck the appropriate size in the advanced EWWW I.O. settings, and then run a Bulk Optimize. EWWW will scan through your images, and find the new size(s) that you enabled so that they can be optimized.