Appropriately sized and compressed images improve loading time, user experience, and SEO.
No one likes a slow website, not even Google! Images, and other media, often account for much of the load time on a website. Optimizing your images is one of the easiest ways to speed up your website. A lightweight website gives users a better experience, and websites that load fast are favored by search engines.
How to optimize images
This topic can actually get pretty in-depth, but for the purposes of this article we’re just going to look at this question from a high level. There are two things you need to do when adding images to your website:
- Make sure the image is the appropriate dimensions for the largest size it will ever been seen on your website
- Compress the images using your choice software
Sizing your images
Using a graphics program you can scale your image to the largest size it will be displayed on your website (typically the desktop layout as opposed to mobile or tablet sizes). By sizing the photo to the appropriate size, you wont have to add extra code that will resize and/or crop the images during loading (some page builders will do this automatically).
If your image is never going to be more than 700px wide on the screen, then there’s no reason the file should be 800px wide.
There are hundreds of plugins and online services that will compress your images for you (both free and paid). In most cases (unless you have a very high volume of images) the free solutions should be all you need.
If you want to use a plugin try ShortPixel or Smush. Both are available for free in the WordPress repository and have a great reputation. Either solution will scan your media library and compress the images you’ve already uploaded as well as compress any new images you upload after the plugins are activated.
If you want to compress before you upload (and not add another plugin), Optimizilla is a great choice. Their free service allows you to upload and optimize up to 20 images at a time and gives you some fine-grain controls over how much compression you want to add.
As you can see in the image below, Optimizilla was able to reduce this file’s size by 60% (from 20kb to 7.8KB) without any noticeable quality loss.
Saving just over 12kb on this one image won’t mean much, but if you’re able to reduce all of your images by 60% that could add up to a lot of savings!