Ideal size for header image
What is the ideal size for header image so that it won't get distorted among various screen sizes ?
Re: Ideal size for header image
Reply #1 –
There is none, since there are cellphones, tablets, laptops, desktop computers with 4:3, 16:9 and even 21:9 screens.
Re: Ideal size for header image
Reply #2 –
Any methods to make sure that header image is not distorted in different screens ?
Re: Ideal size for header image
Reply #8 –
Unless you want different ratios (that may imply change of the outline of the image as well).
Re: Ideal size for header image
Reply #12 –
Yup. Even if you use media queries to call different images at different res, the whole lot will still be processed by the browser, which means it downloads and caches all of the images mentioned in the file anyway. This is a nuisance but were stuck with it, AFAIK.
It also means that you're probably better off only calling one large image, even if it's far too large for mobile, because at least that way there's only one image to download and cache. It should also mean less CSS to process.
Re: Ideal size for header image
Reply #14 –
Interesting. I've never tested it myself, but I remember reading of other people's tests when they found whole lot was processed by the browser. If it isn't, that's good.
Oh and about Retina vs standard displays: one bloke found that using a low quality jpg of larger than normal size gave the best results. He basically made it twice as big as the display size, and relied on CSS to scale it down. He said the result looked good on Retina and normal displays while still having a low byte count. Again, not something I've tested myself since I don't have access to a Retina, but might be worth checking out.