1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Images at 72 or 300 dpi for website?

Discussion in 'Graphics & Multimedia' started by R_e_M_i_X, Jan 11, 2008.

  1. #1
    Should I be downloading 72 dpi or 300 dpi images for my website? What's the advantage/disadvantage for each? If the web becomes "HD" in the future, won't it be worth it to have the 300 dpi images? But at the same time, 72 dpi will allow for faster download speeds on my web page right? Or do I have no clue what I'm talking about, lol?
    SEMrush
     
    R_e_M_i_X, Jan 11, 2008 IP
    SEMrush
  2. Meth_

    Meth_ Active Member

    Messages:
    1,063
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    90
    #2
    smaller images = faster loading time = good

    use normal images until wideband is the standard
     
    Meth_, Jan 11, 2008 IP
  3. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,361
    Likes Received:
    568
    Best Answers:
    4
    Trophy Points:
    385
    #3
    Always use 72dpi for images that will actually be displayed on your site.
    If you're downloading images to work with, then get the highest dpi images you can, play with them, then convert them to 72dpi before using them in your site.
     
    Kerosene, Jan 11, 2008 IP
  4. RRWH

    RRWH Active Member

    Messages:
    821
    Likes Received:
    49
    Best Answers:
    0
    Trophy Points:
    70
    #4
    DPI is irrelevent when displaying images online.

    Web browsers show the ACTUAL pixels and the DPI is nothing more than an instruction that is used when an image is printed. A web browser doesn't care and just displays the image at screen resolution - usually 72-96dpi.

    The easiest way to prove this is to resize 2 images to 500 pixels and set 1 to 72 dpi and the other to 300dpi and put them both on a web page - they will be displayed at exactly the same size of 500pixels.

    Now, when it comes to optomising the image for web use the most important factor is filesize - which is where smaller is better.
     
    RRWH, Jan 11, 2008 IP
  5. prasun27

    prasun27 Member

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #5
    If image would be smaller then the loading time would be less and it would reap good results.
     
    prasun27, Jun 10, 2015 IP
  6. bluepencil

    bluepencil Member

    Messages:
    9
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    33
    #6
    As @RRWH stated, web images display to standard monitor dpi, which is about 96 dpi these days. Downloaded images tend to compensate high DPI settings as pixel counts, which means you are downloading a huge image. Which is, of course, unusable - pages are scaled to monitor resolutions. There's little point in uploading 4k background photos when only a fraction of users will be viewing them on 4k monitors. Worse yet, this could drastically impact the experience of those trying to view your site via mobile.

    I am assuming you are referring to stock photos and other graphics to use for your site. In which case, it is good to download large file sizes that you can scale down. Resize down, the images will still look crisp. Resizing up results in information loss. If you are sending out source files for someone to use in Photoshop, large image files are good for the same reason. It's easier to cut around and manipulate sections of the image without losing detail.

    Your actual web graphics should be as clear and small in file size as possible. A few tens of kilobytes might not seem much of a difference now, specially with everybody assumed to be on broadband, but the more users you have the more things are being downloaded constantly. They might not perceive it, but what about your webhost's bandwidth limit?

    HD web isn't just images, of course. We expect HD video too. Always have lower-res or better encoded versions available. There's always an uneasy balance between filesize and quality, it's never going to go away no matter how fast Internet gets. That only means there's a new baseline for people's expectations.


    [edit]
    Look into WebM and HTML5 video for moving elements in your site. They're much faster and much nicer to look at without bloating out in filesize.
     
    bluepencil, May 14, 2017 IP
  7. ManuelG

    ManuelG Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Independently of the format of the images you select, you will have to compress and optimize them for the web.
     
    ManuelG, Nov 22, 2017 IP
  8. GITSolution

    GITSolution Active Member

    Messages:
    36
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    63
    #8
    72 dpi mostly used for web based projects and 300 dpi used for print based projects for good images print quality.
     
    GITSolution, Nov 30, 2017 IP