As the saying goes, images speak a thousand words.
They’re one of the most effective ways to turn lifeless content into something engaging.
And they have the power to turn a basic page into something functional and eye-catching thanks to WordPress gallery plugins like Max Galleria.
But here’s the challenge:
Images increase page sizes so they take longer to load.
So, the longer that a page takes to load, the more your sales will decrease. And, as this study shows; slow load times cost you money.
Here’s the good news:
In this post, you’ll discover a number of ways to optimize images and speed up your website.
Some are easy to implement and others take a little bit more effort. Either way, you’ll find ideas you can put into action. So, whichever WordPress theme you use, it’s worth considering these image optimization tips:
Image optimization for WordPress
Choose the right image format
Image formats have different strengths. JPEG works best with photographic images. PNG is the better choice for graphics, line drawings, and other non-photographic images.
JPEG images can be used in a couple of basic types: progressive JPEG and baseline JPEG.
Most of the JPEGs on the web are encoded as baseline images, which isn’t always the best choice. Progressive images are encoded with multiple layers that download progressively: users will receive a low-quality image quickly and it will gradually enhance until it reaches full quality.
Progressive images aren’t actually any smaller than baseline images, but they give the impression that they load faster, providing a better perceived performance.
Most decent image editing applications can save progressive JPEGs.
Size before uploading
The key mistake that a lot of people make is to upload one large image and have the browser resize it. That approach wastes bandwidth and it’s particularly bad for mobile users.
It’s better to upload an appropriate size in the first place.
It’s not necessary to load every image on a page immediately.
Only the “above-the-fold” images need to be displayed at first. Lazy loading of images loads only those images that are about to come into the browser window: as the user scrolls through the page, images are loaded as they are needed.
This doesn’t make the page load any faster overall, but as with progressive JPEGs, it can reduce the perceived load time.
BJ Lazy Load is an excellent lazy loading plugin for WordPress.
Content distribution networks
All the on-site optimization in the world won’t help you to deliver files faster to geographically distant users.
For that you’ll need to use a content distribution network, which place images and other files on servers all around the world. Images are then served from the nearest of these servers, known as edge nodes. A content distribution network can substantially increase the speed of page loads.
One the most straightforward ways to integrate a content distribution network with your WordPress site is a caching plugin like W3 Total Cache. It integrates with popular CDN providers.
Just using a CDN could speed up your website by at least a few seconds (most likely a lot more for users located further away from your web hosts server) and improve user experience for visitors from all over the globe.
For more on CDN’s, check out our beginner’s guide.
Responsive web design makes it possible to provide a high-quality user experience on devices of different sizes without having to maintain a dedicated mobile site, but when it comes to images, RWD has a limitation.
Often, responsive sites will serve the same image size to different screen sizes, which means a 4-inch iPhone has to download the same image as the desktop.
While this used to be a huge problem with WordPress, It isn’t anymore. Since version 4.4, responsive imagery has been rolled into the WordPress core. Awesome!
Image optimization plugins
One of the best image optimization plugins I’ve come across for WordPress is EWWW Image Optimizer.
In spite of the silly name, it’s an excellent plugin for automatic image optimization and handles both the optimization of newly uploaded images and the optimization of images that are already part of the media library. It’s capable of optimizing JPEGs, PNGs, and GIFs, including the creation of progressive JPEGs.
An alternative is the WP Smush.it plugin, which performs lossless compression of JPEGs by removing metadata and optimizing compression.
You can also use free web apps like TinyPNG.
The web is highly visual. And tools like Visme make it extremely easy for those of us without design skills to create beautiful images.
But, as great as the images we create are, we need to ensure they are optimized because page load times matter. For example; images take up around 63% of the bandwidth used by modern websites. They’re a quick win to optimize our sites!
By implementing the advice we’ve discussed here, you’ll be able to reduce the impact of image-heavy pages without having to compromise your design.
This isn’t just important for user experience, page load times directly impact how much money your website will make.
Studies have shown that just a 1 second delay in page load times could reduce conversion rates by 7% [source].
If you’re ready to take your images a step further, be sure to optimize them for search engines.This guide by Akshay Hallur explains how.