I posted sent this to a client asking about what the right banner image size is for a #WordPress site. Where am I off and could have improved it?
So when creating custom headers for sites that are responsive and will be seen on different sizes, there are really three basic approaches:
1. Resizing/Scaling – The whole image is always shown, but it resizes smaller on smaller screens. The end result of this is that the detail of the the image is lots and titles that are now 1/4 the original size and are unreadable.
2. Centered – Allows for a single image to be used that can be as wide enough for a large screen, but only the middle is shown. This means that the most important info, like the title, has to be in the middle 320 pixels. It will also result in Google yelling at you because you are serving a very wide image on phones with a very limited width screen. A variance of this is left justified with the same results.
3. Multiple images – Based upon the size of the screen, the best image is displayed to the reader. This can be combined with #2 to cover multiple dimensions with less of a penalty from really wide images.
As with everything else, the answer that involves the most work, is the best answer. So #3 is best way to go.
With your last image, I created a three images (attached) that had the spirit of the first image. The first was just resized to fit the 1280 width screen.
The common sizes are: (http://bit.ly/1IAL98z)
320 for iphone 3&4,
768 for ipads,
1080 new tablets,
1280 for desktops & newer
You could go NUTS creating images for all the different dimensions. Take a look at the second article in the links below and you can see how many “common” breakpoints there are. If you create a site with three banners 320, 768, 1280, I think that covers most of the basis, especially if the readable content is mostly centered and can fall off the edges without any loss of message.
Some good articles:
media queries for common device breakpoints
Why you don’t need device specific breakpoints