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.

Header image sizes in twenty sixteen

It makes surprisingly little difference if the header images are too small, e.g. 940 x ca 200 px rather than 1200 × 280 which is what twenty sixteen recommends. At window widths less than the image width it makes no difference because the theme re-sizes the image anyway; at larger window widths the image left-aligns but doesn’t right-align. And image height makes no difference at all to the functioning of the theme, unless images of varying heights are used in a slider.

Some of my sample images are tagged with their sizes. Height varies, and (to me) 205 looks a bit miserly, 280 dominates the page too much. ‘Townsville from Mt Stuart’ is 235px high, while my paperbark blossom is 205px high (mainly because that was easiest, working from the versions I had). Both have 12pt Futura titles.

Tables in WP posts

This table is from WQ blog:

Acacia flavescens Eucalyptus tesselaris (Moreton Bay ash) Parsonsia lanceolata
Acacia flavescens Eucalyptus tesselaris (Moreton Bay ash) Parsonsia lanceolata
Acacia flavescens Eucalyptus tesselaris (Moreton Bay ash) Parsonsia lanceolata

This table is from my old site:

tck tck tck

tck tck tck brings you news from GCCA a network of more than 450 nonprofit organizations in more than 70 countries with a shared goal .

The Guardian

Alan Rusbridger explains why The Guardian is putting the climate change threat front and centre, and The Guardian’s ‘Keep it in the Ground’ campaign is a great resource.

The future of coal

As more countries turn against coal, producers face prolonged low prices, reports The Economist.

Health impacts

Studies show severe health impacts on coal miners, workers and local communities, says the Climate and Health Alliance (pdf).

The Galilee Basin

‘If Australia wants to save the Great Barrier Reef, it’s an “impossible task” to open up the massive coal reserves in the Galilee Basin,’ says Dr Terry Hughes.

Coalwire

Keep up to date with international developments in the coal industry and the efforts of groups working on coal-related issues with Coalwire.