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.

Site maintenance

Most people seem to think of their websites as books – publish and forget – but they are much more like magazines, requiring a flow of new content and regular review of older content. If you prefer a different metaphor, they are more like gardens than buildings.

On the technical, behind-the-scenes level they require software updates. Some of these can be neglected without causing any problems but you never know which ones were security updates and which ones will solve, or cause, crashes due to conflicts between plug-ins and theme updates.

On the public level, page content goes out of date for all sorts of reasons and needs to be updated, while designs which looked fresh and new in, say, 2004 look very dated ten years later.

Themes and appearance in WordPress

The “Theme” of a WordPress site, such as Green Path, defines a range of possible page layouts, not just one. In order down the page:

(A) All pages will have the same header “banner”. It is normally text but can be a logo, or text superimposed on an image.
(B) All pages will have a “header image” or none of them will. The header image, if used, can be (1) the same for all pages (2) a “slideshow” such this site uses or (3) a random image from a set uploaded for the purpose. I like (3) because I find (2) distracting and (1) dull, but I sometimes chose not to have a header image as such because my logo image fills that role. Like slideshow images, the random images would normally all be relevant to the site but may not always be relevant to the particular page they appear on.
(C) All pages will have the “menu”, the primary navigation tool. 

After that, we have choices:
(a) The standard page for posts has a side-bar with “widgets” which may include quick links to other posts, a search box, and (in our case) links to posts on particular topics and (e.g.) “Make a Donation”.
(b) If we want, any particular page can have full-width text and no side-bar.
(c) Or we can have a special “Front Page” layout, but only if we set that page as the “home” page of the site (which we normally don’t want to do because we want our visitors to see our latest news, not an introduction to the organisation).

Any individual pages or posts in either format can have a “featured image” if we want. In some themes (e.g. twenty fourteen) it replaces the header image and is not going to be particularly obvious; in others it appears under the header image and above the text. The featured image has to be chosen by the writer. Of course, the writer can also insert images anywhere within the post or page.

At the bottom of every page we have a “footer” which can have more widgets if we think we need them. At the moment it also has a “back to top of page” link and still includes the automatic “Proudly powered by WordPress” text (I don’t mind giving them that acknowledgement, since they give us the software – it’s all free).

Wrapped around all of this is the “background”, the unused area of the browser’s window. It can be an image (e.g. this site) or a solid colour which contrasts with the background of the page, as here, or matches it, as in the current version of Green Path (green on green).

Image compression revisited

Note, 1.8.24 – this DRAFT is new and public but won’t show up as a ‘new post’ because I have temporarily backdated it to 2014.

In this previous post I looked at scaling and cropping images within WordPress, and the effects on image (file) size and quality. Here I’m looking at compressing images via a WordPress plug-in (W3 Total Cache) which saves them in webp, rather than jpg, format.

These test images are from Green Path. One of each pair is compressed, typically by 80%, the other not; and I’m not saying whether the unpaired images are compressed or not.

All of them were uploaded to the media library at a width of 1200 pixels and have been placed on this page without any resizing, but WordPress itself resizes all images on the fly, according to screen size and browser settings (as described in my previous post) so they can appear on screen at anywhere between 150 and 1500 px wide. (How can you check? Screenshot it and open the screenshot in an image editor.)

And, of course, the lightbox will usually show you a larger version.

It’s complicated. Sigh.

1

2a

2b

3 wild country

4a

4b

5a

5b

6

I picked the difference between the paired images on my desktop, but only by looking much harder at image quality than most people would. On my laptop (smaller but newer screen) I couldn’t pick the difference with any confidence.

The variation in quality (brightness, saturation, sharpness) from one image to the next (in their original (edited) forms) is far greater than the difference between webp and jpg versions of any single image.

Conclusion: the speed gain outweighs any slight loss of quality, so I should go ahead and use webp until/unless compatibility issues emerge.