Custom Image Headers by Guest Author Roads
Many of the WordPress.com theme templates feature image headers, and these offer the perfect way to personalize your blog, right from the top.
This post provides some tips on how to use image headers, and how to make them work best for your site.
I’ll also post some of my own header images at the foot of this post, formatted for the Cutline theme, which you can download and use for yourself if you wish.
How to load a new image header
Header images come in different shapes and sizes, depending on the theme used.
Presently, I am using Cutline on my sites, which features a 770 x 140 pixel header. The theme has a default header image, but it’s possible to change this under
Dashboard -> Appearance -> Custom Header -> Upload New Header Image
where you can add your own header image by uploading the file from your computer. Bear in mind that it’s not presently possible to select an image from elsewhere on the internet or even from your site’s Media Library unless you have downloaded it onto your computer first.
Cropping and resizing header images
You can crop and resize your images directly in WordPress.com, but if you can it’s always best to optimize your image before uploading it. Check the pixel size of the image headers used for your choice of theme, and resize your image accordingly using image software.
I use the freeware IrfanView but you might prefer PhotoShop or PaintShopPro instead.
Header image file sizes
Whichever package you use, try to limit the image header file size — compressing to 30kB works well. Less compressed header images will slow down the loading time of all the pages on your site and this will frustrate readers working with slower internet connections.
Composition and header images
Bear in mind that an image which works in portrait format may not be effective once cropped into the horizontally elongated formats which are required for most blog image headers. Landscapes, night panoramas, city skylines and sunsets work well, though — and anything which features a horizon is likely to create a strong visual design impression at the top of your blog.
Likewise, the standard compositional ‘rules’ for placing skylines and points of interest which apply for standard 3:4 or 2:3 image dimensions may not work so well with horizontally elongated images. You’ll have to experiment with different crops to see what works best on your site.
You can add simple text directly onto your image directly in IrfanView.
Select a box in the part of the image where you want the text to go, and then follow
Edit -> Inset text into selection…
and then choose your font size and colour as desired.
Header images and branding
Clearly, you’ll want to find custom image headers which help establish the ‘brand’ of your blog. You might choose to incorporate a logo into your header, for example, and at the very least you’ll want the image to show a subject which is relevant to your blog.
Rotating custom image headers
Chris Pearson describes a widget for WordPress.org blogs which allows the random rotation of custom header images. That feature isn’t yet available at WordPress.com, but it’s easy to change custom image headers around to rotate them manually on a daily, weekly, or monthly basis.
Using header images as update clues
I like to go further, and where possible I aim to load a new header image every time I post. This helps to keep the site looking fresh, and it also means that I can select an image which is directly relevant to my latest writing.
Just as importantly, I’ve found that refreshing the image header with each new post provides an instant visual clue to your readers that the site has been updated. Right from the top, your new image header will catch the eye and let your visitors know that there’s new material posted on your blog.
Captions for header images
Although you can use IrfanView to add text directly onto your header image, there’s not presently a facility for adding captions below your header images in the same way that you can do this for images within a post.
Dashboard -> Appearance -> Widgets …
add a text widget to the top of the sidebar, click on the widget and compose the caption text you need. Don’t forget to click ‘done’ and ”save changes’ afterwards or else any modifications you make to widgets will (annoyingly) be lost.
Free image headers
Finally, as promised, here is a selection of image headers from my own photography which I’ve previously featured at roads of stone.
Please feel free to use them under the terms of a Creative Commons Licence. An attribution to me as author would be welcome if you’ve found this post useful.
Wishing you all the best of luck, and enjoy personalizing your image headers.
Atlantic Ocean, Bermuda by roadsofstone
River Wey at St Catherine’s Lock, Guildford, England by roadsofstone
Nightfall in Almería, Spain by roadsofstone
The strength of shiny metal, Almería, Spain by roadsofstone
Epsom Racecourse, Surrey, England by roadsofstone
Burgundy vineyards near Roche Solutré, Maconnais, France by roadsofstone
The future of green, Houston, Texas, USA by roadsofstone
Houston, Texas, USA — morning skyline by roadsofstone
Dream World internet cafe and child poverty, Kenya by roadsofstone
Dawn on the Masai Mara, Kenya, August 2007 by roadsofstone
Hogsmill River, Ewell, Surrey, England by roadsofstone
Clopton Bridge, Stratford-upon-Avon, England by roadsofstone
Camber Sands panorama, East Sussex, England by roadsofstone
St Martha’s churchyard in snow at sundown, February 2009 by roadsofstone
Related posts found in this blog: