Grow your CSS skills. Land your dream job.

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

  • # June 19, 2013 at 11:55 am

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

    Same here.

    # June 19, 2013 at 12:50 pm

    @Codegraphics:
    > Increasing the dpi sure increases the file size of an image.

    I created 2 new files in Photoshop. One was 300dpi, the other one 72dpi, both were 1200x800px.
    Then I pasted a photo in both of them, and both saved them (“Save for web”) as a JPG with 80% compression.

    File size of both files: exactly the same.

    # June 19, 2013 at 2:38 pm

    @CodeGraphics, you are wrong.

    Open up photoshop, go to image size, un-check resample image checkbox, then enter different DPI, you’ll see document size change and not the pixel value.

    NIX
    # June 21, 2013 at 4:02 pm

    I’m going to compress it as much as I can before image starts to degrade. The reality is… TONS of websites have HUGE photos for their backgrounds. If they’re using some slick parallax scroll effect, they have MANY!

    I just visited the Whole Foods website and they have a photo that is over 800 kb. It loaded in like half a second. I’m not too worried about it anymore. Thanks everyone!

    # June 21, 2013 at 4:33 pm

    > I just visited the Whole Foods website and they have a photo that is over 800 kb. It loaded in like half a second. I’m not too worried about it anymore.

    For you, maybe. What about the person on their phone? What about a person at home with a slower connection?

    # June 21, 2013 at 5:45 pm

    > I just visited the Whole Foods website and they have a photo that is over 800 kb. It loaded in like half a second. I’m not too worried about it anymore. Thanks everyone!

    This is like saying, “I am using Chrome so everybody else does”. You cannot make such assumption on your only experience.

    # June 21, 2013 at 10:43 pm

    Just FYI. DPI does make a diff on size of the image. Photoshop “Save for Web” saves all files in 72dpi <–for web.

    # June 22, 2013 at 1:38 am

    @webtmc, wrong.

    First, monitors do not have dots they have pixels, so it should really be PPI. The term DPI is old and is being misused all the time. DPI is only related to printer. Number 72 refers to the number of pixels that can be placed per inch on the average monitor, there’s no reason to increase it because the monitor can not resolve it. Now what you must be confused about is resampling. This should always be off when changing DPI because, if left on, you are artificially adding pixels. Bad idea.

    So whenever you’re printing, you want to leave the pixel dimensions alone and change the document (print) size or (DPI) to fit whatever size you need. So you can get away with printing poster size image with 150dpi resolution, because the viewing distance for that print will be greater.

    Think of it as input/output or PPI/DPI (digital capture device like dslr / printer). Pixel dimensions should not change throughout the chain.

    # June 25, 2013 at 12:45 pm

    Try this technique not yet mentioned…

    Start with image twice the dimensions, and then save for web at 0% compression. Let the browser resize the image. See how that works

    NIX
    # June 25, 2013 at 1:28 pm

    I’m going to make a separate mobile site so it doesn’t really matter. That one will have no background image at all.

    PLENTY of websites use background images that are both stunning and huge. I don’t think this is a bad practice at all.

    It IS however a balancing act. The question is: How do I keep as much photo quality as possible and reduce the size as much as possible?

    I was able to get my photo down to 372 KB without much degradation. I’m happy with that. Plus… it’s for a portfolio site… so people expect it to be artistic.

    NIX
    # June 25, 2013 at 1:31 pm

    Oops, I meant *272 KB*. Big difference IMHO.

    NIX
    # June 25, 2013 at 1:34 pm

    And also, that is with an image that is 1600px x 1000px. I find that pretty impressive with the photo quality I’ve maintained.

    # June 25, 2013 at 1:36 pm

    Please watch and learn:

    NIX
    # June 25, 2013 at 1:41 pm

    > This is like saying, “I am using Chrome so everybody else does”. You cannot make such assumption on your only experience.

    Not exactly. I’m merely pointing out that a HUGE company like Whole Foods with a far broader audience is using a large background photo. This would seem to indicate that it is becoming more common due to increased connection speeds and larger displays.

    I’m also being realistic in thinking that a portfolio site is going to be primarily viewed on HUGE macs with fast connections.

    # June 25, 2013 at 1:46 pm

    > I’m merely pointing out that a HUGE company like Whole Foods with a far broader audience is using a large background photo. This would seem to indicate that it is becoming more common due to increased connection speeds and larger displays.

    Just because they’re huge doesn’t mean they use best practices.

Viewing 15 posts - 16 through 30 (of 58 total)

You must be logged in to reply to this topic.

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