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.


Photo sizes and file sizes

For web use, pixels are all that matter. The image needs to be X pixels by Y pixels, and that’s all we really need to know.

The resolution (usually expressed in dots per inch, dpi) is not the same thing as the pixel size but says something important about how the image is displayed, on screen or on paper. For instance, an image 250 x 250 px may be displayed on screen at 96 or 120 dpi according to the device, making it (roughly) two and a half or two inches (i.e. 60 or 50mm) square respectively; or it may be printed at 300dpi, making it less than one inch (25mm) square.

File size (usually expressed in kilobytes or megabytes, KB or MB) is related to pixel size but again doesn’t matter much for display purposes. For a given pixel size, a larger file will appear as a better quality image but will take longer to load.