Image sizing in WordPress

I love my photos and I want them to appear to their best advantage but there’s a cost in download speed and bandwidth. Here I compare the quality of images re-sized in several different ways.     

Scaling

original
Original 1500 px, 1 MB, *displayed* at “full size”
original
Original 1500 px, 1 MB, *displayed* at 750px
Original *scaled* to 50% i.e. 750px, 100 KB, in WP

Displaying

WordPress re-sizes all images on the fly to suit browser window size and zoom, so any image set to “display at 750px” or “display at full size” doesn’t actually do that – even at default zoom and a browser window that’s bigger than default window size.

At those settings, in fact, an image nominally displayed at 750px is actually displayed at about 650px; a 1500px image nominally displayed at full size is actually displayed at about 1100px, and in fact I couldn’t make it display any bigger than that at any zoom level or screen size.

It’s all a bit crazy, and I’m inclined to believe that most of these settings are relics of previous WP iterations and any effect on image quality can now be ignored, since even the header image is never (well, hardly ever) displayed at its nominally “preferred” size of 1200px but, given plenty of window space, at 1310px.

An image scaled in WP is a substantially smaller, faster-loading, file than the same image scaled before uploading (with my current app, at least) but they are indistinguishable on screen. Which is good, actually, since the quality is very nearly as good as the original photo file.

Cropping

Original cropped to 750px before uploading (340 KB)
Original *cropped* to 50% i.e. 750px, 120 KB, in WP

And an image cropped in WP is similarly indistinguishable from the same image scaled before uploading but it is similarly a much smaller, faster-loading, file.

Interestingly, the media library per se shows the original version (although its URL link is to the scaled or cropped version) but the “Add media” dialogue shows the altered version.

Original *scaled* to 50% ie 750px, 100 KB, and then cropped; now 80 KB

Cropping a scaled version, as here, begins to visibly degrade image quality.

And the image is…

My sample image shows a spider I found at White Mountains NP a month ago. Landscapes from that walk are on Green Path but the spider itself is on iNaturalist.

Afterword: Other compression apps

Searching the WP plugin library for “image optimisation” brings up half a dozen options, many of them free or “freemium” (i.e., introductory level is free, full version isn’t). Alternatively, www.vandelaydesign.com/image-optimization/ lists and compares ten different image optimisers. Several of them are available as WP plug-ins, several are free, some are both.

After writing and publishing this post I installed ShortPixel and used it to down-size all of the images on this blog (i.e. Words & Images, but not Green Path) except for my demonstration images above. This page, somewhat ironically, will now be the slowest to load of any post on the blog.

One thought on “Image sizing in WordPress”

Leave a Reply