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 - 16 through 30 (of 39 total)
  • Author
    Posts
  • #139381
    Senff
    Participant

    @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.

    #139402
    Alen
    Participant

    @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.

    #139807
    TheDoc
    Member

    > 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?

    #139826
    Kitty Giraudel
    Participant

    > 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.

    #139838
    webtmc
    Participant

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

    #139849
    Alen
    Participant

    @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.

    #140307
    croydon86
    Participant

    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

    #140314
    Alen
    Participant

    Please watch and learn:

    http://vimeo.com/67996449

    #140317
    Senff
    Participant

    > 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.

    #140318
    AWKM
    Participant

    > 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!

    Dangerous assumption.

    For example I live in a rural area so I only have mobile internet to my house rather than fixed line broadband. While it’s acceptable speed wise (3-4mbit/s) I have heavily restricted usage allowance. I can pay a small fortune if I want to use up to 15GB per MONTH. So when I see people making sloppy decisions and chucking in images that are close to a MB in size it’s less than impressive.

    Always seek the opportunity to make your code LIGHTER rather than heavier. It’s not as though I live in the 3rd world either. I’m just outside a fairly large city in Canada. Plenty of people don’t have super fast broadband in many parts of the world.

    #140321
    Alen
    Participant

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

    Do whatever you like, but this way of thinking will not get you anywhere. Watch the video I linked above. Dave talks about best practices and there’s plenty of tips on how to size images appropriately. He specifically talks about Okley website where the images compounded to over 80MB+.

    #140322
    Alen
    Participant

    wwwawards are bunch of subjective opinions, they do not define web design.. if you’re after awards go ahead and build however you like.

    Answer to your original question is in the video.

    #140348
    Alen
    Participant

    Back to your original concern. Since you are all over the place.

    > I want to try to keep things light.

    Let me put this in nice bold font for you.

    Watch the video. Dave shrinks the Oakley images down to acceptable size. There’s nothing SUBJECTIVE about that.

    #140354
    Paulie_D
    Member

    Let’s keep cool guys.

    #140384
    AWKM
    Participant

    > I know who I’m targeting and they are the same poeple who happen to love background photos.

    How did you research that?

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