Navigation

The Myth of DPI

Design, How To, Web Design | Feb 15, 2010

The size of an image in a website layout is important. From proper alignment to getting just the right amount of white space, sizing photos and graphics properly beforehand is essential to creating a balanced look.

Images on the web are measured in pixels. Yet many people go through the trouble of setting their images to 72 dots per inch (DPI). The process of sizing images for the web is often misunderstood.

The misconception about resolution in digital images bound for the web is that they must meet a certain number of dots per inch.

In print, pixels per inch and dots per inch impact the size of an image on a page. DPI doesn’t apply to layout on the web.

When someone converts an image to 72 DPI, they’re adding an extra step with no benefit. Web pages are measured in pixels, not real-world units such as inches.

When someone asks you for a web image that’s, say, two inches wide, they’re estimating how it would appear on their own monitor. Without changing the image’s pixel dimensions, that image would appear larger or smaller on different monitors—and would even look different on the same monitor at a different resolution setting.

 

Pixel Size Depends on Context

A pixel (which is short for “picture element”) is the smallest unit of measure on a grid displaying a digital image. DPI measures how big those pixels, or dots, are when they’re printed.

The image below is shown in different DPIs.

sample photo at 36 DPI
36 DPI

sample photo at 150 DPI
150 DPI

sample photo at 3096 DPI
3,096 DPI

Download and open them in an image editor to see for yourself. All three look the same because they were resized, not resampled.

 

Resizing Changes Pixel Sizes; Resampling Changes Pixel Count

There are two ways to enlarge an image: add more pixels or make the pixels larger. Likewise, you can reduce an image’s size by shaving off pixels or shrinking pixels. But shrinking and shaving are two different processes.

resizing makes pixels larger to make images, well, larger

Shown above, resizing an image changes the size of its pixels, not its number of pixels. We’re not increasing or decreasing the number of pixels, only changing how large those pixels are when printed. It’s an inverse relationship: images with larger pixels will have a lower pixel density (fewer pixels in the same number of inches) when printed.


resampling adds pixels to make images larger

Shown above, resampling changes the image’s size by increasing or decreasing its number of pixels. Images with more pixels will contain more information and often make for richer graphics.

Web design is concerned with resampling, not resizing, because every pixel in a web page will always be the same size. A web page that measures 800 pixels wide can accommodate images up to 800 pixels wide. Making every pixel wider doesn’t change the fact that the layout can hold only 800 of them.

You can’t make an image appear larger on screen by resizing its pixels because every pixel on the same screen will always be the same size.

 

Resizing and Resampling in Photoshop

Photoshop’s Image Size box (Image ‚Üí Image Size) controls both the resizing and resampling of images.

Photoshop’s image size dialog box with resampling on

The “Resample” checkbox changes how many pixels fit into a linear inch—literally the pixels per inch. If we turn off resampling, the only way to change the image’s size would be to enlarge its pixels for printing.


Photoshop’s image size dialog box with resampling off

With the resampling box left unchecked, changing the “resolution” box would alter the image’s physical size when printed, but not its number of pixels. When printed, an image would appear larger or smaller. On a web page, it would be the same size.

 

An Experiment

Figuring out whether DPI matters in web layouts can be done by a little experiment. If we alter an image from 300 x 100 pixels at 72 DPI to 300 x 100 pixels at 144 DPI, how many pixels would we have?

  • Make an image 300 pixels wide and 100 pixels tall, at 72 DPI.
  • Let’s do some math. How many pixels would that be?
  • Now resize the image to 300 x 100 pixels at 144 DPI.
  • Let’s do some more math. How many pixels is that?

The answers are:

  • 300 x 100 = 30,000
  • 300 x 100 is still 30,000

 

Pixels per Inch on Screen

The number of pixels per inch is still relevant online, but DPI settings do not affect how an image is displayed.

Computer monitors can be physically measured in inches, and each displays a certain number of pixels. For example, let’s say a 19″ monitor shows 1280 x 1024 pixels. The user could change it to display 1600 x 1200 pixels, thus increasing its PPI (i.e. adding more pixels in the same number of inches.) The important difference in print is that you can control an image’s pixels-per-inch.

You can try this on most modern computers. On a Mac, go to Apple Menu ‚Üí System Preferences, and then click on “Displays” to see the various resolutions at which you can set your monitor. For Windows, right-click on the desktop and select “Personalize,” and then choose “Display settings.” Change the screen resolution (number of pixels) and watch as the items on your Mac or PC desktop get larger or smaller.

Obviously, your monitor isn’t changing in size. But if you hold a ruler to the screen, you’ll see that the size of icons and windows is inversely proportional to the number of pixels displayed. For example, a 13″ laptop, a 17″ CRT monitor and a 21″ flat-panel monitor can all present a desktop that measures 1024 x 768 pixels. More pixels mean smaller icons; fewer pixels mean larger icons. More pixels in the same monitor give you a higher pixel density; fewer pixels is lower.

example of the same images on differently sized screens

The difference becomes more noticeable with other types of displays:

A single PNG file measuring 100 x 100 pixels would fit on both the 888 x 240 billboard and the 320 x 480 iPhone. But it would appear much larger on the billboard because the board’s pixels are 100 times larger than the iPhone’s (1.6 vs. 160).

The illustration below shows two devices with different pixel dimensions.

example of the same bitmap image on two different displays

The same image is being shown on two different displays. The differences in each display’s PPI make the image on the right-hand display appear larger, even though it has fewer pixels overall.

You can test this yourself:

  • Create a JPG that measures 960 x 100 pixels, at any pixel density.
  • Measure it by hand with a ruler.
  • Look at the same image on a computer with a larger or smaller monitor. For example, if you created the image on a 20″ screen, test it on a 13″ laptop.
  • Print the same number of pixels at different pixel densities to see different sizes on paper.

The result is that this one image would have the same number of pixels but a different width in inches. The website layout would appear in different sizes, despite identical code. (For an extreme case, look at the entire page on an iPhone; 960 pixels is fitted to three inches or less, without the file itself being changed.)

 

Why 72 is significant

Many file formats, including JPG, TIF and PSD, store an image’s pixel density setting. If you save a JPG at 200 pixels/inch, it will remain at 200.

Other formats, including GIF and PNG, discard pixel density. If you save a 200 DPI image as a PNG, it won’t save that DPI at all. Many image editors, including Adobe Photoshop, assume that an image is 72 DPI if the information is not stored. (Note: Photoshop’s “Save for Web” feature discards unnecessary print information, including pixels/inch from its Image Size dialog box.)

Seventy-two is a magic number in printing and typography. In 1737 Pierre Fournier used units called ciceros to measure type. Six ciceros were 0.998 inches.

Around 1770, François-Ambroise Didot used slightly larger ciceros to fit the standard French “foot.” Didot’s pica was 0.1776 inches long and divided evenly into 12 increments. Today we call them points.

In 1886, the American Point System established a “pica” as being 0.166 inches. Six of these are 0.996 inches.

None of the units ever strayed far from 12 points per pica: 6 picas per inch = 72 points per inch. It was an important standard by 1984, when Apple prepared to introduce the first Macintosh computer. The Mac’s interface was designed to help people relate the computer to the physical world. Software engineers used the metaphor of a desk to describe the arcane workings of a computer, right down to “paper,” “folder” and “trash” icons.

Each pixel on the original Mac’s 9-inch (diagonal) and 512 x 342 pixel screen measured exactly 1 x 1 point. Hold a ruler to the glass, and you’d see that 72 pixels would actually fill 1 inch. This way, if you printed an image or piece of text and held it next to the screen, both the image and hard copy would be the same size.

But early digital pictures were clunky and jagged. As screen technology and memory improved, computers were able to display more pixels on the same size monitor. Matching a print-out to the screen became even less certain when raster and vector apps allowed users to zoom in and examine pixels closely. By the mid-1990s, Microsoft Windows could switch between 72 and 96 pixels per inch on screen. This made smaller font sizes more legible because more pixels were available per point size.

Today, designers and clients alike understand that the sizes of items on the screen are not absolute. Differences in screen size and zoom functionality are commonplace. But 72 is still the default.

 

Higher Screen PPI Means Better Legibility at Smaller Point Sizes

Screens with higher PPI are great for legibility. More pixels per inch make letterforms easier to read. It also means that images and text must be larger (in pixels) to be readable.

examples of text at different point sizes and resolutions

The text sample above has been resized from two different screen PPI settings. The top row has smaller pixels (i.e. a higher PPI on screen), so 8 points is the smallest legible font size. Text in the bottom row is barely legible below 10 points.

As PC monitors surpassed the pixel density of Mac monitors in the mid-1990s, websites built on Windows boasted smaller font sizes, much to the dismay of Mac users. Today, screens for both platforms enjoy pixel densities high enough to make the differences moot.

 

Elastic Web Images With Modern Browsers

We know now that DPI alone doesn’t change an image’s size on the web, and we have no control over which device an image is displayed on. So, are an image’s pixel dimensions the only thing that matters? Yes… for now.

Fluid-width layouts, which change according to the browser’s size, can better accommodate a range of devices and monitors. Modern browsers, from FireFox 3, Safari 3 and Internet Explorer 7 and up, are better than older versions at scaling images on the fly. The max-width CSS property forces images to fit their container but not grow past their actual size. For example:

sample photo 800 pixels wide

p { width: 25% } /* A quarter of the content area */
img { max-width: 100% }


sample photo 800 pixels wide

p { width: 50% } /* Half of the content area */
img { max-width: 100% }


sample photo 800 pixels wide

p { width: 75% } /* Three quarters of the content area */
img { max-width: 100% }


sample photo 800 pixels wide

/* No width set for the paragraph */
img { max-width: 100% }


Here we see one 800-pixel-wide image fit into four different-sized paragraph elements. If the page width were flexible, resizing your browser window would expand the image—but not past its original 800 x 323 pixel dimensions. It would never become distorted, or “pixellated,” from over-expansion.

Preparing images for the web means planning in pixels. If someone asks for a 2-inch graphic for the web, not for print, ask them, “How big are your pixels?”


Written exclusively for WDD by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

In which media does resolution count? What’s the best way to size online images? Share your ideas below.


Share this post
Comments (no login required)
  • http://www.livinginrome.net Deborah Swain

    one of the best overviews of a subject that has always confused me that i’ve ever read – thanks!

  • http://www.designsy.com designsy

    interesting read indeed, we are expecting the best from you WDD, thanks for the work.

  • http://www.livewiretech.com.au Mandie

    you make it all sound so eeeasy!

  • http://rafaelcavaweb.blogspot.com Rafael Cavalcante

    Great post!

  • Dennis

    Very good article. I really liked it and learned something. Thank you guys

  • http://www.gonzoblog.nl Gonzo the Great

    Hi Ben,

    thanks for this great article, a good and in-depth explanation of DPI & PPI. Glad you’ve shared this with us, Cheers & Ciao …

  • http://www.aw3design.net Astho

    clear explaination, thanks…

  • http://www.danielecarotenuto.it Daniele Carotenuto

    DITTO! It’s a war I’m fighting since 15 years ago, also many really experienced graphic designers still don’t get that essential point!

    I will share it for sure to any of them!!! ;)

    Thanks
    D

  • http://www.squiders.com Web Design Kent

    destroying the myths of the design world is always appreciated, will refer back here next time someone argues this point!

  • John Brett

    Nice article, though I would have liked you to have at least brushed upon the delicate balance of image size to file size.

    While yes, your thesis is correct, the consideration of utmost importance is load time…and a 30k image will take the same time to load as a 30k image no matter the actual pixels used.

    Thanks again for your work.

    • http://benthinkin.net Ben Gremillion

      You raise a good point, and file size & compression almost made it to this article. But I decided that DPI & PPI was enough to cover without introducing file size, compression type, artifact trade-offs, bit depth, embedded gamma, caching and other factors that affect download time.

      Of course, file size is an important subject, but not as big a misconception.

      • Ted

        So does DPI affect the file size/quality equation for web design?

      • http://benthinkin.net Ben Gremillion

        Correct. The number of pixels, the type and amount of compression (such as jpg 10% vs. jpg 60% or a gif with six colors vs. 60 colors) and the quality of the original image (such as the lighting in a photo or antialiasing of text) are the major factors that affect image quality.

        File size, as John mentioned, is important — but doesn’t depend on pixels per inch. DPI and PPI are factors only if they’re used to change the number of pixels the image has. Otherwise 100×100 pixels at 72 DPI appears the same as 100×100 pixels at 300 DPI.

      • Ted

        OK, that makes sense. Thanks Ben!

        FWIW The people I work with usually have to resize the images from LARGE images (as in 3000 pixels by 4000 pixels, or whatever), so we have to resize the image dimensions, then I guess out of habit we change the DPI to 72.

        For us, it’s more a matter that there’s a web version that’s 300 x 400 pixels, and a non-web version that’s 3000 x 4000 pixels. Hopefully the ones who do the printing know how the DPI affects them. ;)

      • Tom

        For the record, the answer to the question
        “So does DPI affect the file size/quality equation for web design?”
        is a clear “No.” — As Ben said, only resolution and compression do.

  • Graham

    Aren’t newer devices increasing the amount of PPI? Does this change things?

    ie: – http://www.apple.com/ipad/specs/

    • http://benthinkin.net Ben Gremillion

      Not exactly. The iPhone’s 163ppi means if you hold a ruler to the screen, and had really good eyesight, you could count 163 pixels in a linear inch. Its pixels are larger than the iPad’s, which only fits 132 pixels into one inch.

      Try this: If you can, set your monitor to 1024×768 pixels. That’s how many pixels an iPad has. But if your monitor larger than the iPad’s 9.7″ display (say, if you have a 17″ monitor) then your pixels will be larger than an iPhone’s pixels. Hold an iPad next to a 17″ screen at the same resolution and a graphic will look smaller on the iPad. Same number of pixels on a larger piece of glass means a different ppi.

      Apple’s ppi measurement tells how many pixels they fit into a given space. Higher ppi means that, eventually, we as web designers will be able to make larger graphics — like a 64×64 pixel icon instead of 32×32 — because the pixels will be more fine.

      But 1024 pixels wide is still 1024 pixels wide.

      • Tom

        First paragraph should read: “[The iPhone's] pixels are **smaller** than the iPad’s, which only fits 132 pixels into one inch.”

  • http://www.fuzebit.com Web Design Rockland

    Very interesting, nice CSS example also.

  • http://www.graphicriver.net/user/oreius Tanner

    Thanks WDD great article!

  • http://airopia.org Tom – Airopia

    Nice article. Very useful for people starting off with Photoshop and web design.

  • http://www.technicalinterviewquestions.net dev_interview

    It finally make sense to me now. I’ve been a developer for a few years now. Never really took the time to understand all this.

  • Fabian

    Nice article, but ain’t it „Cicero“ (not ciero)?

    • http://benthinkin.net Ben Gremillion

      You’re right: Cicero is a unit of measurement. Ciero is a demonstration of spell check’s “ignore all” feature.

  • Splat

    Thanks for this article.

    I never really understood the need for the DPI values in images. The only time I think that I have ever seen it used is when you insert an image into a print program such as Illustrator, where the image is inserted in the correct dimensions according to the DPI value. Eg. If you have an image that is 300 pixels x 300 pixels, @ 300 DPI, then when you insert the image in Illustrator, it will be 1 inch x 1 inch. But as soon as you make the image bigger or smaller in Illustrator, the effective DPI value of the image is changed.

    For web design, I’ve never worried about DPI – I just stick to the pixel dimensions.

  • snlr

    Great post! I was already aware of a few of your arguments. Whenever I’m talking to fellow web developers about this topic, I get stared at for my “ignorant” opinion. “Didn’t you know ‘a screen has 72 dpi'” and so on. “Look, when I resize this in Photoshop to 300 dpi, the image is much larger.”

    When I attended media design classes in 2001/2003, all this nonsense was even taught, by grown up teachers, and the topic of tests. These circles are run by designers who have little knowledge of technical details, and have no “engineering attitude”, i.e., they do not look behind the curtain.

    I took a class with a designer who actually complained how “everything in the world” is ugly because it’s usually made by non-designers. And then “make that image 72 dpi for the web”. Good LMAO times.

  • Yael

    Maybe I’m missing something, but I always thought we set web (screen) images to 72 dpi because: A- finer resolution would not be noticeable on screen since that is the usual max of pixels-to-area, B- to keep file sizes small enough for good load times, yet large enough to look crisp.

    It could also be the late hour – almost midnight (and awake and working since 7:30 AM)…

    • http://www.superheroindustries.com sixreffie

      I was taught that if you were making an image for web, you make it 72dpi because, like you said, it saves at a smaller image size and that there is no need for it to be any higher because it will only display at 72dpi anyway. My world has been turned upside-down, trust and professional admiration challenged, and $50,000 investment put into question. There was a time when an artist could be a moron but still be a good artist. To be a good digital artist you have to be some kind of nerd/artist combo. Behold the nertist.

    • http://www.wevegotideas.com jhoysi

      I think the point the article is trying to make is just noting the difference between resolution and image size (dimensions). DPI is going to affect your file size, and that is an additional trade off you need to make as a designer.

      It always comes down to whether or not the load time is worth the payoff of having the image at a higher quality. On some sites it won’t be worth the time, because the image is supplemental. Other sites, the image communicates strongly with your audience and is worth the wait.

      • Tom

        DPI does not affect file size. A DPI setting never alters the image, its resolution (e.g., 800 by 400 pixels) as well as its file size (e.g., 400 kilobyte) stay exactly the same.

        I sense the need for a follow up article ;-)

    • Tom

      Yael,
      that’s a thing of the past (actually, it’s really never been true..). Think of the DPI setting as a note to your printer that reads “Hey printer, if I ever tell you to print this, please make it the following size: (Resolution*DPI)”.

      Printing an image is the only time DPI matters, and changing the DPI does in no way alter the image. Like I said, consider it a comment on its size *when printing*.

      I wish everyone (but print designers) would just forget about DPI ;-). I’ll repeat: In web design, the DPI setting is completely meaningless whatsoever. Ignore it.

  • http://www.creatusdesign.nl/ Gert van den Brink

    Thanks for the information, clear and very usefull!

  • http://www.iconfinder.net Martin LeBlanc

    Finally an article that explains the DPI – the most misunderstood term when working with design.

    Thanks.

  • http://www.bdirectory.org sara

    wow. great post and too much helpful for me. love it..

  • Taha

    Nice article. I knew it before but this article is a detailed explanation for this. One more thing to understand this is to check this image size in Image Size box. Increasing the DPI doesn’t increase the size of image but the resolution does.

  • http://www.aledesign.it aledesign.it

    Interesting this post. Important for my job. Useful. Thank you so much!

  • Dani

    I know that dpi has nothing to do with screen or file size, but it does effect print size, the reason we save at 72dpi, is so that people downloading the picture from the web, can not get a decent quality print from it.

    • Tom

      Then again anyone can just change the DPI to their liking — which most image editing programs and even MS Word make really easy. Chances are the user has never heard of DPI but still manages to drag the corner of the image while in Word…

      • OllieJ

        @Tom: Enlarging a 72DPI image downloaded from the web only increases the size of the dots/pixels, not the quality of the information contained within.

      • Tom

        Yeah, of course, but the DPI setting is irrelevant. Either the image was published at a high enough resolution for a nice print, or it wasn’t. Setting the DPI to 72 is once again a waste of time.

  • http://charanj.it cchana

    great article. really enjoyed reading it. some great food for thought there. i don’t know why, but i just assumed saving at 72dpi was better for the web. surely it affects file size if nothing else? but then i guess you could go to an extreme and save fewer dpi to get a better file size where appropriate?!

    • Tom

      Nope, it does not affect the file size (or quality, for that matter).

      The DPI setting of an image is simply a tag telling the printer to print the image at a certain size (or, more technically, density or of ink dots).

      Printing an image is the only time its DPI value matters, in any other application (photo editing, web design, …), just ignore it.

  • http://stefan-reichert.com Stefan

    Great article. Give us more of this high quality stuff.

  • M.R.

    Thank you very much for posting this informational article. I’m going to bookmark it.

  • http://virtua-gallery.com Klaus

    Good one! There’s a lot of mis-information and wrong assumptions on the topic, that are going around. You did a good job on clearing that up!

  • eryui

    All i always knew is that above 72dpi are not noticeable on computer screen as Yael said, while about to print, higher dpi produce clearer and more detailed output (generally i use 300dpi).
    Indeed if you save for the web a jpg in photoshop it will be always 96dpi (at last on windows pc).

    For the web i’m used to work always on higher resolution to work easy on the details then reducing them at very last before to save for the web to match the dimensions as needed and research the deal between the look and the bytes.

    No matter if connections are now days faster, i used to work when the max bandwidth was 64kbps (in the “95) and still like the pages who load in no time.
    And yes fixed pixel (if not just for backgrounds or headers) to me have been always the only choose.

  • http://www.jordanwalker.net/index.php Jordan Walker

    I get asked this question all the time by salesmen who want a 300 dpi image for their customers ad brochures.

  • http://rainfallgraphics.com Matthew Simmons

    This is a fantastic article.

    Something that I’ve never really thought about before but, it makes perfect sense.

    Thanks!

  • http://Balgle.DESIGNERTEAM.INFO New York Web Designer

    Clear Explanation, And the example are really great.. Thanks for the information.

    I love coming back here to check out your latest content.

  • Cole

    I agree with John above, that at least a passing mention of file size is important. But the article is a spot on.

    The place where these issues appear the most for me have nothing to do with initial design of websites, but rather content management going forward, AFTER as site is built. Sites backed by CMS offer clients the opportunity to add the own imagery to their content, photo galleries, etc. This is where file size and resolution become very important.

    When client pops a 8M digital photo into their content, even if we’ve restricted its physical display dims via the code so that it doesn’t blow out the layout, that image has various critical effects. 1) It loads slowly 2) It eats both server disk space & bandwidth 3) It reduces the quality of the user experience overall.

    The remedies tend to be educate the client or build automatic image crunching into the site. Option one befuddles a large percentage of even web savvy clients. Option two can require additional expense for the client.

    On the other hand, the idea of using flexible imagery and CSS to assist controlling it within the design of a site is intriguing. If done with reasonable balancing of file size and design benefit, I can see great things for this technique, especially as end user bandwidth increases. Definitely something I will experiment with.

    • http://website.com pR0fessor

      DPI IS POINTLESS and you can almost completely forget about it.

      Well, almost. Go ahead and tweak the dpi all you want and then browse to it on the web and paste it back into photoshop. THE FILE STILL HAS THE SAME NUMBER OF PIXELS. Look at pixel height and width. Worrying about the dpi setting in a jpeg is like worrying about somebody else’s silly note attached to the file.

      The file has information in it called pixels. There are a certain number of them.

      The file has a note from you saying, “I don’t know how big your pixels are but 72DPI looked good to me.” And that is ALL it is.

      The file has a little memo attached from you saying… please take this 72DPI information and use it. And that’s it. And then almost everybody ignores it. Monitors all ignore this number and simply map each jpeg pixel to a monitor pixel. If the monitor is at a ballpark with 4 inch pixels… OR if it’s sitting on your desk, or anywhere, DPI does not matter to the monitor. The monitor has the same size pixels all the time and couldn’t possibly care less what size your memo wishes them to be. And it does not change the level of detail in the file itself. It’s just a note with your wishes on it. Most often ignored.

      The printer doesn’t care either. Your printer is too smart for that. It uses the TOTAL number of pixels available to give you the best output possible.

      So just forget the inches in a jpeg already.

      Worry about the number of dots TOTAL (AKA Resolution, AKA 1024×768, etc) and forget the “per inch” part.

      • Tom

        Great reply.
        I actually used the “little memo attached” metaphor a few posts up before reading this. Reading the comments, there still seems to be a ton of confusion about this. I think your advice, “Ignore DPI completely!”, can not be stressed enough and should be in giant, bold letters at the beginning of this article…

  • JuggoPop

    Very nice.

  • http://samhendricks.com Sam Hendricks

    yes, DPI does not matter on the web but most savvy interactive designers stick with 72 dpi, like Yael noted, to save file size and increase load times.

    • Tom

      Sorry, but this is exactly what this article tried to clear up: What you just said is 100% WRONG. Don’t mean to be harsh, but please, people, forget about this myth of DPI having any effect whatsoever on quality, file size, load times, the weather in Kansas.

      DPI have ZERO impact on any of this. Changing the DPI setting does NOT change your image in ANY way whatsoever, it is merely adding a little note saying “Printer, please print me at the following size: …”.

  • Pheis

    “Seventy-two is a magic number in printing”
    What? I’m currently studying the subject and as far as i know, 72 dpi isn’t even nearly enough for print…

    • http://benthinkin.net Ben Gremillion

      To clarify: I meant that 72 is important as a basis for typography in the print industry, not the act of printing. Early units of measurement were based on 6, 12 and 72. Many default type size settings are multiples of 72, including 12, 18, 24 and 36. Also, 72.27 points = one inch.

      “Magic” might have been too strong a word; “celebrated” or “famous” might have been more appropriate.

  • http://jessemcfarlane.com Jesse McFarlane

    Yael, it doesn’t matter, the overall pixel count and the content of the image determine the filesize, not the dpi (ppi in reality, it’s only dpi in print).

    Good article, I just wish you would have titled it “The Myth of DPI on the Web” or something along those lines. Calling DPI flat out a myth in the title is bound to cause a bit more confusion working in the other direction–web designers to print–something I encounter more and more of. Your first paragraph clarifies but people consume web content at such a rapid pace that a misleading title can cause grief.

  • squirtle

    I might be wrong but I seem to remember back in the day IE 5 & 6 did not display 300+ ppi images or CMYK images.

  • http://www.phillipecw.com Phillipe Calmet

    Definitely a MUST read for all designers. Great article.

  • snlr

    Ha ha, so funny … this article is called “The myth of DPI”, yet more and more comments go like “yeah just to safe file size, it’s a trade off bla bla”. The article explains the difference between resampling and resizing! Or just go to this other article http://www.rideau-info.com/photos/mythdpi.html and look at the 2 images. We only have to remember one single thing: if you make an image smaller, you safe bytes, if you make it bigger, you add bytes. Forget everything else. “DPI” is just a number. You can set it to 1 million or to 1, it doesn’t matter.

    • Tom

      Yup, 50% of the comments say “Nice read” — giving us no indication of whether they understood it or not –, 10% understand it (but probably did already), and the other 40% are still confused at best and mostly plain wrong…

      I hope this doesn’t come off as arrogant; as a programmer this just seems very obvious. I have high respect for designers though, they do things I never could! :)

  • ToddZ

    tl;dr?

    Interesting that after all that in-depth explanation, a couple of readers are still confused. Maybe this article went *too* deep.

    I’ve been fighting this battle for years and I’ve found that the best weapon is a simple one: I tell people that “the dpi setting is just an instruction for printers that is saved with the image; it does not affect the appearance or size of the image file.”

    • http://www.spark-creative.co.uk Mark Astle

      But that’s not true is it? The DPI does affect the size and appearance of the file. Particularly in print.

      Look, it’s simple – on the web, as small as you can get away with while keeping the image quality high.
      In print: 300dpi @ 100%.

      That’s it.

      • Tom

        You’re both right.

        Just change “Particularly in print” to “…affects size and appearance ONLY IN PRINT.” — which is why you can completely ignore it in web design.

  • http://illusiodesign.com Chuck Spidell

    I feel like a pixel nerd after reading this. Excellent post.

  • alone

    Wow! This is one of those post that every designer should read and know. Thank you!

  • http://learningtheworld.eu Martin Kliehm

    You are right that for images only pixels count, but there are two exceptions where DPI do matter on the web:

    1. Print logos: insert a second logo in high-res (300dpi) that will be only displayed in print, and you will be surprised by the quality.

    2. CSS font sizes in em units in IE. Of course there’s a bug in IE: on 120dpi screens the default font size isn’t 16px, it’s 20px. See http://www.williamkolean.com/williamblog/?p=18 for details.

  • http://www.wisnaes.com/ Svein

    Nice to see this topic revisited again. I wrote a blog-post some years agon on this very topic. :-) http://www.wisnaes.com/2005/09/29/why-dpi-does-not-matter/

    It is not as elaborate as yours, but covers the essential.

    The people that has the most problems understanding this are people that are used to relate to output on paper. It takes a lot of demonstrating and hands on to get them to a point where they can agree that dpi has no relavanse in screen media.

  • David

    Wow! I think I’m finally getting it after many years. Thanks for the write up, this really brings many things to light that I’ve always wondered about. Awesome!

  • Uri

    Great post.

    Where DPI does matter is in interaction with other apps. Not all apps regard the resolution mute as html does. When you import a JPG into After Effects or flash, it’ll be resized (in some apps by reducing the number of pixels in a destructive manner, in others, maintaining the data) according to the defined physical size (which is the equivalent of selecting ‘print size’ in Photoshop, and varies with monitor resolution as it it was designed for 72 PPI).

    Also, as far as I could tell, Explorer 7 still produces jagged diagonals, a result of ‘nearest neighbor’ method) when resizing images using HTML (unlike Safari or FF).

  • http://oradesign.com.au Owen Anderson

    Thanks, I learnt a lot in this article. Wish I read this years ago!

  • Uri

    Correction: Later versions of flash and AE no longer resize. However, some apps still do, although they may not be relevant to web design (e.g. illustrator).

  • http://www.mcbwebdesign.co.uk Martin Bean

    That was a pretty riveting read and made me realise just how ignorant I am to resizing, resampling etc.

    If being asked to produce a graphic, I’ve always asked if it’s for print or web, and then set my DPI to 300 or 72 respectively. Then if designing for print, moaned at clients for providing low-resolution images.

  • Sven Assmann

    I always recommend students to distinguish between

    digital images > pixels > ppi (pixels per inch NOT dots per inch)
    and
    printed images > dots > dpi (dots per inch)

    Example:
    An offset printers has the specification of printing with 60 lines per cm ≈ 152 lines per inch.
    152 lpi x quality factor 2 ≈ 300 lpi (right, that’s where the magic number 300 comes from)
    Now, we also have 8-bit pixels (256 greasy for each channel (RGB)): a matrix of 16 dots x 16 dots can reproduce 256 different halftones.
    Therefore: 152 lines per inch x 16 dots per line = 2432 dots per inch. 2,432 dpi is the resolution of an offset printer capable of printing 300 ppi images.
    Ever wondered why your ink jet has 1,200 dpi?

  • http://www.blog.hatfullofrain.com Saptarshi

    Excellent article. Thank you SO much. :)

  • http://www.technoblue.com pamela

    Hello,
    It’s really good post about web designer
    i think I always thought we set web (screen) images to 72 dpi
    Thanks for this post

  • http://www.empfehlenswert-wien.at wien

    great post, thanks

  • vnikey

    Great article, thanks!
    I like very much the pointe “Ben is a freelance web designer who solves communication problems with better design”…

  • Opally

    Thanks very much for this explanation, I see I can stop resampling to 72ppi before saving-for-web! I learned that process a *long* time ago.

    I learned as much from the comments as from the article; thanks @Yael, @eryui, @Jesse McFarlane, @Martin Kleihm, @Uri. A lot of web designers come from the print world, where DPI is very important indeed.

  • http://www.alejandroperazzo.com Alvaro Hernandorena

    nice article is obvious, in my experience i worked first for web content and always in pixels of course, years after when i started to make some things for printing i learnead about dpi.

    regards

  • http://www.clippingimages.com Clipping Path

    wow… nice article, it’s really interesting to me. thanks :-)

  • Grant

    Very disturbing to find that yet again, another person is trying to dispel a myth by adding to it and infecting thousands more in our graphic community.

    Let me preface by saying there are some truths to PPI (pixels per inch) and how important it is when designing for web vs print to be cognizant of the relationship to the final output.

    As for the relationship to printed media – the PPI can only be properly determined by knowing the output resolution of the print device or print method. Lets not confuse DPI and PPI. There is no setting in Photoshop that ACTUALLY allows you to determine the physical size of a dot – only the relationship between pixel and output. This doesnt even take in consideration Stochastic / FM printing.

    I appreciate that this article was written with good intentions – but this issue of DPI vs. PPI vs. LPI vs. SPI is one that should be carefully documented in all instances.

    pixels are not dots and never will be dots.

    Get educated where it matters – get a job in prepress.

    Thanks to those above who’s comments help add genuine clarity.

  • http://www.juliankrispel.com Julian Krispel

    I just noticed something interesting, the 3 images have slightly different sizes, I wonder why that is?

    26791 bytes
    26793 bytes
    26795 bytes

    They only differ by 2 bytes each. It’s a ridiculously small difference, but still a difference, can anybody explain this? :D

    Very nice article!

    Best

    Julian

    • http://benthinkin.net Ben Gremillion

      That’s a good catch. Using Photoshop’s Save As command (instead of Save for Web), I just created JPG files at 1, 3, 5, 8, 72, 73, 99, 150, 900 and 30,000 DPI.

      It looks like the integer itself makes a difference: Images with double-digit file DPIs were consistently two bytes larger than those with single-digit DPIs, and three-digit DPIs were another two bytes larger. The 30,000 DPI image was four bytes larger than those with three digits.

      Can anyone else reproduce this?

  • snlr

    @Julian – my guess is that you hit the nail on the head right there. Since DPI don’t matter at all on the screen, the number called “DPI” is just saved inside the image somewhere as a simple text string. One could probably look that up in the specs of the respective image formats. Since we have 36, 150 and 3096 in this article’s examples, each image should need exactly one byte more than the previous (one character sometimes takes up one byte). Still, just my guess. The 2 bytes are rounding errors? Or they are stored as 16bit characters?

    Obviously, the designers are right – by saving our images with 72 instead of 300 dpi, we save 2 bytes!! Give or take. Make that even 1 dpi instead of 72 and your image is already much smaller!!

  • http://www.sentril.com f. garza

    great post, so much information!

  • bubbagrump

    Thanks to Grant for being clear-headed. For an article that is supposed to help make clear an important issue it does a pretty good job of convoluting things.

    The author should not make blanket statements about the intent of an image, and the reader needs to be aware that this doesn’t apply if a person wants to print an image.

    “Yet many people go through the trouble of setting their images to 72 dots per inch (DPI). … The misconception about resolution in digital images, especially ones bound for the web, is that they must meet a certain number of dots per inch.”

    so, even the author is having a hard time distinguishing between PPI and DPI. a person does NOT set their images to 72DPI — they set them to 72PPI. But he’s right — there is a misconception about meeting a certain number of dots per inch, because the requirement is to meet a certain number of Pixels per inch.

    oh, and that part about “especially ones bound for the web” — should be “only ones bound for the web” or something to that affect.

    i had to stop after that…

  • http://www.spark-creative.co.uk Mark Astle

    Spot on Bubba. You know, I think the main problem is that there are far too many people who now think ‘designer’ just means someone who makes web pages. And many many of those people have no formal design training whatsoever. Which is where these kind of problems arise. And why there are so many generic looking web pages around nowadays. The web is just another medium for graphic designers to work in. It’s not the ONLY medium.

  • Terry Veiga

    This truly feels like a Twilight Zone episode. As I read through the article, I was getting increasingly upset about the misinformation and the author’s own contradictions and apples-to-pickles comparisons. But then as I read through the many readers’ “atta-boy-award-winning-innovator” comments, well, I just got scared and sad. Thank the design Gods for designers like Grant #60 and Bubbagrump #64 that actually caught on that this is an evil test to see who really knows their craft. Please, Please, Please spend and hour on Google and some credible sites on this topic THEN come back and re-read this.

    • Cole

      Terry, come on, cough up the goods. Inquiring minds want to know. Debunking is great, but why not offer clear and obvious resources to educate the unknowing masses? What do you suggest folks search *for* via Google to find these credible sites? How is a credible site identified?

      • bubbagrump

        cole — your incredulity is unfounded. Terry is absolutely right. and i find it hard to believe that you came this far and can’t use Google to search for “Pixel vs. DPI”. Terry was also giving you the benefit of the doubt. maybe that’s our mistake…

      • Cole

        Incredulity? There was none whatsoever. I was just poking at Terry for alluding to the credible resources on the subject and then not offering any mentoring assist. No “here’s a great credible resource” link.

        If y’all are going to get all bent about the article’s inconsistencies it would seem to me you’d want to make it as easy as possible for the ignorant masses you & Mark hold such distain for to find the credible information that meets your standard.

        But a few of the comments here by you and Mark have been PURPOSELY been meant to belittle anyone YOU don’t feel is as savvy as yourself. Boy that’s helpful.

        Seriously, if you have all the answers, do everyone a favor and share. Then you’d not have to get so pissy in your superiority.

        Terry’s comment was fine. He/She did not take potshots at novices, question people’s professionalism, question their intelligence, pretend that a tool (photoshop) does or doesn’t make one a designer, etc.

        You & Mark did that. Are you unable to contribute to a conversation without such spewing adolescence?

        Try being more like Grant. He brought true value to the conversation instead unnecessary bile.

      • bubbagrump

        Grant was nice about it, yes, but it didn’t stop people from being stupid. not that my diatribe did either, but it made me feel better. i stand by my belittling condescension.

      • Cole

        ok. I’ll roll with it and take your comments with a pixel of salt.

        I stand by my assertion that offering education is a better solution to a problem than condescension.

        So, for anyone digging this deep, maybe these are links that will help dispel the dpi/ppi/print/web resolution issues. Are they credible? Well, everyone knows everything on the web is true, right?

        PPI vs DPI (re: photographic prints)
        http://www.design215.com/toolbox/print_guide.php

        PPI/DPI/Pixels/Dims
        http://photo.net/learn/resize/

        That’s all I got. My resolution is getting fuzzy.

      • Tom

        That second link is good, a quick search shows that Wikipedia also has a section about this that’s decent:
        http://en.wikipedia.org/wiki/Dots_per_inch#DPI_or_PPI_in_digital_image_files

        Unfortunatly, neither are *really* short and to the point. Therefore, feel free to follow this handy guide:

        In short:
        Are you a web designer? —> IGNORE DPI at ALL TIMES, completely erase it from your brain, it has zero impact on you.
        Are you a print designer? —> By god I hope you know about this already! ;-)

      • Cole

        Now that is the issue condensed to its essence. And, done sans the scorched Earth policy of other commentators.

        I admit that regarding web graphics I always considered 72 ppi was the shizzle. However, since oh…2000 maybe, nearly all of my web design has run through Fireworks. Therefore, scrunching and sizing has already been done. Everything that comes out of it is already the proper pixel dims for the screen, regardless of where it started. Just so happens it is also 72 ppi. This includes all interface and most image production for ecommerce, “in-line” images, galleries etc.

        Sizing of imagery has just never required any angst or extra steps during production. It’s all being designed for its end use.

        Just the same, all print design has been a print res. 12 years of non-issue via InDesign/Illustrator/Photoshop…oh and Quark during the dark ages pre-OSX :^0

        The one place where I have incorrectly perpetuated the myth is in dealing with clients putting their own imagery into a a content managed site. I’ve alway told them “You need to reset your image to web res.”, when actually I could have just been telling them “just resize that puppy to the right pixel dims and you’ll be safe.”

        So, that’s a good thing.

        The niftiest nugget I saw in this article regarding web imagery though, was the idea of using a higher res (and pixel dim) image and using CSS to size it to a relative % in an elastic layout. That could have some interesting usage. Granted the vertical dim changes as well, but that could come in handy now and then. It’s just something I never thought of doing before.

      • bubbagrump

        that’s alright… you guys keep holding the party line. more job security for me.

      • Splat

        Hi Cole, I have been using a low-res image for displaying on screen, but swapping it with a high-res image for when a page is printed.

        I used this technique on this site: http://www.oceanfinancial.com.au, just for the company logo. When you view the page on screen, the image that contains the hi-res logo is hidden, but when you go to print it, it is displayed at 15cm wide (6 inches). So for print it is about 350dpi (2100 wide / 6 inches). It makes the logo look much better when printing, rather than being the default 72dpi and looking somewhat blocky.

        To get this to work I had to use an IMG as I couldn’t get a CSS background to scale as I wanted. Also, please note that the logo is line-art with only a few colours, so it compresses well in a GIF.

    • Tom

      Painful, ain’t it…

      (In my mind I’m shouting at the uneducated masses*, “No, it will not decrease your load times! No, it will not make it prettier! No, …no.. nooooooooooo…….!” faints.)

      *no offense intended

  • bubbagrump

    i’ve been following responses to this, and i can’t believe that the idiocy continues.

    again, you guys are confusing the point. PPI is NOT DPI. RESOLUTION is referring to PPI, NOT DPI — JESUS CHRIST!!! you guys call yourselves professionals?!

    get your heads out of photoshop and take a look around the greater Graphic Design landscape. if you are using a program like InDesign or Illustrator, it makes a difference when placing the file on the page as to the physical dimensions of the file and how that file needs to be manipulated.

    using the sample images above, take the 36PPI — NOT DPI — image and place it in Illustrator. it comes in at over 11 inches wide. now place the 150PPI image. it comes in at 2.5 inches, AS SPECIFIED IN THE DOCUMENT SIZE.

    oh, wow! imagine that… the program is too stupid to know that those images are exactly the same size! i can’t believe the engineers at Adobe are so stupid. they should hire this guy to teach them a thing or two…

    • Sven Assmann

      @bubbagrump.
      I’m afraid I have to agree. The article is mixing ppi and dpi again. They’re NOT the same, that’s why Photoshop only uses the term ppi when setting images.

      cf. my comment #52

      • bubbagrump

        SPOT ON with that…

    • wolff

      The point of this *article* however, is not to distinguish between DPI and PPI. Because *both* are entirely irrelevant for web design.

      Browsers will always work on the given pixel data, and changing your PPI hint is not going to change that data. (Thus also having no effect on file size, except a few bytes for storing that additional number.)

      What this article tries to debunk is that setting your PPI somehow changes the file size, which is just plain wrong. For the case of browsers, it does not even change the *apparent* size of the image, so I have no idea where this idea comes from. Dear designers, have you never actually *looked* at the resulting files?

      To summarise:
      Pixels = The information you are actually going to send to a user. This is what he has to wait for. For web: Also the default display size.
      PPI = Gives hint for *physical* size the image *should* have. Only interesting for print setting (e.g. paste into WYSIWYG editor; not actual printing, though).
      DPI = Property of a given printer. Only relevant when you’re actually going to print a document.

  • http://www.spark-creative.co.uk Mark Astle

    Haha again, spot on Bubba. Another way to spot a designer who’s not really a designer – he does everything in photoshop. Even logos.

    • bubbagrump

      *shudder*…

      rule #2: just because you can, doesn’t mean you should.

  • http://www.cobaltcow.com Nathan Sarlow

    Wow, the comments seemed to get aggressive all of a sudden.

    I think its faily obvious that Ben was purely talking about WEB design and not print design – after all the website you’re on is called WEBdesignerdepot not PRINTdesignerdepot or even designerdepot.

    The underlying issue is that strictly in WEB design and development, the so-called ‘requirement’ for images to be set in 72dpi is a myth, and really makes no difference to the quality or file size of the image (give or take a few bytes as per SNLR’s comments).

    The question I have is – do browser print functions take the DPI into consideration? I have a feeling that they do not but would like some clarification.
    ie. if i view a JPG image in Ffox (not within HTML) and print it, will it read the DPI setting within the image or just convert it to 72 as it would if the image was being printed from within HTML.

  • FartimusMaximus

    A really good overview for anyone still uncertain. As incomplete as it may be, just telling people “DPI for print and PPI for web” is really all that needs to be said. If people still don’t believe you after that…they really need to read this article.

    • Tom

      add to that:

      ….and as a web designer, you have NO control over the PPI of your users display. It is a physical property of their display, whatever it may be (computer screens of different types and sizes, smart phones, …)

      THUS ignore DPI/PPI — just forget them. No, they don’t affect the quality. Neither do they affect size as in dimension, nor file size or load times, nor resolution, nor …anything.

      DPI/PPI ARE TO BE IGNORED AT ALL TIMES.*

      *Unless you are a print designer knowing is stuff, in which case you’ll already know.

  • http://fiddlersblog.com Daniel

    Thank you so much! From now on I can refer to this article as soon as print-people talk nonsense about dpi in web-graphics again. They never believed me … but finally time has come for vengeance!

  • http://www.skaloot.org skaloot

    OMG..!!! I JUST SPENT 3 HOURS OF MY PRECIOUS TIME JUST RESIZING ALL THE IMAGES THAT I WANT TO USE IN WORK…(CLIENT’S WEBSITE)

    AND THIS REALLY CAN REDUCE THE PROCESS DURATION…(MAY SPEND IT TO WATCH MOVIES…HEHEH)

    THANX!

  • bubbagrump

    ok, look. it comes down to this:

    72ppi for web graphics is an agreed system of measurement, like using Base 10, or Base 12, 1/32 scale, agate, point, whatever. this allows for agreement and interaction in environments other than a web browser.

    as a designer, you should always work in the same scale. don’t mix inches, picas, etc.

    this may come as a surprise, but not all designers work in Photoshop. i do all my art builds in Illustrator, so if i place an image at 36ppi then it comes in too large and i have to scale it down. therefore, the PPI setting of the image MATTERS TO ME.

    my railing before was the author’s blanket statements, in addition to factual inaccuracies, about how an image should be used in relation to himself and not thinking about how others might use images, or why whole industries were built around 72ppi as a standard. it’s completely ignorant to say that it was all done because of some standard that Apple conveniently set, and i’m sure there are engineers at Adobe and other places who would say it’s incredulous to reduce all their work to a fluke.

    • http://www.spark-creative.co.uk Mark Astle

      Again, bang on.

      • bubbagrump

        thanks, Mark.

  • MacG Adobe Certified Expert

    I strongly recommend to remove this article as I find it confusing for all those “thankful users”. It’s so wrong in many aspects… and leads to more confusion. DPI {dots per inch is refering to output devices such as printers (or input such as scanners) therefore you don’t have control over DPI…} the only control you have is to provide solid resolution for these devices to translate PPI to DPI (or setupu scanning preferences).

    “An inkjet printer sprays ink through tiny nozzles, and is typically capable of 300-600 DPI.[1] A laser printer applies toner through a controlled electrostatic charge, and may be in the range of 600 to 1,800 DPI…
    The DPI measurement of a printer often needs to be considerably higher than the pixels per inch (PPI) measurement of a video display in order to produce similar-quality output. This is due to the limited range of colours for each dot typically available on a printer. At each dot position, the simplest type of colour printer can print no dot, or a dot consisting of a fixed volume of ink in each of four colour channels (typically CMYK with cyan, magenta, yellow and black ink).”
    SOURCE WIKI

    In your “Resizing and Resampling in Photoshop” section you have a screen grab from Ps with DPI pointing to PPI, that in my opinion is very wrong… as this section allows you to control PPI and PPI only
    I assume you have a web design background…
    Regards and no offence..

  • http://www.wisnaes.com/ Svein

    I have a suggestion for all you print people:

    Take a deep breath and don’t waste any more time or space here. This article was not meant for you and the only thing you can take with you is:

    When you work on screen based media, the resolution setting, whatever that may be, do not matter.

    Someone here was arrogant enough to assume that this only applies to web. Let me educate you a little: I have 20 years of experience in a different area where the resolution still do not matter – TV. So the article is still good. There are more and more screen based systems coming, one of the most interesting is mobile phones. Guess what? It does not matter there either!

    The ONLY thing that counts is the number of pixels. Period.

    So to anyone reading this far down the comments: FORGET everything you have read here. REMEMBER one thing: The number of pixels in your graphic or picture.

    If it has to be 150 x 100 pixels, then that is what you need. If it has to be 400 x 480 then that is what you need there. If it has to be 1280 x 720 or 1920 x 1080 then that is what is needed in HD. SD (standard definition for TV) has some other challenges, but that is good stuff for another blogpost :-)

    I really did not know there were this many trolls around here… This site is after all WEBdesignerdepot.com!

    • bubbagrump

      uhm… ok, again, i am a web designer, and i know the difference. i understand what you guys are saying, but it’s factually incorrect and assumptive.

      also, for an article that is supposed to be about web design, the author keeps using print (DPI) in his statements, completely convoluting his point.

      read my comment #73.

    • OllieJ

      @Svein: Here’s a suggestion for all you web people, don’t write articles about print terms without properly understanding them or their use.

      The overall danger of the article is that it widens the schism between two different yet related design disciplines and utterly fails to specify that DPI IS IMPORTANT FOR PRINT.

      The situation that this leads to is that one day, the readers of this article are going to be asked for a logo/image to be used in a printed piece and they’re going to send low-resolution, pixelated versions that will look like absolute trash when printed, assuming they’re usable at all.

      If someone writes an article about the “myth” of a term intrinsic to another discipline, they should really endeavor to understand it completely, AND be thorough and intentional in how they communicate their thoughts.

  • PLEASE READ

    No offending but since this article intends
    to get rid of false rumors I also recommend
    to get rid of following parts since they
    spread false rumors themselves.

    1.) “Resizing Changes DPI, Resampling Changes Pixel Count”
    and “Resizing and Resampling in Photoshop”
    The difference between “resizing” and “resampling” is the
    authors own idea only. What is beeing explained here is
    the difference between two resampling-methods. There
    is no such thing as “resizing pixels” by typing numbers
    into photoshop.

    2.) “Why 72 is significant”
    Now he’s confusing himself. By claiming “the image and hard
    copy would be the same size” he is actually trying to
    explain what he called a “mythos” in first place: Changing
    dpi-settings could affect the pixels of your monitor?
    No, it can not! Remember? The reason you started writing
    this article.

    3.) “PPI Means Better Legibility at Smaller Point Sizes”
    The size of the pixels has nothing to do with the amount of
    pixels assigned to a letter. You must have changed both. This
    is totally confusing..

    ..don’t get me wrong. The article explains
    the nonsense of “72-dpi for web-images” which
    is it’s main aim and thats good. But it fails
    by explaining the sense of dpi.

    Oh, and last but not least. ppi is NOT dpi.

    • http://benthinkin.net Ben Gremillion

      No offense taken. :) Let me reply point by point:

      1. While I don’t remember where I learned about resizing vs. resampling, a quick web search shows that the idea isn’t original. When printing, the size of the pixels makes a difference. An image with, say, 100×100 pixels at 100DPI would measure one inch square on paper. The same image at 300DPI would only be one-ninth of an inch when printed. Still, on screen 100 pixels is 100 pixels.

      2. You’re correct that DPI doesn’t change pixel’s size on screen. I used the original Mac dimensions as an example of 72’s significance in history.

      3. If a device’s screen has a better-defined screen, then it would be possible — and more legible — to use more pixels per character in text.

      PPI is not DPI. True. Aside from the reasons stated in these comments, PPI gets more people fired up.

      • PLEASE READ

        Glad you’re answering Ben. So let’s discuss
        this. I would really welcome having a flawless
        article to the subject since I am getting bored
        of answering the same questions over and over
        again. :). It would spare me a lot of time.
        Have fun reading :)

        1.)
        Photoshop offers various algorithms to resize. Check
        the box saying “bicubic”. You will find others just as
        “nearest neighbor”.
        If you use “bicubic” to go from 400px to 800px for
        example you can see that the new pixels are created
        by using average color-values of the existing ones. This
        is what you refer to as “resampling”.
        If you use “nearest neighbor” you will see that the new
        pixels are created by taking each pixel and putting exactly
        the same one next to it again. The pixels just “grow” since
        instead of one pixel you now have 4 of the same pixels next
        to each other. This is what you refer to as “resizing”.

        And here is the point. Let’s say a printer naturally prints 800px
        per inch and you want to print a bitmap in exactly one inch but
        your bitmap only has 400px. What the printers software does is
        “resample” the image. 800px printer-dots (pixels) will be printed.
        It’s exactly the same as in photoshop. He resampled the image.

        So you are assuming that the printer will always use nearest
        neighbor when resampling. Which is wrong. The printer is capable
        of using different algorithms aswell.

        That’s it.
        a. There is no difference between resampling and resizing, only
        between different resampling-algorithms.
        b. Physically a printed pixel can’t grow. It can look like it grew
        by being printed next to itself a few times (nearest neighbor)
        but (at least professional) printers don’t do that.

        2.) An image with 72px is an inch big on that apple-screen.
        Your hardcopy would only be as big as on your screen if
        printed with 72ppi. So what you assume only occurs to
        non-pixel elements like text but you include images..
        “if you printed an image[...] and held it next to the screen,
        both the image and hard copy would be the same size.”
        That’s wrong.

        3.) Hmm.. what exactly do you mean with “smaller point
        sizes” in the article? Do you mean the actual size in which
        it is displayed on the screen or the you mean the size you
        give the text in you software like word for example?

      • http://benthinkin.net Ben Gremillion

        Sounds like either the diagram or explanation was too simplistic. If I had covered how DPI relates to printing more, I would have needed more detail about the process (which you elaborated on). But Adobe itself makes a distinction between resampling and resizing. Resampling changes the number of pixels; resizing does not.

        For the smaller font size, I meant on screen. Displaying the letter “a” with, for example, 30×40 pixels will show the character’s details better than if we only have 5×10 pixels. If one word fits into a given space, then the more pixels available in that space will allow for clearer letterforms.

  • OllieJ

    @Grant, bubbagrump, & Mark:

    Thank you! As a designer originating in print and expanding to web, this article was incredibly frustrating to read for the myriad ways in which it spawned a whole new batch of confused individuals.

    The assumption that the web is the only form of design that matters is nauseating at best.

  • http://www.wisnaes.com/ Svein

    @OllieJ

    I think you still don’t get it. This article was not for you. It was for people working with screen based media. (Yeah, so you are a print artist turned web) And screen based does not mean web only.

    Yes, the author used dpi instead of ppi. You know what? It does not matter! Like I said in my last comment: FORGET it. FORGET all of it. Just remember one thing: the number of pixels.

    And for any “confused” trolls out there that come from print and feel the urge to “correct” this – there is nothing to correct. It has been done. Can we all sing together:

    “DPI is not PPI” and then “Who really cares?” :-)

    For screen based media nothing of it matters. Only the number of pixels. So when you ask your client for a graphic that you need to use for your video, ask for a minimum pixelnumber. Maybe that would be 2000 pixels wide. This is a number customers actually understand. As we are NOT talking about anything that has to do with print here (we are merely using it to explain that it is a different field of work with it’s own set of rules that do not apply to THIS area of work), the number of pixels is all that is needed. And that is not need any explanations!

    • OllieJ

      @Svein:

      You’re the one who doesn’t get it. The article is using print terms to explain screen issues and further convoluting the issue. If the author of the article would simply change the title of the post and correct its errors, the issue would be settled.

      Why write an article incorrectly using a term intrinsic to a specific group of people but then claim that the article “was not for you”? That’s just lazy and you know it. Stop calling people “trolls” for correcting an error and trying to prevent future problems for themselves. It’s not our fault that the author didn’t communicate properly.

      Every design field is fraught with examples of projects gone wrong and expensive errors due to miscommunication. It’s called professionalism. Learn it.

      • bubbagrump

        right on Ollie!!

        where is the author in all of this? conveniently quiet…

      • http://www.wisnaes.com/ Svein

        @OllieJ

        Yes, you are trolling. You are NOT adding anything new to the discussion.

        Everyone know that DPI is not PPI now. We got it a long time ago.

        And I am very sorry to have been feeding the troll. I will stop now.

      • OllieJ

        @Svein:

        Dude, grow up. Calling out inaccuracies in a discussion on an already confusing topic is not trolling, it’s called caring about the subject at hand. But I suppose acting as a self-imposed comment moderator to bolster your own self-esteem while name-calling is a much loftier goal than properly educating readers.

      • PLEASE READ

        Hallo Svein,

        I just read your own article to this subject and
        it is totally perfect. The big difference between
        yours and this one is that you explain why dpi,
        ppi, mpi, whatever you want to call it doesn’t
        matter. Period. That’s it. Why care about the
        rest?

        The author of this article does care. But unfortunately
        he has no clue what he is talking about and just mixes
        up a bit of wiki with a bit of urban myths with a bit of
        his own (wrong) assumptions.

        So, what do we need this for? Why not just keep it the
        way you did? “screen related dpi doesn’t matter. Forget
        it exists”. Period..

  • http://www.fotoLibra.com Gwyn Headley

    Why does everyone who writes on this subject make the same basic error? Dots are dots, pixels are pixels, and the following link is the reason why professional picture libraries and stock agencies demand that photographs uploaded to their sites have a resolution of 300 ppi (pixels per inch, not dots per inch): http://blog.fotolibra.com/?p=309

    • PLEASE READ

      And dots per inch are always higher then the
      ppi-settings of the image beeing printed.

      You did a basic error aswell. You know that dpi
      isn’t ppi but you do not know what dpi is.

  • http://benthinkin.net Ben Gremillion

    Thanks to everyone for the feedback, positive and negative. That’s what comments are for, and I’ve replied to most of the people who I felt raised good points.

    Some arguments against my use of the terms DPI and PPI went unanswered because the posters seemed more interested in telling me off than discussing the problem. If someone wants to rant, then no reply can improve the ranter’s disposition.

    That doesn’t mean the post was clear.

    My experience in newspapers taught me that when a photographer and a press operator say “resolution,” the page designer needs to think in both worlds. So while researching this article, I looked up DPI and PPI for additional uses. For PPI, there are two general camps:

    From Inkjet Workshop: “The term ‘pixels per inch’ only has meaning when a digital photo is printed or displayed.” http://www.inkjetworkshop.com/definitions.html

    A post at Adobe’s forums indicates that DPI relates to “output devices, such as desktop printers…” while PPI is “your image’s true resolution from pixel-based applications, such as Photoshop.” This post also states that web images are “72ppi”. http://forums.adobe.com/thread/370714

    Other sites use the term PPI for digital output devices, e.g. computer screens. Sony defines PPI as “the number of pixels contained within one inch of an image displayed on a computer monitor.” http://www.kb.sony.com/selfservice/microsites/search.do?cmd=displayKC&docType=kc&externalId=C328452&sliceId=1&docTypeID=DT_KNOWLEDGEARTICLES_1_1&dialogID=83166577&stateId=1%200%2083168838

    “PPI is the measurement of how a monitor displays an image which is the number of pixels contained within one square inch of monitor space.” http://multimediakb.wordpress.com/2006/12/06/basic-image-editing-concepts/

    Apple describes the iPod Touch’s display as having “480-by-320-pixel resolution at 163 pixels per inch” http://www.apple.com/ipodtouch/specs.html. The iPad has “1024-by-768-pixel resolution at 132 pixels per inch (ppi).” http://www.apple.com/ipad/specs/

    Wikipedia says PPI is both: “[PPI is] a measurement of the resolution of devices in various contexts; typically computer displays, image scanners or digital camera image sensors… PPI can also describe the resolution, in pixels, of an image to be printed within a specified space.” http://en.wikipedia.org/wiki/Pixel_density

    Wikipedia also has a list of displays by pixel density: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

    I also found an article which summed up my view with “…the ppi information in an image is NOT used for monitor display in web browsers.” http://photo.net/learn/resize/

    Given these uses, I decided to focus on digital displays only. That’s where trouble began.

    First, I wrongly assumed that people reading articles at a web design blog would assume the post was about web design. A different title might have helped, as well as explaining that this post would not cover print. Resolution when printing a related — but separate — discussion.

    Also, people with different backgrounds assumed that I was referring to “resolution” across all media. It’s certainly possible to print an image from the web at any resolution, but whether we call it DPI or PPI, the image starts with a certain number of pixels.

    And no one pointed out that I intentionally neglected SVG and Flash.

    I’ve made several changes to the post and asked Webdesigner Depot to review. The point of the article stands: On web pages, images set to different dots per inch but the same number of pixels will have the same width and height.

    • bubbagrump

      thanks for responding. this is written in haste and not of the best construction, but the sentiment is there…

      it’s not that i’m assuming anything — i didn’t think you were referring to “‘resolution’ across all media”. i knew exactly what you were referring to, and i don’t disagree with your primary point. the problem i’ve had since the beginning is that it was a poorly presented argument, convoluting the issue that it purported to clarify.

      and while i appreciate your attempt at retraction/clarification, i resent you putting the blame on the reader for “assuming” your intent. it’s YOUR job to clarify your point, not the READER’s to interpret your intention.

      i have to say, this whole experience has put me off this website all together. not that anyone will really care, but i don’t intend to return here and will tell every professional i know that this site spreads misinformation and belittles it’s audience.

      good job.

      • http://benthinkin.net Ben Gremillion

        Most people who commented seemed to follow the points I made, but a few pointed out problems or disagreed. That’s fine — readers from different backgrounds bring different interpretations, as you called them.

        @gwen, for example, brought attention to the fact that Photoshop refers to “pixels/inch.” @Fabian caught a typo. @Julian noticed a slight difference in file sizes. Plenty of others took issue with my use of PPI as a screen measurement. In each case someone pointed out different aspects of the entire post.

        Sorry that one article has soured your experience on the whole site. WDD has many contributing writers. Feel free to state your opinions and stand by your, quote, “belittling condescension.”

        Let me ask this: If you could rank the sections in order of most to least problematic, which would be first and last?

  • http://www.explico-design.de Benjamin

    Hey Ben,

    thank you so very much for this article. As a print and online graphic designer I tried so hard to explain the 72dpi mess to my customers and finally gave up. Until I read this article – new hope getting this explained! Thanks!!

  • PLEASE READ

    Oh, I just saw that the author has replied.
    Nevermind my last post. It can be deleted.

  • http://www.gurrydesign.com/ Peter G.

    This has been very instructive. I was one of the many who always thought that DPI affected file size. So web designer brain is going through a minor Copernican Revolution right now.

    One thing I did notice is that (at least in Photoshop) increasing the resolution means having to readjust text size. 12pt is not the same at 300 PPI as it is at 72.

    What I am curious about is this: is it possible to design an entire website with images set at 300 PPI so that the site prints out crystal clear, but without increasing the file sizes substantially?

    • Tom

      Not really. In order for them to print at the same physical size, but “nicer looking” (that is, higher dots per inch during printing), you would have to increase both resolution and the DPI/PPI.

      If you kept the resolution of the images the same (which would mean the file size would stay the same) and just increased the PPI/DPI, the physical size of the image when printing would be smaller.

      Size in inches = (Dimension in pixels) / (Dots or Pixels per inch)
      Example: An image has a width of 600 px and it is printed/displayed at 100 DPI/PPI. What’s the physical size? Answer: 600/100 = 6 inches.

      BUT: You cannot control what PPI the user chooses, different displays have different dimensions and resolutions. In other words: DO NOT try to guess the physical size your audience will see. It’s futile.

      Oh, regarding your question of high quality prints, as someone mentioned above, you can have two seperate stylesheets, one for “regular” viewing, with regular resolution images, and one for printing that uses high-resolution images with a high DPI/PPI value.
      Seems like an awful lot of trouble though, just to get your site to print nicely. I personally don’t print web pages often, and when I do, it’s for the text, not the images or design.

  • SunriseGFX

    Great article. Thanks to you! ;-)

  • http://bycan.de bycan

    Really great article! At last someone who knows what he’s talking about. There are so many wrong allegations about webdesign and imageresolution. Also great graphics btw.

    Thank you!

  • nev

    Doesn’t dpi matter when web pages are saved (“printed”) as PDFs?

  • http://desaindigital.com/en jeprie

    This is a very detailed explanation! I must say I really impressed with this, even though I don’t understand the last part.

    Some web designer still don’t understand the basic principle about pixel and resolution.

    I think the moral of this article is, don’t worrying pixel resolution unless you will print it.

  • http://www.psyched.be/wordpress Darkened Soul

    Great read, keep them pixels up!

  • http://www.besttipstechnology.com technology

    Nice article, though I would have liked you to have at least brushed upon the delicate balance of image size to file size.

  • http://www.oldbob.com bob

    Good read, but there are a few issues…

    1. DPI is not a myth, as you said yourself it is a very important term required for print design. You should consider titling your ”story” with consideration.

    2. There is actually a huge difference between an image of 300 x 300 pixels saved at 72dpi, to one saved at 300dpi. THE FILE SIZE! This is extremely important when preparing images for the web. Also changes how far you can zoom into the image before it distorts past screen averages of 72-130ppi.

    3. Stop confusing people…. you are a goose

    • http://benthinkin.net/articles/72-dpi-and-the-web-aren-t-really-related Ben Gremillion

      This being a blog and an article about web design, I assumed it was clear that the article was not about print. My mistake.

      Could you provide some examples of images with different DPI settings but the same number of pixels? In my tests, changing 72 DPI JPG to 300 DPI, and later 4000 and 10000, only increased the file size by less than half of one percent.

      I just created a new file and saved it at different DPI after disabling “Resample Image” in Photoshop’s Image Size box.

      300×300 @ 36 DPI was 21,118 KB
      300×300 @ 72 DPI was 21,118 KB
      300×300 @ 300 DPI was 21,120 KB
      300×300 @ 900 DPI was 21,120 KB
      300×300 @ 4000 DPI was 21,122 KB
      300×300 @ 8000 DPI was 21,122 KB
      300×300 @ 10000 DPI was 21,124 KB
      300×300 @ 20000 DPI was 21,124 KB

      Each image used image quality 6 in Photoshop’s “Save As” command. I didn’t use “Save for Web” because that removes DPI information from the file.

      The files gain two bytes for every digit in the DPI measurement itself. @Julian noticed this difference, and @snlr guessed that it’s a rounding error or 16-bit character. Either way, the size difference between several orders of magnitude with the same compression and number of pixels is well under 1%.

      How much savings did you get in your tests? Also, how did you determine that I’m a goose and not a gander?

  • http://www.spark-creative.co.uk Mark Astle

    If you’re not resampling the image, of course the image size and pixel size will stay the same. If you change the dpi but keep the actual image size in mm the same, then it changes. I’m not sure what yo’ve just proved?

    • http://benthinkin.net Ben Gremillion

      That’s the point: Changing DPI alone has negligible impact on a web image’s file size and none on its dimensions. @bob said that “There is actually a huge difference between an image of 300 x 300 pixels saved at 72dpi, to one saved at 300dpi.” Yet the images I saved had very little difference — if I left the pixel count the same.

      • http://www.spark-creative.co.uk Mark Astle

        Because the physical size of the image doesn’t change. Unless you print it out. In which case, each increase in DPI would make the image smaller in mm. If you keep it to, say 1 inch square, and change the DPI, the size and quality of the image will change. Which should all be obvious stuff really.

        I think you’re kind of right, it’s just the title of the article that’s got people talking, and I guess that was the idea.

  • http://www.juliankrispel.com Julian Krispel

    I love this discussion. Seems as though the commenteers have very little of what you’re saying Mister Gremillion.

  • http://www.musictubers.com Music Tube

    Very interesting article, learned alot new, especially in the part about “72”. Thanks!

  • http://designaid.wordpress.com Luis Suárez

    Excellent reading.

    Cheers!

    Luis S.

  • http://www.visualworks.co.uk Stony101

    Great article.. Can anyone answer me this – its kinda related…

    I’ve just done a screen grab of an exiting website and measured its width. I use a mac.

    My colleague has just done the same on his pc.

    We get different pixel dimensions for the same onscreen elements – including images. The width of the site is about 80px shorter on mine

    What’s this about?

  • http://projects.nihongoresources.com Mike “Pomax” Kamermans

    Hi Ben,

    a small misconception in the article: while GIF discards dpi information (it’s a screen only format with implied dpi value of 72, back when the monitor resolution was still assumed to be 72, rather than today’s assumed 96), PNG most definitely allows for real print size information. Hit up Photoshop, make a new 2″ x 4″ x 123DPI image, save it to PNG and then open it in irfanview. Hitting ‘i’ for the file information will inform you that this image is indeed 2″ by 4″, computed from the DPI value stored in the PNG header.

    Now for the slightly more technical bit… PNG does not actually store “dots per inch”, but instead stores physical dimensions as “pixels per meter”, stored in the “pHYs” table of the PNG header. While this is an optional table that can be omitted for screen-only graphics, it is essential for dual media graphics, and for the sake of not misrepresenting PNG I’d highly advise you do a quick edit on the article to state that PNG is in fact perfectly suited for graphical contexts in which images having real physical dimensions matters.

    I know I personally rely on it heavily, because using PNG means I don’t have to turn my graphics into JPG, which cannot be further edited for print due to unpredictable artifacting, or the much bulkier TIFF.

  • http://blaiseCreative.com joel

    anyone develop sites at super high res?
    helps when fleshing out details also when printing for portfolio pieces…
    i’d love to hear some feedback from the community on this topic.