{"id":157,"date":"2021-05-08T19:49:56","date_gmt":"2021-05-08T19:49:56","guid":{"rendered":"https:\/\/www.valleau.art\/blog\/?p=157"},"modified":"2021-05-08T19:49:56","modified_gmt":"2021-05-08T19:49:56","slug":"dpi-ppi-pixels-and-size-or-why-2000-x-3000-72-dpi-makes-no-sense","status":"publish","type":"post","link":"https:\/\/valleau.art\/blog\/dpi-ppi-pixels-and-size-or-why-2000-x-3000-72-dpi-makes-no-sense\/","title":{"rendered":"DPI, PPI, pixels and size or why 2000 x 3000 @ 72 DPI makes no sense"},"content":{"rendered":"<p>It&#8217;s surprising how often I see a call-out, a request, for a digital image intended for use on a website like &#8220;2000 x 3000 @ 72 dpi&#8221;.<\/p>\n<p>That&#8217;s actually nonsense.<\/p>\n<p>But first, here&#8217;s how dots per inch (dpi) works with images:<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>Lets say you have a line made up of exactly 100 dots. That never changes:<\/p>\n<p>&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230;.<\/p>\n<p>Now, if you print that whole line using 1 of those dots every inch, then the print will obviously be 100 inches long.<\/p>\n<p>If instead you use 2 dots every inch, then the print will be 50 inches long.<\/p>\n<p>If you use 10 dots per inch, the print will be 10 inches long, and if you use 20 dots per inch (DPI) the print will be 5 inches long.<\/p>\n<p>Finally, if you use all 100 dots in a single inch, the print will be, of course, 1 inch long.<\/p>\n<p>\u00a0<\/p>\n<p>Here&#8217;s the rule: The size of your print will depend on the TOTAL length of the side DIVIDED by the DPI you choose to use.<\/p>\n<p>If you have an image that is 2000 pixels long, and you print it at 300 dpi, then \u00a0the resulting print will be 2000\/300 or 6.6 inches long.<\/p>\n<p>\u00a0<\/p>\n<p>Cut to the chase:<\/p>\n<p>These make sense:\u00a0&#8220;send me an image that&#8217;s 5&#8243; x 7&#8243; @ 300 dpi&#8221; or\u00a0&#8220;send me an image that&#8217;s 2000 x 3000.&#8221;<\/p>\n<p>This does not make sense :\u00a0&#8220;send me an image that&#8217;s 2000 x 3000 @ 72 dpi&#8221; (Keep reading to see why it&#8217;s nonsense.)<\/p>\n<p>A digital image&#8217;s size is its size, period.\u00a0&#8220;2000 x 3000 @ 72 dpi&#8221; or\u00a0&#8220;2000 x 3000 @ 300 dpi&#8221; is not going to change the size of the file. The file is 2000 x 3000, now and forever.<\/p>\n<p>What it does do is say &#8220;If I print this 2000 x 3000 pixel image at 72 dpi, the resulting print will be \u00a027.7&#8243; x 41.6&#8243;, (but if I print it at 300 dpi, the print will be 6.6&#8243; x 10&#8243;.)&#8221;<\/p>\n<p>Web browsers have no concept of &#8220;dots per inch&#8221; or &#8220;pixels per inch&#8221; because computer screens may have different sizes, but each one has a\u00a0fixedresolution. Some screens are over 220 PPI, while others are 140 ppi or 120 ppi or&#8230; So specifying an inch-size in an image destined for the web won&#8217;t work. What is 300 dpi on a screen that is 120 ppi? To do that, the display would be throwing away pixels in the image.<\/p>\n<p>Expressing DPI for a screen image serves no purpose, as DPI only applies to printing.<\/p>\n<p>\u00a0<\/p>\n<p>Here is proof:<\/p>\n<p>This image is 955 x 651 pixels, and is set to 72 dpi:<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>and here is the exact same image with the dpi set to 360:<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>See any difference?<\/p>\n<p>Nope? That&#8217;s because Dots Per Inch is a choice that is only possible when PRINTING an image. Your -web browser- cannot change resolution like a printer can. \u00a0<\/p>\n<p>If you PRINT the top image however, it will be 13 inches wide at 72 dpi, but the bottom one will be about 2 1\/2 inches wide (not 13 inches) because it&#8217;s using 360 dpi.<\/p>\n<p>Here&#8217;s another good comparison and explanation, just in case you want a second opinion: \u00a0 \u00a0 https:\/\/daraskolnick.com\/image-dpi-web\/<\/p>\n<p>However, it does make sense to use &#8220;dpi&#8221; if the size specification is in inches instead of pixels (as in dots per inch): \u00a0&#8220;send me an image that&#8217;s 5&#8243; x 7&#8243; @ 300 dpi.&#8221; That file will be 1500 x 2100 pixels. (5 x 300 = 1500; 7 * 300 = 2100). Equally, if someone asks you to send them an image specified as \u00a0just &#8220;5 x 7&#8221; &#8211; then you have no idea at all what to send (unless perhaps you send them an actual 5&#215;7 print instead of a digital file.)<\/p>\n<p>Digital files are specified by either\u00a0 pixel dimensions OR by inches and dpi. Mixing one with the other makes no sense.<\/p>\n<p>And finally, \u00a0the proverbial &#8220;72 dpi&#8221; &#8211; which is wrong on a couple of counts, unless you&#8217;re printing a huge image, meant to be viewed from a great distance. It would never work for a printed photograph.<\/p>\n<p>The person specifying\u00a0&#8220;72 dpi&#8221; is probably thinking of a computer monitor screen, but as far as I know, no computer monitor has been made at 72 ppi (notice: PIXELS per Inch, not DOTS per inch) in well over a 30 years. Today&#8217;s monitors pretty much begin at 94 ppi and go up from there. And even then, specifying a ppi for a monitor is meaningless, since the pixels per inch of a monitor is fixed, and cannot change (whereas one can print at any chosen dpi.)<\/p>\n<p>PPI (Pixels per inch) is used for displays, such as monitors and TVs; dots per inch (DPI) is used in the printing process. (It is usually true, with rare exceptions, that 1 ppi = 1 dpi.)<\/p>\n<p>And that is why only these make sense:\u00a0&#8220;send me an image that&#8217;s 5&#8243; x 7&#8243; @ 300 dpi&#8221; or\u00a0&#8220;send me an image that&#8217;s 2000 x 3000&#8221;<\/p>\n<p>Don&#8217;t feel bad, this confuses a lot of people.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s surprising how often I see a call-out, a request, for a digital image intended for use on a website like &#8220;2000 x 3000 @ 72 dpi&#8221;. That&#8217;s actually nonsense. But first, here&#8217;s how dots per inch (dpi) works with images: \u00a0 \u00a0 Lets say you have a line made up of exactly 100 dots. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-157","post","type-post","status-publish","format-standard","hentry","category-photo"],"_links":{"self":[{"href":"https:\/\/valleau.art\/blog\/wp-json\/wp\/v2\/posts\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/valleau.art\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/valleau.art\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/valleau.art\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/valleau.art\/blog\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":1,"href":"https:\/\/valleau.art\/blog\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/valleau.art\/blog\/wp-json\/wp\/v2\/posts\/157\/revisions\/158"}],"wp:attachment":[{"href":"https:\/\/valleau.art\/blog\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/valleau.art\/blog\/wp-json\/wp\/v2\/categories?post=157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/valleau.art\/blog\/wp-json\/wp\/v2\/tags?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}