How To Optimize Images for WordPress
Optmizing your images is very important, they are what makes you site look nice but are also a huge part of why many sites are slow to load. Reducing your image file size by 20-30% or more can make a huge different to page load speeds, saving 10KBytes on 10 images is 100Kbytes saved already..
There are in effect two types of compression that can be used:
- Lossless – making the file smaller while keeping it 100% identical to the original
- Lossy – throwing away the information that is there but not really needed to make the image recognizable (much like how an MP3 makes a CD smaller).
Now there are two ways we can go about optimizing our images:
Guess which one we prefer? Automatically of course! However going 100% auto is not a good idea, the best thing you can do is at least partially optimize the images yourself first and then go for the automatic option. So lets briefly cover manually first, and then get on to the automatic part.
Quick Guide to Manual Image Optimization
The idea here is to cut the image file size as much as possible without any major impact to the image quality, and we do that a number of ways:
Resize – resize your image so it is the size you want it on your WordPress page, there is no point having a 1920×1080 image and then only showing it as 480×270 on your site as that results in an image 16 times larger than you need and thus a huge amount of wasted data. WordPress will actually resize you image for you when you upload it, the sizes depend upon your theme, but this is not an optimal solution so it’s best you just choose the right size first.
JPG/PNG/GIF – pick the right format for your needs. Generally speaking it goes like this:
- Photo = JPG
- Icon/Diagram = PNG
- Animation = GIF
Although there are some crossovers, sometimes a diagram with lots of colours will work better with JPG for instance.
Each image type has its own particular merits, PNG-8 uses a smaller colour palette, but can do transparency like GIF, and so can often produce smaller images than JPG which tends to product more ‘realistic’ images. The best thing you can do is have a play about, lots of image programs can show you multiple variations of your image so you can view what it will look like a experiment with settings, here in the Zont logo:
Now obviously some of what we could see is lost, after all the above is an image of an image, but you should still be able to make out several key factors.
- The top left is the original, and in its raw state the file will be 1.23mb in size which is 2.5 times the size of our entire front page. Obviously such a large image would slow down any website massively.
- Top right is PNG-8 limited to 64 colours and a particular colour palette, but you can see there is a lot of banding in the blues, noise around the letter edges and though hard to make out the shadow under the magnifying glass is almost completely lost. However the file size is down to 11.89K
- Bottom left is PNG-8 again PNG-8 but this time 128 colours and a difference colour palette. We can see that the banding is mostly gone and the edges are better, in addition the shadow is now pressent. Given this image will only be about 1 inch big in reality none of these will really matter. Image size is no 12.71k, slightly up on the previous PNG but the quality is much better.
- Lastly bottom right we have JPG, we have compressed this down to low quality to try and get it near to the PNG sizes but its still 30% larger at 16.84k. We have also lost the transparency on the background, so if we wanted to use JPG we would need to make the background match the background of the site manually.
Obviously from these No.3 would be the winner, it is a small size with minimal lost of quality over the original.
Compress – if your chosen type is JPG you can set the quality score to a lower number for web use than you typically would for print. While a quality of 40-60 would be bad for printing it’s often more than enough to your site.
Automatic Image Optimization for WordPress
Before you do anything automatic to your site make sure you have a working backup. If you are not sure about backups talk with your hosting provider. Backups are an essential part of any Internet Marketing business!
In the past we would use a program from Yahoo called Smush.It, they stopped working on this a few years back now and it sat unloved for a while. It has since been picked up and put back in to use under the name WP Smush, and you can of course take a loot at that option too.
However during that downtime we moved on to bigger and better things.
EWWW Image Optimizer is the tool we use here on Zont SEO, and on most of our moneysites, and it’s a very easy to use yet powerful (oh and free) plugin. Now word of warning it can be pretty intense in the way it works, after all there is quite a lot going on here, so if you are on a really cheap shared hosting package you might find that it does not work for you. There are two areas where it is likely to go wrong:
When you install it the program will tell you some components are missing, these are server side issues and you would need to talk with your host about that.
When you run it your host cuts you off, very cheap hosting has limited on the amount of resources you can use and it is possible you would go over those limits. You can try and limit this impact though by running a pause between each image.
If you still have issues there is one last option and that is EWWW Image Optimizer Cloud, this does the same thing but rather than processing your images on your server they are sent to a different server, processed and then sent back to you. It is a little slower, but it will work on any and all hosting as almost no local resources are used.
I would suggest installing the standard version for now, it actually includes access to the cloud features if you need them now and then. What works for many people is to do the initially compress using the cloud, as there will be lots of images from that past, but then for all future ones have them compressed locally. Cloud access costs from $0.002-0.005 per image depending how many you process. If you want to do some of the more advanced lossy reduction methods, in particular if you skipped the manual step above, then you also have to pay.
Once you have installed the plugin, and confirmed it is working by opening the plugin from the WordPress Settings menu:
If there is anything wrong then stop right now, get on to your hosting support and see if they can help you out. If they say no then the cloud version is your only hope, this is not something we can help you with as it’s down to the way your host sets up their servers.
Do note however that while we have several things marked as ‘missing’ that is not important as alternatives are installed, you can see it says ‘only need one of these’.
If you are using the free version then you can pretty much run it as is, the compression it will do is all lossless so your images will stay the same to the naked eye. There are two things you might want to look at though.
PNGout – this is disabled by default as it is not open source and it CPU intensive. If you have your own VPS or dedicated server and you want to squeeze the most out of your PNG you can scroll down to the bottom of the ‘Advanced Settings’ tab and untick this box to enable it. You will then be prompted that your copy of EWWW needs attention and asked to install the pluggin needed for PNGout to work properly. At the top of the ‘Advanced Settings’ page the second option is for ‘pngout optimization level’ if you are on a dedi or an over powered VPS then you can probably change that to Level 0, otherwise leave it as is.
‘enable GIF to PNG conversion’ – you will find this setting right at the bottom of the ‘Conversion Settings’ page, it is off by default, and this will convert all your old GIFs to PNG which in most cases will be smaller. The exception being animated GIFs which can’t be converted, though you could manually optimize these of course.
Most of the other settings are only needed if you have not manually setup your images correctly in the first place, i.e. converting JPG to PNG if you have used the wrong format originally. I strongly urge you to do this correctly, manually, at the very start and not rely on the program to do this.
Doing It 100% Automatic Using The Cloud
If you really can’t work with images manually then I suggest you pay for the API access in EWWW and then configure the Cloud Settings with the API key they give you and options as follows:
Then Basic Settings as follows:
You can optionally remove the metadata too.
Again though only do this if you really can’t at least partially optimize your images by hand first, it is much better to do it yourself.
Optimizing Your Images with EWWW
If you have set things up as we have done above, either with or without the cloud, any new images you upload to your site will automatically get compressed. Either lossless compression if you are using the free version without format conversion or lossy if you have the API/Cloud setup and have enabled those options. You will notice a small delay any time you add an image to your media folder, for us its about 2 seconds but don’t worry if it’s a bit longer, in particular if you have pngout option turned on.
However you probably have hundreds of images already on your site, as well as lots of images that are part of your theme. Thankfully there is a quick and easy way to get these compressed too.
In your WordPress Menu click on Media and select ‘Bulk Optimize’
Here you can optimize all the existing images you have previously uploaded, as there is really no rush I suggest you add in a small wait between images of a second or two and then click ‘Start Optimizing’ and let it do it’s business:
Once that is complete you can go one step further and optimize all the other images your WordPress theme uses, you will see the settings under ‘Optimize Everything Else’ just select ‘Scan and optimize’ and let it do its work again. If your theme gets an update in the future then you will need to run this again and select ‘fore re-optimize’ at the top.
Lastly – A Few More Options
This page obviously only touches the tip of the iceberg when it comes to optimization, however if you actually follow what was said above you will be 95% there and that’s better than most people out there. One of the biggest mistakes we see when reviewing sites are huge images, people are often amazed when we email them back an image that looks identical but is 10x smaller than the original they were using.
There are also other ways you can look at to speed up your image loading, as always one of the best is to use a CDN to deliver all your static content. You can do this yourself using plugins like W3TC and a CDN from the likes of Amazon (Cloudfront) or MaxCDN. The cost is tiny, we have used Cloudfront for years now for images and videos and I still don’t think it has cost us over $100 all in. If that’s too complex then going with a free option like Cloudflare, which is integrated with many hosts, will also help. We use Cloudflare on just about all our sites, it is built in to Siteground for instance and in fact is cheaper bought through them than purchased directly. Cloudflare also includes an option called ‘Polish’, though you have to pay for this, which can help optimize your image load times too. However given it’s cost the methods above are better value.
One word of warning if you use a CDN and optimize your images, it may take a day or two before your cloud refreshes your static content and starts using the optimized images so don’t panic if you don’t see improvements right away. You can purge your cloud, but we have always just let it refresh on its own.
As always if you have any questions please drop by the forum and ask.
P.S. Don’t get to caught up in trying to save that last byte, the process we have highlighted above is very short. The first time you play with your image editor to look at the various settings it might take a little longer, but after that it will add only a few seconds to the process.