Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 39 total)
  • Author
    Posts
  • #45612
    nixnerd
    Participant

    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!

    #139120
    Kitty Giraudel
    Participant

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

    #139123
    CodeGraphics
    Participant

    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.

    #139124
    Kitty Giraudel
    Participant

    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.

    #139127
    Alfie
    Participant

    Have you got a link to the background file?

    #139216
    RedJokingInn
    Member

    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.

    #139225
    Alen
    Participant

    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.

    #139237
    Htmlmainiac
    Member

    Use for windows a free app called pnggautlet I think.

    #139246
    CrocoDillon
    Participant

    You think almost correctly (PNGGauntlet*)

    #139249
    TheDoc
    Member

    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.

    #139276
    CodeGraphics
    Participant

    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.

    #139277
    Sarfaraj
    Participant

    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.

    #139280
    Paulie_D
    Member

    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

    #139352
    RedJokingInn
    Member

    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.

    #139373
    Kitty Giraudel
    Participant

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

    Same here.

Viewing 15 posts - 1 through 15 (of 39 total)
  • The forum ‘CSS’ is closed to new topics and replies.