There are a lot of aspects to image optimization, like lazy loading, and new image formats. But two with the largest potential for increasing the speed of your site are compressing and resizing. Compression reduces the file size without altering the canvas/display size of an image. Of course resizing does the latter, in an effort to align the display/canvas size of an image with the “window” in which it is displayed.
When I released the EWWW Image Optimizer five years ago, it was focused exclusively on image compression. Over the course of five years, that focus has barely changed. I introduced image resizing last year to help folks prevent huge photos from being saved and uploaded to their sites. However, that feature didn’t address the browser scaling issues, it simply helped keep the storage demands of images in check.
The Resizing Dilemma
It’s easy to get the size of an image wrong, and incredibly difficult to get it right. It can be as daunting as choosing the right colors for your next masterpiece. For example, lets say that your website displays an image at 400 x 400 (height and width in pixels). What if you upload that image at 800 x 800, or even worse, the image is straight from your camera at 4000 x 3000. In the first case, the image is 4x too large, and in the second, it is nearly 100x too big!
“That’s easy”, you say, “I’ll just make it 400 x 400 and re-upload the image, right?” While that will help, there are a couple other variables to consider. The first issue is varying screen sizes. If the display size is 400 x 400 on a desktop, it might only be 220 x 220 on a mobile screen. Added to that, you might need the image to be a different size on a different page. If your site lists products for sale, you might need one size in a category listing, and something different on the product page. These factors are just one of the reasons WordPress, along with various themes and plugins, will generate multiple sizes of your images during upload.
To be fair, WordPress already attempts to address this with a feature called Responsive Images, and some themes and plugins do a decent job of handling image resizing. However, in the years I’ve been helping folks speed up their images, it has become clear that we need to do better.
Shoulders of Giants
Fortunately, there was a solution that was already half-way there, namely Jetpack’s Photon module. I’ve rewritten the Photon module, and implemented a resizing CDN named ExactDN to go along with it. EWWW IO’s implementation of Photon includes support for Retina images, but then takes things a step farther. It also includes the advanced lossless compression from our API and allows you to change image quality site-wide. ExactDN can cache other asset types, like JavaScript, CSS, and font files. Plus, it gives you more control with the ability to purge the CDN cache at any time (Photon images live forever).
What’s Next?
ExactDN has a lot of potential to speed up the images on your site. Whether you are struggling with image resizing or want to implement Retina support with no fuss, ExactDN can help. Even at it’s core, as a CDN, ExactDN makes your images faster, just by moving them closer to your visitors. If you’re ready to take the next step in image optimization along with me, join us now!
