Images are such an important part of any website, you put all that effort into layout, content and brand and then upload some pretty massive images and wonder why your website scores a 50/100 for performance. In this article we’re going to be looking at different ways to optmise your images before you upload them to your website.
I would emphasis at this point that you shouldn’t start with images that are 10 Mb in size and because they load fast on your computer doesn’t mean they are going to fast on your target audience.
You might be also thinking why Jason are you giving away some of your secret sauce. Well, most of my local competitors are using WordPress and different forms of image optimisation but I do find frequently that most don’t even bother with WEBP format. I love the town I live in and regional Australia so I want to see everyone have awesome sites built under best practice methods.
Your going to learn in this article some amazing insights that will blow you away that are in my my workflow. It’s important here to note that this article is for the web designer, web developer and not necessarily for the customer. I have no doubt you will adopt one or two of these for yourself regardless though. The purpose of this article is a general overview though and not a though-rough working of each option. If you want more detail please let me know by commenting on the video and I’ll do up some separate videos. If your a client focus on the local options as these are easy enough to install and use and get great results out of.
The next thing to consider with the requirement to optimise your images is where are you in your journey with your website. The choice of option could change depending on if your about to build, just maintaining or just looking to see how you can make your currently slow site faster.
We’re going to look at optimising images locally, leaving it up to a system like SquareSpace or using one of three plugins to optmize your images. Your goal here should be to get your images into the webp format at a size that performs well and still looks amazing. For this reason in the article I focus on lossless conversion or using the highest quality.
Local options to optimise:
- ImageOptim (JPG/PNG Only)
- PhotoBulk
- Automation of jpg to webp with Hazel and brew
- Affinity Photo
Remote Plugin & SaaS Options
- EWWW
- ShortPixel
- Litesped
- SquareSpace
How can I tell what format my images are on my website?
Visit your site in Google Chrome and right click to inspect. Go to the Network tab and find one of your images in the list. It should say under the type column, jpg, png or webp. Confusing is sometimes if your images have an extension of jpg. Click on the asset in the list and click the “headers” and you will see under the label content type: webp or jpg.
A real image optimisation example
We’re going to focus on using the image below as an example to resize an optimise across all of these options and to get something in like resolutions and lossless formats. The idea is to make things as simple as possible out of the box when using each what is the best and what is a waste of time.
Image Optim – is great when it comes to lossy compression as a drag and drop bulk compression tool. There’s plenty of optons here to amp up the quality and to leave or keep EXIF and META information. If you do choose to keep your quality 100% you’ll save 300Kb on the above image. Not great but remember it’s 100% lossless maintaining quality which isn’t always necessary or even noticable. If yo choose to drop this by just 10% your image goes down to 719Kb. Wow. Free to download
Photo Bulk – is an amazing bulk editor which gives you far more options to both optimise and resize your images quick and easily. Using a 90% lossy compression here resulted in an image 2121px wide 1.7Mb in size.
Affinity Photo – If you have more time and skill to optimise your images Affinity Photo might be the best option to give you some advanced control over your output and you can still optimise in bulk which is awesome. With some default options same sizing as above we ended up with a lossless compression and image of 687Kb in a webp format. Most importantly here we’ve gone to webp which is what Google will prefer.
Brew webp from jpg + Hazel – This is an extremely special option for local conversion and compression. It’s a post on it’s own but basically what this does for me is I copy a jpg file into a folder and it get’s automatically converted webp ready to optimise. I don’t need to do anything with any program, just copy past into a folder and it’s done ready to upload. If you’re interested in this option let me know and I’ll give you the applescript and directions on how to set this up with Hazel. With this option I end up with a file that is 454Kb. So far the best and still maintaining resolution and lossless options. Super cool
Remote & Plugins Options
SquareSpace and optimisation comparison
Let me start with SquareSpace, it’s super easy to upload your jpg images and what’s cool with this is that it often will resize to the sizing your using automatically. For example if you’re placing an image in a space that is only 500px then it won’t put htat 2048px image in unless you provide it with a full container image.
Sometimes this is taken care of by SRCSSET on WordPress anyway but let’s just focus on the one size. 2048px in a JPG format. Important to note that it does not conver it to WEBP and uses the legacy format. Image size ends up at 731Kb. This is our worst option so far and goes along with the overall theme in the system that they appreciate customers money, making every one a web designer instead of doing things the right way. Best practice is not a priority here and therefore two sites the same, on the same url, one with SquareSpace the other with WordPress. WordPress will always win. Sorry, non-technical designer types you’ll need to work on your skills.
It doesn’t stop there either, any web developer who knows about Google Core Vitals can tell you that the first image that is painted to a web browser needs to be handled a little differently to the rest. By default SquareSpace will not set the fetchpriority to high, it will not use eager loading and it will not use local non-cdn verions of the image. There are also no options to make it to as far as I can see. Add to this code bloat with it’s overly tagged HTML and heavy javascript and you’ll never use the system again.
WordPress Plugin Options
EWWW Image Optimiser
Example Site: https://training.getleads.au
EWWW is owned by WP Engine who are a major competitor in the web hosting space. Iv’e used it for many years with and without a CDN and find it work well while pairing with Lightspeed CDN. I really don’t rate their additional javascript and html optimiser they try to package with the plugin called SWISS. It’s overly complex and as far as I can tell doesn’t have profile options to save and reuse on other sites.
Using EWWW the image above was optimised down to 325Kb with the exact same resolution and webp style setup. It’s interface isn’t quite as nice as some of our other competitors but it is the smallest compression noting that it does have a default 90% optimisation. This is about half the size of our SquareSpace jpg and if setup prior to your site being built it will continue to do it’s optmisation without you neeeding to do anything. You can use the optimzer for free but they also have montly plans or if you keep an eye on Appsumo they often have a deal come up will include their CDN.
Shortpixel Image Optimiser
Example Site: https://training3.getleads.au
I feel like this is the cheapest, nicest interface with the most flexibility. It’s a developer pleaser but unfortuantely out of the box didn’t compress our image quite as well as EWWW. 699Kb is the size we ended up with but as far as I could tell there wasn’t an option to make it 90% same as EWWW and if it did then maybe we’d end up with a slightly better number.
Best thing about ShortPixel is you can buy an LTD for $30 to include the CDN.
Lightspeed Image Optimiser
Example Site: https://training4.getleads.au
Lightspeed is is my go to for overall optimisation, unless you connect the site to the quicCDN I wasn’t able to optimise my images. It’s free to signup for Quic so it’s our cheapest option but there are some limits on images before you need to start buying credits. These get uploaded and downloaded as optimised. The configuration is quite technical but it is similar in alot of ways to our plugins above. I tried to keep these as much as possible as default and ended up with an image size of 558Kb.
For me it’s the best option for caching, optimising javascript and css but use one of the other options above to get the best speed results for your images.
Arguments against Webp and conclusion
I find this a bit of a joke really, Microsoft IE from 2012 doesn’t support Webp. 12 years old, hmm, I wonder what percetnage is out there and if we really care for that .00001% of users enough to not have a fully optimised site. Squarespace you keep on supporting that format with your site-builder from the early 2000s.
While you might be reading this and say well really what does it matter, Jase, most users don’t care. It’s about the design, the look, the feel, the functionality. It’s about getting a client to do something and influencing them through the psychology of content strategy. What does it matter if the site is 1 second longer. Well that’s a second longer than your competitor and accumulated over the entire site will damage your performance scores. You should care, you should always strive for best practice and to have the most performant site possible. If your site takes longer to load you don’t even get to your beautiful design.
My recommendation is you use either Shortpixel or ewww as part of your blueprint for new websites or transition to one of these and do a bulk optimise. Lastly though I really love optimising my images locally with the brew and Hazel tool and by doing so when you view your images in the Chrome developer window it makes it a little easier to determine which image is jpg or webp.
If your a client and don’t want to know anything about plugins then I’d recommend you engage Get Leads for your next website build. If you just want to make sure your doing everything right moving forward I will write an article on the Hazel conversion of jpg images to webp. This is amazing game changer for me and I think should be part of any web professionals workflow. As it’s all local it’s easy enough to setup and use and you can use it for organising other files and even OCR on some files to move them into folders.
