Optimizing Images in WordPress
When doing WordPress performance tuneups for clients, two of the most common problems I see that cause slow page loading are related to images: unoptimized images and scaled images. These problems are actually pretty easy to fix, but they’re usually not aware of why uploading huge images is an issue in the first place. What do ‘unoptimized’ and ‘scaled’ mean?
Let’s start with ‘scaled.’ If you’re going to display an image no larger than 1000px wide, there’s no reason to upload a photo that’s 5000px wide. I see this a lot. The bigger image is a much larger file than is necessary. If you have 500 images on your site and all of them are 5000px wide but displaying at a maximum of 1000px wide, WordPress is scaling your images down for you, but you still are loading the huge version of the file each time it’s displayed. That’s a whole lot of extra load time required to handle your photos, meaning your pages will load more slowly than they should.
For example, the image below is 2472px wide and 1.35mb in size. That’s huge.
But I can do better: I won’t need to display this image any larger than about 1300px even if you click and open it in a lightbox. If I resave it with a width of 1300px and keep the image quality at 100, it immediately reduces to 554mb – a 59% decrease in image size. The new image is below.
‘Optimization’ refers to compressing images. For .jpg and .png files, you can compress them quite a bit without any noticeable loss in image quality. A compressed image is smaller in file size than an uncompressed image. Back to the example above, your 5000px-wide images are going to be enormous. If you compress them all, that’s a big savings in file size for page loading purposes.
Let’s look at the geese again. 554mb is a big improvement but we can still do better. If I load my scaled image to TinyPNG it’ll reduce the size to 373mb, another 34% reduction, with little noticeable difference in quality. The optimized image is below.
How to go even smaller? I’ll typically resize my images to no larger than 1024px for the web (especially my photos because it deters theft) or smaller when possible. And when I export from Photoshop I’ll set the quality to 60 or 65, which is fine for most web images.
How Do I Optimize and Scale Images?
Personally, I size my images in Photoshop and then use the free online tool I mentioned above, TinyPNG, to optimize JPG and PNG files before uploading them. This is the least costly option, if you have an image editor (free or paid).
If you prefer not having to do this yourself and are willing to pay, I usually recommend two plugins – Imsanity for scaling images as they’re uploaded (preventing the uploading of huge images) and one of the following for optimization: EWWW Image Optimizer or Compress JPEG & PNG Images. EWWW is more powerful and recommended when the EXIF data of an image needs to be retained, such as for a photography site. Compress JPEG & PNG Images is simpler to use and will also handle the scaling of images so Imsanity isn’t necessary.
Compress JPEG & PNG Images is free to use up to 500 photos per month, then they charge by the photo, $0.009 per image for the next 9,500. EWWW charges a minimum fee of $1 per month, and $0.005 per photo for the first 1,000 photos.
Optimizing Images Already On Your Site
Keep in mind that WordPress creates several copies of each photo (thumbnail, medium, large, full, and possibly others depending on your theme), so if you’re optimizing all the existing photos on your site (which both plugins will do) so if you have a lot of photos on your site, realize that you may have a fee for the first month. You also need to read the warnings and make sure you have a fresh reliable backup before bulk-optimizing existing images.
I’ve used Compress JPEG & PNG Images (which is owned by TinyPNG) on several client sites with good results. I haven’t used EWWW Image Optimizer myself for bulk processing but have been told by clients it does the job well.