Unoptimized images kill website performance. Images often comprise 40% – 50% of page size — more than other any type of element.
To give users the best experience, we need to automatically compress images so they load as quickly as possible, and re-size them to fit the viewing environment.
Optimole is the best way I’ve found to make that happen. First, an example . . .
Desktop Display
This original image was uploaded at 3,434 × 2,447 pixels straight from my phone. That’s way too big for even a large desktop monitor or 4k TV.
First, Optimole compresses files in the efficient WebP format which are about 25% smaller than typical JPEG files.
Then, Optimole re-sizes the image as needed to exactly fit the user’s viewport, meaning it fits the image to each user’s display regardless if they are using a TV, monitor, tablet, or phone.
Between more efficient compression and on-the-fly re-sizing, users get just what what they need, quickly.
At Optimole’s medium compression setting, this full-width image on a HD desktop display is just 161 KB — a massive 92% decrease from the original JPEG file size.
Mobile Display
When viewed on a phone (as simulated below by Chrome Dev Tools) Optimole re-sizes the image to exactly match the viewport width of a iPhone — 375 pixels. The image file now weighs just 18KB — a whopping 99% decrease from the original image size! Yet, it looks fine.
If Optimole detects a very slow connection, it will optionally reduce the resolution (within reason) to ensure the image is still viewable.
Losing the Duplicates
With the possible exception of certain edge cases, there’s no longer any need for WordPress to generate multiple sizes of each image — something it does by default. Why store all that cruft on your server? If your site has 100 images, do you really want to store 600+ duplicates in various sizes? Not me.
Before Optimole, this site automatically generated six different alternate sizes, highlighted in blue below. The files didn’t precisely match the user’s device, they ate up a lot of disk space, and backups took much longer than necessary.
It's Backup Time
As always, backup your site before taking the next steps.
With Optimole, all of these extra files become obsolete. So let’s eliminate them by adding a filter to WordPress. It’s really simple, just a line code that looks like this:
add_filter( 'intermediate_image_sizes', '__return_empty_array', 999 );
The second filter (below) disables the new WordPress feature that re-sizes huge images that might be uploaded straight from a camera. With Optimole, we don’t need that either.
add_filter( 'big_image_size_threshold', '__return_false' );
The easiest way to add these filters is with the Code Snippets plugin. Just install the plugin, create a new blank snippet, and paste in the code as shown above. In this example, I kept these two snippets separate in case I want to change something later. That’s it.
Optimole Setup
I won’t get into how to install or configure Optimole because everything is explained in their guide. Follow this quick setup guide. It’s straightforward and fast.
Conclusion
Optimole transparently optimizes images with no image-handling knowledge required.
Benefits:
- Speed: on-the-fly resizing dramatically trims page “weight”
- User Experience: the best image quality on any device or connection type
- Ease: once set up, it’s hands-off
In combination with the filters (above), only the original full-size image remains on the server, minimizing storage space and reducing backup processing times.
Optimole effectively fool-proofs the site. Even if contributors upload crazy huge images, site performance won’t be affected.
The only possible shortcoming I found it that Optimole does not automatically crop images into a standard aspect ratio standard: 2:3, 4:3, 16:9, etc. Cropping still has to be done manually within WordPress, or prior to uploading the image.
