Pixels per Inch for Website Photographs

Discussion in 'Photography Beginners' Forum' started by LGreene, Jan 20, 2016.

  1. LGreene

    LGreene TPF Noob!

    Joined:
    Jan 13, 2016
    Messages:
    12
    Likes Received:
    0
    Can others edit my Photos:
    Photos NOT OK to edit
    Morning,

    How many pixels per inch should I consider for uploading photographs to a website? Is there a recommended standard size, or is it merely personal preference in terms of quality-standards and loading time considerations?


     
  2. AceCo55

    AceCo55 No longer a newbie, moving up!

    Joined:
    Jan 22, 2012
    Messages:
    585
    Likes Received:
    117
    Location:
    South Australia
    Can others edit my Photos:
    Photos NOT OK to edit
    ppi is totally irrelevant until you actually print a photo (and THEN it will have a bearing on how big the print will be).
    It has absolutely no bearing on a screen/website.

    The two things you need to concern yourself with are:
    1) the actually pixel dimensions of the image. So a 5000 pixel x 3000 pixel image has 15megapixels. It will load slower than a 1800 pixel x 1200 pixel image (bit over 2.1 megapixels)
    2) the degree of compression used to save the image before uploading. Given all things equal a photo saved at compression (or "quality") level 8 will load faster than one save at level 12. I use Photoshop - if you are using Lightroom, some-one else will need to step in

    Photoshop's "Save for Web" will reduce the file size more than using the "Quality" settings in Photoshop.

    If you just want the photos on the website to be viewed (and not printed from) then a photo resized to say 1200 pixels on the long side and saved with a lower quality (save level 5) would be OK. This is ALWAYS A COPY OF THE FILE ... NEVER MAKE A PERMANENT DOWNSIZE TO THE ORIGINAL or FINAL EDIT FILE.

    If I'm saving for use on social media I will use a photo resized to 800 pixels (on the long side) and "Save for Web" quality 30. That results in a file size around 50kB

    If I'm saving for viewing on my website I will resize a photo to 1200 pixels (long side) and a Save for Web quality of 40. That results in a file size around 100 - 140kB

    Some people want to show off their photo's at a larger size (for viewing on bigger screens) so they might upload photos 2400 pixels on long side but still "Save for web" at say level 40.

    If the photos ARE to be printed always use the highest photo size and the highest quality.
     
    • Like Like x 1
  3. Didereaux

    Didereaux Been spending a lot of time on here!

    Joined:
    Oct 29, 2013
    Messages:
    2,372
    Likes Received:
    1,571
    Location:
    swamps of texas
    Can others edit my Photos:
    Photos OK to edit
    72dpi to 100dpi and 800-900 pixels on the long side are very good for web postings.
     
    • Like Like x 1
  4. Ido

    Ido No longer a newbie, moving up!

    Joined:
    Jun 30, 2014
    Messages:
    449
    Likes Received:
    67
    Location:
    Israel
    Can others edit my Photos:
    Photos NOT OK to edit
    AceCo55 pretty much nailed it: the PPI metadata field in an image file has no effect in digital display, including the web. You can set it to 1 or 1000, and there won't be any difference at all.

    If you have the latest version of Photoshop, you should know that "Save for Web" has been replaced by an Export option in the menu. I guess it uses newer compression algorithms. The legacy Save for Web option is still there, but Adobe recommends using the Export function instead. Of course, if you edit your photos in Lightroom or any other application, use that software's export/save option unless you're dissatisfied with the results.

    When I convert a raw file to an image file and need to choose its dimensions, I think about the dimensions of the output media. Some dimensions you may want to know, all in pixels:
    • Ultra HD (the consumer 4K standard): 3840 x 2160
    • Full HD (most common resolution right now in computer and TV monitors): 1920 x 1080
    • iMac Retina 5K display: 5120 x 2880
    • MacBook Pro with Retina display: up to 2880 x 1800
    • The latest smartphones: up to 2560 x 1440
    Generally, you'd want your image to have at least as many pixels as the monitor. So pick the kind of device you're aiming for, and size the image accordingly. I usually go between 2000–3000 pixels on the long end for photos that may be shown full-screen, or 1000–1500 for photos that are displayed smaller (e.g. part of an article).
     
  5. Didereaux

    Didereaux Been spending a lot of time on here!

    Joined:
    Oct 29, 2013
    Messages:
    2,372
    Likes Received:
    1,571
    Location:
    swamps of texas
    Can others edit my Photos:
    Photos OK to edit

    The OP ask SPECIFICALLY about loading to a website. fitting the picture to a monitor is a disaster. You pic must be usable on a wide range of devices, and various sized monitors. Threfor the 'standard is as I said above: 72-100dpi and 800 to 900 pixels on the long side.
     
  6. Ysarex

    Ysarex Been spending a lot of time on here!

    Joined:
    Nov 27, 2011
    Messages:
    6,694
    Likes Received:
    3,170
    Location:
    St. Louis
    Can others edit my Photos:
    Photos OK to edit
    10_ppi.jpg
    1000_ppi.jpg

    ppi or dpi has no meaning for screen images. The only thing that matters is pixel dimensions. The two graphics above are both 800 x 50 pixels.

    Joe
     
  7. LGreene

    LGreene TPF Noob!

    Joined:
    Jan 13, 2016
    Messages:
    12
    Likes Received:
    0
    Can others edit my Photos:
    Photos NOT OK to edit
    Thank you all very much.

    Yes this makes sense. Responsive design and all that. I suppose also, each platform that a website is running off will have their own suggested ideal dpi. We are using the 1&1 Website Builder, which I have claims to lay everything out step by step.[/QUOTE]
     
  8. Ysarex

    Ysarex Been spending a lot of time on here!

    Joined:
    Nov 27, 2011
    Messages:
    6,694
    Likes Received:
    3,170
    Location:
    St. Louis
    Can others edit my Photos:
    Photos OK to edit
    [/QUOTE]

    No it doesn't make sense. Dpi and ppi are meaningless for screen/website images. Those values only become meaningful when you are holding a print made on paper and you can place a ruler along the edge of the print and measure the "i" for inch in dpi/ppi. If you take the "i" away which is the case for screen/website images you no longer have a meaningful measurement.

    On a website your image will display at a pixel x pixel size (eg. 800 x 600) regardless of the ppi value -- the actual size will be relative to the resolution and size of the viewing display. Two images of the same pixel x pixel dimensions will display at the same size on the same screen even though the ppi values are radically different. Are the two blue bars below the same size on your screen or different sizes?

    10_ppi.jpg
    1000_ppi.jpg

    The top bar really is 10 ppi and the bottom bar really is 1000 ppi. Can you see the difference?

    Joe
     
  9. Didereaux

    Didereaux Been spending a lot of time on here!

    Joined:
    Oct 29, 2013
    Messages:
    2,372
    Likes Received:
    1,571
    Location:
    swamps of texas
    Can others edit my Photos:
    Photos OK to edit
    Sheesh! Folks the reason low dpi is important on the web is for FAST loading! Try and focus WEB WEB WEB!
     
  10. Ysarex

    Ysarex Been spending a lot of time on here!

    Joined:
    Nov 27, 2011
    Messages:
    6,694
    Likes Received:
    3,170
    Location:
    St. Louis
    Can others edit my Photos:
    Photos OK to edit
    No. The dpi/ppi values have no effect on the size of an image file or on how fast it will load.

    Here's two photos, one is 32 ppi and the other is 1000 ppi. See which one loads faster:

    32_ppi.jpg
    1000_ppi.jpg

    Joe
     
    • Like Like x 1
  11. Didereaux

    Didereaux Been spending a lot of time on here!

    Joined:
    Oct 29, 2013
    Messages:
    2,372
    Likes Received:
    1,571
    Location:
    swamps of texas
    Can others edit my Photos:
    Photos OK to edit
    ... a file of 100K will load faster than a 1M file! nuff said.
     
  12. Ysarex

    Ysarex Been spending a lot of time on here!

    Joined:
    Nov 27, 2011
    Messages:
    6,694
    Likes Received:
    3,170
    Location:
    St. Louis
    Can others edit my Photos:
    Photos OK to edit


    And they can both be 100 ppi. The ppi/dpi value has nothing to do with their actual size -- their pixel dimensions. Ppi/dpi is a meaningless figure for screen/Internet/WEB display.

    Joe
     

Share This Page