Grow your CSS skills. Land your dream job.

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

  • # June 18, 2013 at 12:15 am

    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!

    # June 18, 2013 at 3:02 am

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

    # June 18, 2013 at 3:12 am

    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.

    # June 18, 2013 at 3:17 am

    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.

    # June 18, 2013 at 5:09 am

    Have you got a link to the background file?

    # June 18, 2013 at 2:22 pm

    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.

    # June 18, 2013 at 3:24 pm

    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.

    # June 18, 2013 at 4:56 pm

    Use for windows a free app called pnggautlet I think.

    # June 18, 2013 at 5:11 pm

    You think almost correctly (PNGGauntlet*)

    # June 18, 2013 at 5:18 pm

    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.

    # June 18, 2013 at 8:33 pm

    http://www.jpegmini.com/

    i used this and it took my jpg file way down in size and didn’t lose any quality. i got it from this thread: http://css-tricks.com/forums/discussion/21676/suggestions-for-image-optimization-toolstuts/p1

    # June 19, 2013 at 4:41 am

    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.

    # June 19, 2013 at 4:57 am

    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.

    # June 19, 2013 at 5:08 am

    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

    # June 19, 2013 at 10:04 am

    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.

Viewing 15 posts - 1 through 15 (of 58 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".