Image optimization could really have its own dedicated course to cover everything (and there may be one in the future).
- What does image optimization mean?
- Two major steps to optimizing your graphics: dimensions and compression
- Image dimensions
- Resize your images
- Compression
- Compress in your graphics editor
- Compress using online tools
- Image dimensions
- My normal image export/compression for web workflow
- My alternative image compression workflow
- Some tidbits to keep in mind
In this lesson, I want to explain image optimization quickly and show you the “easy wins” to make sure you aren’t making the obvious mistakes that can drastically slow down your site.
What does image optimization mean?
It means optimizing images. 🙂
Joking aside, it really boils down to doing whatever you can to reduce the file size of the image to help it load more quickly for your reader.
In this case, there is actually more to do outside of WordPress. This is because there is work you should do to reduce the image size before you even upload the images to your site.
Two major steps to optimizing your graphics: dimensions and compression
Image dimensions
This is one that is easy for beginners to miss. If you find yourself taking cool photos and then uploading them directly to your WordPress site, you’re most likely devastating your site performance.
This is because modern smartphones and cameras take very large photos for maximum quality. I mean HUGE sizes. You don’t want to upload them directly.
Resize your images
Chances are the width of your website is around 900-1140 pixels. So you don’t want your images to be massively larger than that. It will only add size and your image will be “squeezed down” to fit the page anyway.\
WordPress does attempt to help you. When you upload an image, it will generate 3 additional images, so you’ll end up with: a thumbnail, medium, large, and full size:
- Thumbnail: 150x150px
- Medium: 300x300px
- Large: 1024x1024px
- Full size: the original
But you don’t want to rely on WordPress to resize. Instead, create a more manageable dimension when you save the image from within your favorite graphic editor like Photoshop, Gimp, or even an online tool like Canva.
This will save disk space on your host and improve performance.
Now on to the second thing: compression.
Compression
Compression means what you think it means: to shrink the file size of your images — preferably without a perceptible loss in quality.
Compress in your graphics editor
Most graphic editors will have tools to export at varying levels of compression. For instance, in Adobe Photoshop:
- When ready to export, select File > Export > Export As
- In the popup window, choose the type [jpg or png]
- If jpg, choose a quality percentage around 80% (but always check for defects — the lower the percentage, the smaller the file size, but more defects will appear)
Compress using online tools
Sometimes making all the perfect exports using your graphics editor is time-consuming. This is where tools like Compressor or TinyPng come in handy.
The make compression simple — just upload your image and download the compressed version.
My normal image export/compression for web workflow
When I’m working on images here’s what my workflow looks like. I use Adobe Photoshop as my main photo editor.
- When I’m done crafting the image, I’ll resize dimensions
- Then I’ll review to make sure the resized version is what I want
- During export I’ll compress jpg at about 80
- Then I’ll upload the image to Compressor to let it smush the photo some more
- Then I download, rename the file, and upload it to my website
My alternative image compression workflow
If I’m working fast, in a hurry, or editing from mobile I’ll let my Litespeed cache plugin take care of the compression.
- When I’m done editing, I’ll resize
- Then I’ll upload the image directly to my site
- Then trigger Litespeed to optimize images
That’s it. Done.
Honestly, the more I use Litespeed’s image optimization, the less I’m likely to use Compressor going forward. It’s very good — and can save a ton of time (especially when you’ve connected with Litespeed’s quic.cloud service).
Some tidbits to keep in mind
Unless you’re creating a photo gallery, try to limit the heavy use of images. Perhaps use CSS gradients with small graphics to create a great overall look?
Don’t forget to use lazy loading — especially if you have long articles where a lot of images are outside the initial view area when the reader loads your page, but you should almost always be lazy loading images.
I don’t recommend image optimization plugins that try to perform the compression/resizing on your website. This is because it consumes your hosting resources and you don’t want to waste them on this.
Some plugins like ShortPixel do the compression/resizing work on their platform — it looks seamless to you. You upload your image in WordPress like you normally do and the plugin will send it over to their platform for compression and return it.
All behind the scenes so you don’t have to worry about it. That’s why I highly recommend ShortPixel.
If you’re lucky to be on a host using Litespeed web server (such as Closte), you should be using the impressive Litespeed caching plugin — which just so happens to have image compression built-in.
And the “good kind” of image compression like ShortPixel — where it sends your images to their server, does the compression, and brings it back (and it supports .webp format for even smaller images).
Take care,
