ElkArte Community

What is the ideal size for header image so that it won't get distorted among various screen sizes ?

There is none, since there are cellphones, tablets, laptops, desktop computers with 4:3, 16:9 and even 21:9 screens.

Any methods to make sure that header image is not distorted in different screens ?

Media queries and prepare different images for different ranges of screen resolutions?
If you don't want to modify the template, you can just use something like:

#logobox img {display:none;}

@media screen and (max-width: 64em) {
    #logobox {
        width: 1024px;
        background-image: url(http://whatever.site/hosting/your/image.png);
    }
}
#logobox {
    max-width: 1280px;
    width: 100%;
    height: 250px;
    background-image: url(http://whatever.site/hosting/your/image/full_screen_resolutin.png);
}

@media screen and (max-width: 64em) {
    #logobox {
        background-image: url(http://whatever.site/hosting/your/image/up_to_1024px_resolutin.png);
    }
}

@media screen and (max-width: 30em) {
    #logobox {
        height: 150px;
        background-image: url(http://whatever.site/hosting/your/image/up_to_480px_resolutin.png);
    }
}

And add as many as you want.

I'm pretty sure this is broken since I didn't try it, but you should get the idea. ;)

Thanks @emanuele

It's not broken emanuele, but you don't need different images either :P You can just resize them via css :)

How ?

Just use the max-width property accordingly, the background will scale. If it doesn't, you can use background-size (http://www.w3schools.com/cssref/css3_pr_background-size.asp) :)

http://stackoverflow.com/questions/2396909/are-unused-css-images-downloaded
Anyway, since I don't trust blindly stackoverflow, I just tested it with a script and in all the browsers I could test, only the used one is downloaded. Attached the files. Accessing from the browser test.php it loads img.php as a background-image at two different sizes and creates a file (in a subdirectory records). Any time img.php is accessed it creates a line into the file with the size requested and the timestamp. Accessing at more than 64em, only size=128 is recorded, resizing the window appears the size=64 record and vice versa.

Pros:
Well, if it is cached, then why not just cache something smaller? ;)
Save bandwidth server-side, client-side, no need to load a 1920x680 image on all the devices when a 400x480 is enough on one and a 1920x200 is enough on the other (that BTW means less memory used by the browser, that may or may not be of help, but less memory is usually nice... and even less processing, because anyway load an image is not always so cheap for the browser).
You don't need to "merge" the two versions of the image.
If you have to change one you just change that instead of forcing everybody re-download the new big image.

Cons:
1) you have to write few lines of css... oh no, scratch that, you have to write them even if the image is sprited. :P
1) you can't show-off some CSS3 trickery. O:-)

Yes, there are cases where use a "big" one instead of many small does make sense, but not when 1) the image is on the big-side, 2) when only one of the images is supposed to be used.

Of course, provided you have to change the image. If the image is always the same... well, less of a problem (e.g. "normal" images VS "retina" images, you are going to show just one of the two to a certain device, so no need to load both of them for all... or just have a high-res one for everybody.).

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.

maybe "audit" some the other images

see if any can be dropped altogether
or maybe shrink some by a small amount... 2% spread across a few imges could add up to quite a bit over the long term


imagine what just 1% of each icon and smiley could amount too

Use the PICTURE element.

<picture>
	<source media="(min-width: 40em)" srcset="large.jpg">
	<source media="(min-width: 30em)" srcset="med.jpg">
	<img src="small.jpg" alt="Fallback img.">
</picture>

Combine with Picturefill (https://scottjehl.github.io/picturefill/) for older browsers and you're golden.