Resizing Images Automatically

multi-colored spools of thread

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!

7 thoughts on “Resizing Images Automatically

    1. That’s a good question regarding Imsanity, but there is an important distinction. Yes, both EWWW IO and Imsanity contain the ability to “resize images automatically”. But what is actually accomplished by the two are very different.
      In fact they both contain this basic functionality: the ability to scale your images down to the maximum resolution/size/dimensions that you have chosen.

      However, what this article is talking about goes beyond that basic function, and applies it to every image displayed on your pages. It does it dynamically, and on demand, so that your images are exactly the size they need to be.

      Someone recently emailed me asking if they could set different dimensions for content images vs. header images vs. background images. That “problem” is precisely what this is about. Not all images on the typical site need to be the exact same size, especially when you consider varying device sizes.

      So, in short, Imsanity is more about setting a sanity limit for image sizes, ExactDN is about taking that to the next level and getting all images on your site to be as close to perfect as possible, considering where the image is displayed, and what device it is displayed on.

  1. How about resizing images outside media library?. I have a lot of images that are submitted through gravity forms and I would like to bulk resize them.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.