Pixels per Inch for Website Photographs

[LGreene]

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?

 

[AceCo55]

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.

 

[Didereaux]

72dpi to 100dpi and 800-900 pixels on the long side are very good for web postings.

 

[Ido]

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

 

[Didereaux]

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

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.

 

[Ysarex]

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

 

[LGreene]

Thank you all very much.

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.

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]

 

[Ysarex]

Thank you all very much.

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.

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]

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?

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

Joe

 

[Didereaux]

Sheesh! Folks the reason low dpi is important on the web is for FAST loading! Try and focus WEB WEB WEB!

 

[Ysarex]

Sheesh! Folks the reason low dpi is important on the web is for FAST loading! Try and focus WEB WEB WEB!

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

 

[Didereaux]

Sheesh! Folks the reason low dpi is important on the web is for FAST loading! Try and focus WEB WEB WEB!

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

... a file of 100K will load faster than a 1M file! nuff said.

 

[Ysarex]

... a file of 100K will load faster than a 1M file! nuff said.

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

 

[dennybeall]

72 little whatever you want to call them bits of information in each measure of picture and keep the file size below 100k. The important part is below 100k so the time it takes for the computer to load the website page is under control.

 

[Ysarex]

72 little whatever you want to call them bits of information in each measure of picture and keep the file size below 100k. The important part is below 100k so the time it takes for the computer to load the website page is under control.

The 72 little bits whether pixels or dots is meaningless for screen/WEB display and it doesn't matter in any way if you have that value at 72, 10, 500, or 5000. The ppi (or if you prefer dpi) value has no effect on the size of the image and on the size it will display on the WEB.

Joe

 

[KmH]

Which is why the ppi (print resolution) setting also has no effect on the image file size.
So if you need/want a 100k image file - changing the ppi does NOTHING.

Ppi is not image information.
Ppi is a logical term, and is simply a decision about how many pixels of the available pixels you will use to print an inch on page.