BIG header: one jpg or several png?

views:

answers:

+1 Q:

BIG header: one jpg or several png?

I've read some of posts here about png/jpg/gif but still I'm quite confused..

I've got a big header on my website : width:850px height:380px weight:108kb

And it's jpg. A woman + gradient + some layers on top and behing her..

Do you think 108kb it's too much? I was thinking about cut it to png pieces..Would that be a bad idea? What's your suggestions?;) THX for help;]

Actually, 108kb for an image of that size isn't abnormal. It's even more optimal to have it in 1 image: your browser only needs to perform 1 get-request. If you break it up into multiple images, the user needs to wait longer for the site to load.

Kurt Du Bois 2010-09-02 07:27:48

+5 A:

It depends on the nature of the image, if it's a photograph, JPEG would give the best compression/quality relation, if it was pixel stuff like writing or pixel images, or have some transparency, then it's GIF/PNG to choose (GIF,PNG8 offers one level transparency, while PNG24 offers a leveled transparency foreach pixel).

When I'm confused, I usually save the picture in all three formats and decide what gives the best quality/size deal within the size limits I need, I also try to lower down JPEG quality to the level where the image is still good quality (cuz that varies from image to another).

Also, if it was a photograph with some writing, split it into a JPEG photograph with a transparent GIF writing overlay (cuz writing edges look distorted in JPEG).

So, when you are confused, give the three a try and decide, with time you'll gain experience what format suits what content the most.

aularon 2010-09-02 07:28:38

PNG probably wouldn't help you since JPG is usually much more efficient at handling gradients. PNG would be better if you had big unicolored spaces in your image.

Adrian Grigore 2010-09-02 07:29:47

JPEG is good for photos and photo-like images where there is a lot of noise and few clean edges/sharp transitions or large smooth areas--whether they be gradients or solid fills. But it's hard to compare lossy compression with lossless since it's very subjective. To me, if you want equivalent quality gradient in JPEG, you'll need to set the quality setting at around 11-12 (in Photoshop's 12-point scale), which produces around the same sized image as a PNG. You can make it smaller than that, but even at 10 you start getting visible artifacts. So it depends on how clean you want it.

Lèse majesté 2010-09-02 07:46:27

Though I should probably note that I do graphic design for a living, so I'm likely a lot pickier than most people. The average person probably wouldn't notice a difference in the image unless you set the quality to 7 or below unless they were really scrutinizing the gradient.

Lèse majesté 2010-09-02 07:51:11

@Lèse majesté: That's correct. It's the same as with mp3 files with very low bitrates, which are still not visually detected by most people, although the difference is obvious to the trained ear.

Adrian Grigore 2010-09-02 08:09:01

That's an apt comparison. And if you're using cheap earbuds, it doesn't make a difference whether it's lossy or lossless no matter who you are. Similarly, someone looking at a site on a ~4" mobile screen probably won't see too much difference in a heavily compressed image. But on the average site I would probably keep important elements of the page, like the logo and navigation, as crisp as possible but other areas could pass with lower quality.

Lèse majesté 2010-09-02 08:18:26

Thank you guys for comments! I think I'll stay with my jpg then;)

2010-09-02 10:35:10

ansaurus

tags:

views:

answers:

BIG header: one jpg or several png?

related questions