The Myth that Image DPI Is Relevant To Web Images


	The Myth that Image DPI Is Relevant To Web Images

patchworkthreads

8-27-2007 2:52 PM

628 views

tags:

graphics, design, web, web design, image, images, myths

patchworkthreads says:

The source site, emdpi.com, seems to be a great site for clearing up common misconceptions about basic graphics terminology and definitions. For example, it also mentions that the "em" is -not- "a square the size of the letter M" (I'd seen that one before), and explains that in Windows, an inch as defined by Microsoft might not be an actual physical inch - and why.

Add a Comment

Login to Comment. Not a member yet? Sign up

View the Top Clips from August 27, 2007

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://www.clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/59791ddf-0be7-458a-ba3b-a2827100d052/6BE2F01E-431E-4A2D-91B1-FB329D03FC68/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.emdpi.com/imagedpi.html" href="http://www.emdpi.com/imagedpi.html" style="font-size: 11px;">www.emdpi.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.emdpi.com/imagedpi.html">One often sees statements such as "You only need save images for the Web at 72 dpi" or "Increase the image dpi for better display quality". Books and articles have been making statements like this for so long that it's difficult to get over to people the nonsense that it is.</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.emdpi.com/imagedpi.html">A graphics program builds a screen image by creating pixels and each pixel is defined by three integer (RGB) values. There is no such thing as high or low resolution RGB values and a dpi value stored in the image file only says what size to print the image.</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.emdpi.com/imagedpi.html">When an image is displayed on screen <EM>the dpi value provides no information whatsoever about image quality</EM> as, on screen, all that matters are pixels and nothing but pixels. Images that have identical pixel data but different dpi values will display <EM>exactly</EM> the same on screen.</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.emdpi.com/imagedpi.html">Perhaps the images shown below will convince you.</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.emdpi.com/imagedpi.html"><DIV class="thumb">
 <IMG width="190" height="163" alt="zero dots per inch image" src="http://www.emdpi.com/images/circles_1.png" />
 <DIV class="phototitle">
  0 dpi
 </DIV>
</DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.emdpi.com/imagedpi.html"><DIV class="thumb">
 <IMG width="190" height="163" alt="72 dots per inch image" src="http://www.emdpi.com/images/circles_2.png" />
 <DIV class="phototitle">
  72 dpi
 </DIV>
</DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.emdpi.com/imagedpi.html"><DIV class="thumb">
 <IMG width="190" height="163" alt="5000 dots per inch image" src="http://www.emdpi.com/images/circles_3.png" />
 <DIV class="phototitle">
  5000 dpi
 </DIV>
 </DIV></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.emdpi.com/imagedpi.html">You will have to take my word for fact that the 0 dpi image really is set to zero dpi.</blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/6BE2F01E-431E-4A2D-91B1-FB329D03FC68/blog/" title="blog or email this clip"><img src="http://content9.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>