Unoptimized images kill website performance.
Since images often comprise 40% to 50% of page size — more than other any type of element — optimizing them is an obvious tactic in our quest for a fast website.
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 alright for a 4k monitor with a fast connection, but way too big for a typical HD monitor.
To optimize the image, Optimole first compresses files in the efficient WebP format which is 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 whopping 92% decrease from the original JPEG file size.
Mobile Display
When viewed on a phone, Optimole re-sizes the image to exactly match the viewport width of a iPhone — 375 pixels. The image file now weighs just 18KB — a massive 99% decrease from the original image size! Yet, it looks fine.
If Optimole detects a slow connection, it will reduce the resolution (within reason) to ensure the image is still viewable.
Losing the Duplicates
There’s no longer any need for WordPress to generate multiple sizes of each image — something it does by default. Why store all that stuff? 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 those extra files are obsolete. 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, and paste in the code as shown above. In this example, I kept my two snippets separate in case I want to change something later.
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, only the original full-size image remains on the server, minimizing storage space and reducing backup times.
Optimole effectively fool-proofs the site against clueless users. Even if someone uploads crazy huge images, site performance won’t be affected.
The only 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 ideally, prior to uploading the image.
