How big (file wise) should my background image be?

[nixnerd]

I’m designing a website that has a full-screen background image. The problem is… these things are HUGE! I’m talking file size-wise! A decent looking jpeg is coming in at over 800kb!

I know the old rule of 100kb per page is WAAAY outdated, as the average webpage is over 600kb. However, I want to try to keep things light.

How do you trim down a photo without it looking horrible? I’ve seen many sites somehow accomplish this. Now I want to know how!

[Kitty Giraudel]

Have you you tried an image optimizer like tinypng or jpegoptimizer? How low can you get it?

[CodeGraphics]

If the image is in png, use tinypng.org to compress it more. If it’s in jpeg, dont use jpeg-optimizer.com, they will mess up the quality of the image. Just go back to photoshop and make sure you actually used ‘save for web and devices’ in the first place. If you used it, did you use 100% quality or 60%? If you used 100, bring it down to 60. If you used 60, bring it down to 50 or 55. Dont go below 50%. I think you will arrive at 600kb or 500kb, which is ok.

[Kitty Giraudel]

If it’s in jpeg, dont use jpeg-optimizer.com, they will mess up the quality of the image

Using jpeg-optimizer for a while now, never had much issues.

I think you will arrive at 600kb or 500kb, which is ok.

Which is fucking heavy.

[Alfie]

Have you got a link to the background file?

[RedJokingInn]

A couple of things to consider when using an image as full screen background:

• Make sure the dimension is big enough for most resolutions, like 2800×1600 pixels
• Like said above, experiment with the quality setting when saving
• You can also try decreasing the dpi value of the image, which can lower the file size considerably. Many hires images have a 300dpi or 96dpi setting. For most background images 72dpi is more then enough.

>I think you will arrive at 600kb or 500kb, which is ok.

>>Which is fucking heavy.

The resolution and settings I suggested above will result in a image around 500kb, don’t think you can go much lower without loosing to much detail. Btw an image like that loads in +/- 300 miliseconds on my broadband connection. Don’t get me wrong, I’d rather avoid things like this too. But if it’s the clients wish…

Just as tip, I’ve used the jquery plugin, [Fullscreen Background](http://www.gayadesign.com/diy/jquery-plugin-fullscreen-background/ “http://www.gayadesign.com/diy/jquery-plugin-fullscreen-background/”), in the past. It’s lightweight, easy to use and adapts your image to the users screen.

[Alen]

You can also try decreasing the dpi value of the image

DPI has nothing to do with file size. If the file is 72dpi or 3000dpi still the same amount of pixels. DPI is for printing.

You can decrease the file size by blurring out the parts of the image that are not important, this helps but you can only push it so far.

I think the best solution is to user agent sniff and send the correctly sized image. Instead of sniffing out mobile, sniff out desktop users and only send them higher file size image.

[Htmlmainiac]

Use for windows a free app called pnggautlet I think.

[CrocoDillon]

You think almost correctly (PNGGauntlet*)

[TheDoc]

Make sure the dimension is big enough for most resolutions, like 2800×1600 pixels @RedJokingInn

Whoa whoa. Probably way too big. Find out what the *majoriy* of users visiting the website have their resolution set to and use that as your target.

I think you will arrive at 600kb or 500kb, which is ok.

Way too big. I’d cap it at 200-300KB and even then I think that’s too much.

[CodeGraphics]

DPI has nothing to do with file size. If the file is 72dpi or 3000dpi still the same amount of pixels. DPI is for printing.

Not true. DPI is not just for printing. Basically 300 dpi is for printing while 72 dpi is for the web. Increasing the dpi sure increases the file size of an image.

[Sarfaraj]

Hey @Joe_Temp if you want lower without loosing to much detail so you can try irfanview. that would very useful to you.

Basically i would works 100% perfectly with jpeg file, but you may get some issues even if you use .png file

I have already tried it.

[Paulie_D]

Mass confusion entered in when image pixels were mapped to screen dots in web browsers. A 200 pixel image shows up as 200 pixels in a browser. How large it is, measured with a ruler, depends on the dots per inch of the screen. The image metadata might say it’s 200 ppi or 72 ppi or 1 ppi, it will still occupy exactly 200 screen dots. The world remains fixated on “72 ppi for the web,” so the question of “what’s the right resolution for web images” keeps coming up, and the correct answer, “it doesn’t matter,” keeps being supplied ad nauseam.

The real issue, if I understand it correctly is Pixels Per Inch (PPI).

There’s a handy discussion with a lot of useful information here:
http://graphicdesign.stackexchange.com/questions/6080/what-is-the-difference-between-dpi-dots-per-inch-and-ppi-pixels-per-inch

[RedJokingInn]

Oops, my wrong. English isn’t my native language.
It indeed should be ppi. Thx for pointing that out @Paulie_D

When printed, an image with a high resolution contains more, and therefore smaller, pixels than an image with a low resolution. For example, a 1-by-1-inch image with a resolution of 72 ppi contains a total of 5184 pixels (72 pixels wide x 72 pixels high = 5184). The same 1-by-1-inch image with a resolution of 300 ppi contains a total of 90,000 pixels.

So more pixels means bigger files.

Another thing I forgot to mention, lowering the color depth, if possible, can also reduce the filesize.

[Kitty Giraudel]

> Way too big. I’d cap it at 200-300KB and even then I think that’s too much.

Same here.

[Author]

Posts