Skip to main content
Topic: Ideal size for header image (Read 3205 times) previous topic - next topic
0 Members and 2 Guests are viewing this topic.

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 #3

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:
Code: [Select]
#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. ;)


Re: Ideal size for header image

Reply #5

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


Re: Ideal size for header image

Reply #7

Just use the max-width property accordingly, the background will scale. If it doesn't, you can use background-size :)

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 #9

You can still achieve that by manipulating the dimensions or using background-size: cover :P

Re: Ideal size for header image

Reply #10

Yes, you can sprite a long and short image with a narrow and slightly taller one, but the question is: is it worth?
Both "types" of users will have to download an image "much" bigger than necessary just to let you use one single image and some css trickery instead of downloading a smaller image suited for the job. ;)

Re: Ideal size for header image

Reply #11

However, it will be cached :P There are pros and cons :)

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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

 

Re: Ideal size for header image

Reply #13

Quote from: Antechinus – Yup. Even if you use media queries to call different images at different res, the whole lot will still be processed by the browser,
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.).

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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P