Re-post from previous thread:

This is a subject that makes me cry and reminds me of how bad I am with numbers. I had both my boss and a co-worker sit me down not that long ago and help me understand the difference. I still don’t fully grasp it. I live in a dpi print based world. But apparently the web doesn’t care about dpi, only pixels.

DPI and PPI Explained
Display, Printing, dpi and ppi
Understanding Resolution
The Difference Between DPI and PPI

My understanding - and I’m not a web designer - is that when preparing graphics for the web you should always be working in 72 dpi (or ppi). That way you are dealing with the images at the size they will display on screen. And, when creating tables and such you thus already know the pixel dimensions of your images without having to do any math. Deviating from that standard can only cause confusion IMHO.

But... a question pertaining to topics raised in the other thread - does it affect image loading speed if the graphic is at a higher dpi (same pixel dimension)? Not that I’d do that but it was discussed earlier.

This might be an silly question. But, if you use the “Save for web” feature in photoshop/illustrator, does it default the DPI?

I’ve never really realized there was a difference between pixel density and DPI. Maybe I need someone to sit down and explain it to me.

It defaults to 72 dpi (I think) but if your image is at a higher dpi than that, it may make the image proportionally larger to maintain the pixel dimensions. Not sure tho.

“Save for Web” defaults to 72 dpi AND respects the size it is at in the document.

i rest my case.

continuing from the other thread...

“no, it only exists in photoshop.”

Ah, that makes sense.

All that setting the image to 72dpi is makes sure that your 100% = 1 pixel of screen for every pixel of image. I assume your video editing software when it sees a 72dpi just then doesn’t bother resizing it to ensure that every pixel you created in photoshop is brought over as a pixel in your video image.

It’s a setting that you need to have, but really isn’t related to print dpi what-so-ever. Just an old habit of photoshop’s. ;o)

And now back to this thread...

“My understanding - and I’m not a web designer - is that when preparing graphics for the web you should always be working in 72 dpi (or ppi). That way you are dealing with the images at the size they will display on screen.”

The dpi really doens’t matter. It’s just a particular setting in photoshop to make it easy to know when you are truly seeing all the pixels (100%). The image, itself, retains no dpi info online.

“But… a question pertaining to topics raised in the other thread - does it affect image loading speed if the graphic is at a higher dpi (same pixel dimension)?”

Not at all. The dpi setting isn’t used at all by the web browser. All it cares is what the actual image is in pixels.

“Maybe I need someone to sit down and explain it to me.”

I’m trying but probably not fully getting the point across. Toss out some more questions and I’ll try to clarify! ;o)

I suppose I should add that there has been a longtime wish to have DPI settings online. At one point, the PNG format had a proposed multi-resolution option. The idea that the PNG could serve up the low-res version for on screen viewing, but if you wanted to print it, you could send a higher resolution image (at the same physical dimensions) for printing on paper. It was a great idea, but still hasn’t been adopted.

i can’t believe i’m still in this. i think we have a disconnect between three worlds: 1) strict technical language, 2) misleading naming conventions in software, and 3) actual user experience.

i think the question of loading time relates not to “dpi per se” but rather to file size.
a 300x300 image at 300ppi (photoshop language) is a much larger file than
a 300x300 image at 72ppi (photoshop language).

if i take the 72ppi version into video, it comes up at 300x300 pixels on the screen,
but if i take the 300ppi version into video, it’s much larger.

“But… a question pertaining to topics raised in the other thread - does it affect image loading speed if the graphic is at a higher dpi (same pixel dimension)?”

Patty, if you look at the examples I posted and check the image properties, you’ll see that both of the graphics (1 @ 72dpi and 1 @ 300dpi, both 300 x 300px) are the exact same file size. Bizarre, but true.

Well, to use the examples set prior.

If I have a 300x300 pixel image with a resolution of 72ppi and I have another 300x300 pixel image with a resolution to 300ppi.

In this example, how am I controlling the DPI? All I’ve changing is the pixel resolution. A 300x300 pixel image at 300ppi is equal to a 1250x1250 pixel image at 72ppi, right?

you’ll see that both of the graphics (1 @ 72dpi and 1 @ 300dpi, both 300 x 300px) are the exact same file size. Bizarre, but true.

I think that’s where I’m lost, how can you control the DPI aside from the resolution?

The point I think Darrel is trying to drive home to all of us is that the web doesn’t care about resolution, only pixel dimensions. As in my example linked above, two files with different dpi display exactly the same if the pixel dimensions are set the same. It’s funny that all of us are clinging so tightly to the “300dpi means larger dimensions” thing, and I can only guess it’s because that model is true for print.

Andrew, the crazy thing here is that there’s no need to “control the DPI.” We’re just so used to having to control it exactly for print that we simply don’t want to let go of that control with web graphics, even though, according to Darrel’s comments and the proof in my examples, we don’t need to worry about it at all.

“A 300x300 pixel image at 300ppi is equal to a 1250x1250 pixel image at 72ppi, right?”

It CAN equal 1250x1250, if you resample it to do so, but apparently it doesn’t necessarily equal 1250 x 1250; that is, you can simply “tell it not to” by changing the pixel dimensions.

but in what environment were your test images finally rendered to us ?
yes granted, on the web, they are the same.

but at what point in the process was one a larger file than another ?
and at what point was the larger one reduced to match the smaller,
and how many different ways are there to do that,
and which are lossless and which are lossy ?

in photoshop and aftereffects, there is no question that dpi (ppi) is directly linked to
file size and relatively linked to image quality.

“I think that’s where I’m lost, how can you control the DPI aside from the resolution?”

You don’t. It’s just a bit of meta information that says ’hey, when you print this image, print it at this size on paper’. It just controls the SIZE of the pixels when printed.

On screen, it’s irrelevant.

“The point I think Darrel is trying to drive home to all of us is that the web doesn’t care about resolution, only pixel dimensions.”

Yes! ;o)

“in photoshop and aftereffects, there is no question that dpi (ppi) is directly linked to
file size and relatively linked image quality.”

Nope. File size is determined by the number of pixels in it. I think that’s where you’re confused.

These images would be the same file size:

100x100 @ 100dpi
100x100 @ 1000dpi

printed from photoshop, one would be 10 times smaller, but they both have the same number of pixels and take up the same amount of memory on the computer. One would print 1” square, the other .1” square

Now, these images WOULD be different file sizes:

1” x 1” @ 100dpi
1” x 1” 2 1000dpi

They’d print the same size, but the first would be 100x100 and the second would be 1000x1000. The second would be 100 times larger in file size.

To clarify (hopefully!) the reason you see a file size difference, Ch (I assume) is that aftereffects retains a physical size to your image. Film, for instance, doesn’t have a resolution. I assume you can output your afteraffects file to film at any resolution you like. Either way, it has to fit the physical size and aspect ration of a film frame.

So, if you retain a physical ’printed’ size to an image, and increase or decrease the dpi, yes, it will increase or decrease the file size, as you are adding or removing pixels.

However, if all you care about are the pixel dimensions (as one is on screen) then increasing or decreasing the dpi won’t change anything on screen. It’s still the same pixels.

I still know where you’re coming from Chris; when I tested Darrel’s theory and proved his results I was shocked. So here’s what I did.

I started with a 300dpi image that was 1600x1600 pixels, let’s say the file size was 1MB. Throw that on the web and, sure enough, it fills the screen and is slow to download.

Change the resolution (without resampling) to 72dpi (thus keeping the image at 1600x1600px). This is where I’ve always been mistaken: I thought this would reduce the file size, but it doesn’t. But...

Resize/resample that 72dpi graphic down to 300x300px (that is, change the pixel dimensions) and the file size drops, let’s say to 75K, and now it displays at the size I want (300x300px).

Now, here’s the weird part, go back to the 300dpi/1600x1600px image, make sure “Resample Image” is checked, and simply change the pixel dimensions to 300x300px, leaving the dpi at 300. This is the crazy part: the image is now the right dimensions for the web, and the file size is the same as the twice worked-over version above, only 75K.

this just making me crazier. i insist we have a language gap here.

>>“in photoshop and aftereffects, there is no question that dpi (ppi)
>>is directly linked to file size and relatively linked image quality.”
>>Nope. File size is determined by the number of pixels in it.
>>I think that’s where you’re confused.

your response doesn’t address the point. the operative detail is: pi. per inch.
the amount of information per inch can vary. more information is more information.
more information is a bigger file. higher resolution means more information. higher resolution means bigger files. i am dealing with this is a big way these days as my world transitions from NTSC to HD.

Frankly I don’t care if the web “sees” dpi. Photoshop cares. So it seems to me that if I’m creating graphics/pix for the web, in Photoshop, I should use 72 dpi. If I need the same image for a print project, I use 300dpi. While both images might be the same size, in inches, they will be very different in pixel dimensions.

If anybody is confused you can see the diff b y going into View in P-shop - view at “print size” and “actual pixels”. If you’re using 72 dpi those two pix will appear the same on screen. I realize that you can upload graphics at other than 72 dpi as long as it is the same pixel dimensions but why would you do that?

This is making my head spin. I’m sorry I started it!

I agree Patty, I feel like my entire understanding of the world I live in is being questioned! I totally agree with what you’ve said, but I find it fascinating how wrong I’ve been about this question as far as web graphics go. And the idea that:

“DPI has nothing to do with file size.”

That makes me shiver to say it, but, despite what I thought I knew, it seems to be true.

The actual files for bitmapped graphics, if you look at them (for example by opening one up in a hex editor and comparing against the JPEG spec), simply describe pixels. A JPEG file, for example, is defined in terms of a rectangle that is X pixels wide and Y pixels high, and consists of a compressed summary of X times Y pixels. The information about pixels per inch is purely optional, as a way of telling printers how big to print the thing. It’s not really part of the data at all.

Video may be somewhat different because the compression algorithms are more complicated and may want to take into account how large it will appear to be.

>>I started with a 300dpi image that was 1600x1600 pixels, let’s say the file size was 1MB. >>Throw that on the web and, sure enough, it fills the screen and is slow to download.
>>Change the resolution (without resampling) to 72dpi (thus keeping the image at >>1600x1600px) and the file size drops somewhat (let’s say 200K).

my point exactly.

>>Now, here’s the weird part, go back to the 300dpi/1600x1600px image, make sure >>“Resample Image” is checked, and simply change the pixel dimensions to 300x300px, >>leaving the dpi at 300. This is the crazy part: the image is now the right dimensions for >>the web, and the file size is the same as the twice worked-over version above, 75K.

when you downrez and then uprez again you lose information. you cannot recreate the information that was in the original. the resulting file can be compressed much more easily than the same size original.

i’ve also noticed that photoshop defines file size in inconsistent ways that i don’t really understand. file size and upload time may also be linked to compression codecs. i’m not an expert there either.

>>“DPI has nothing to do with file size.”
i think this statement may be technically true but functionally misleading,
because in photoshop ppi is linked to image dimensions. it depends how you are using the information.

in my video work the final product is lossless, uncompressed.
i constantly see changes in file size relating to resolution.

anyone at adobe care to weigh in on this ? i’m officially out of my league.
i just know what i have to deal with on a daily basis. maybe it’s all a dream. i love you all.
goodbye...

Frankly I don’t care if the web “sees” dpi. Photoshop cares. So it seems to me that if I’m creating graphics/pix for the web, in Photoshop, I should use 72 dpi.

Photoshop cares if you’re going to print it, but not if it’s going on the web. It assumes 72 dpi for web use as a sort of arbitrary convention - that number describes the original 1984 Macintosh screen. Computers now generally have smaller pixels (a 20-inch iMac, for example, at 1680x1050, is around 98 ppi). The main thing, from Photoshop’s point of view, is that a 72-dpi image will either have small enough pixel dimensions to work on the web or it will have large enough spatial dimensions to alert you to the problem.

The whole thing is easiest if you acknowledge that print and web are different beasts. Print works in units of area, so dpi is absolutely essential, whereas the web works in pixels, so dpi is totally irrelevant - what matters there is the number of pixels.

Chris, note that I edited the first statement you quoted. Changing from 300dpi to 72dpi does not change the file size unless the pixel dimensions are also changed.

“more information is a bigger file. higher resolution means more information.”

YES! But we’re talking *on screen* resolution. Which means 1 pixel of image information = 1 pixel of the screen.

Changing the DPI of an image doesn’t necessarily change the amount of information. 300x300 is and always will be 300x300 regardless of the DPI setting you give it. If you RESAMPLE while changing DPI, then that WILL change the file size, because you add and/or subtract pixels. But that’s a result of the resampling specifically.

“Frankly I don’t care if the web “sees” dpi. Photoshop cares.”

Photshop doesn’t care either. YOU may care because it’s nice to know that 100% in photoshop means 1 pixel of image = 1 pixel on screen if the image is told to print at 72dpi.

“So it seems to me that if I’m creating graphics/pix for the web, in Photoshop, I should use 72 dpi. If I need the same image for a print project, I use 300dpi. While both images might be the same size, in inches, they will be very different in pixel dimensions.”

That is true. If you are dealling with real inches in print, that’s when DPI matters. (even then, Photoshop doesn’t care, but that’s another thread...)

““DPI has nothing to do with file size.”

That makes me shiver to say it, but, despite what I thought I knew, it seems to be true.”

Well, here’s a better way to say it:

DPI, by itself, has nothing to do with file size.

If you combine DPI with wanting output at a specific pixel dimension, THAT’s when file size changes because you are adding and subtracting data from the image to accomodate the specific DPI at a specific print size.

Or maybe that’s just more confusing. ;o)

Ch...I too would love to hear from someone at Adobe. I do believe you that DPI makes a difference in your work. I’m sure it has something to do with After effects assuming some sort of ’virtual’ frame size in real measurments.

As far as I know, Darrel is right. The dpi is totally unconnected from file size. The only thing that has influence on file size, is pixel dimensions. So only when you resample images in photoshop when changing the dpi-settings, file size will change.

AAARRRGGGGHHHHH. why do we keep citing this data in isolation when obviously the relationship between ppi and file size comes into play RELATIVE to size on the screen ???????? call it inches or pixels. it’s data per display size.
every photoshop user deals with this everyday.

Darrel finally said it best: “DPI, by itself, has nothing to do with file size.”
operative term: BY ITSELF. but we don’t interact with this information “by itself”.
in the world of production it is totally relevant data.

to me this is like saying the numbers 3 and 9 on a postage stamp, by themselves, have nothing to do with the value of the stamp. right. but relative to currency and the change in my pocket and my desire to send the letter, it is relevant data.

Chris, I tried to read all of this and I feel your pain.

I hate to potentially add confusion, but just like scaleable text, scalable images are one of the next big things to sprout on the web thanks to CSS and JS. Check this link:
http://www.xs4all.nl/~sbpoley/webmatters/resize.html

“AAARRRGGGGHHHHH. why do people keep citing this data in isolation when obviously the relationship between ppi and file size comes into play RELATIVE to size on the screen ???????? call it inches or pixels. it’s data per display size.”

Chris, I had to read this several times to figure out how you could think there is any relationship between ppi and file size. I think there may be a cultural gap here that’s hindering communication between people who just use images and people who muck about with file formats. A Photoshop user might think of pixels as just the things visible on the screen, and might think the underlying data are something different. This would seem like a sensible assumption, because it corresponds to the reality of preparing image files for printing. But actually file formats such as JPEG and GIF consist of “abstract” pixels that ideally correspond to the pixels on your screen. There’s a file header that contains various information about the file (including, in JPEG/JFIF format, 4 bytes that define the ppi values); everything after that file header is just a compressed or uncompressed array of pixels. When you open up a JPEG in Photoshop and then select “Image Size”, the display tells you the dimensions in pixels at the top and the dimensions in your units of choice (inches, centimeters, etc.) below. The pixels in the upper half of the Image Size dialog are the image data - no matter what dpi the Resolution box shows, the amount of image data is equal to the pixel dimensions.

When Photoshop (or some other image viewer) displays an image at 100%, that means that one abstract file pixel is equal to one screen pixel.* When a Photoshop file is sent to a printer, though, it doesn’t work in pixels - it works in units of area. So when the file gets printed, it is converted into different information based on the dpi setting in the file. So you are correct that the amount of data depends on ppi in the world of (print) production, but Darrel is also correct in saying that changing the ppi of a file has no effect on the file size unless you also change the pixel dimensions.

Web browsers will display the image at 100% unless forced to do otherwise, like in the example from Patty’s site that started this thread. So for web use, the size on screen depends solely on the pixel dimensions, and ppi has no effect. This is very different from how images are prepared for print in Photoshop, but it’s the reason why, in the alternate-size image example that Dan posted, it’s necessary to have separate files for each size.

* Obviously, if the image is being displayed at something other than 100%, either some pixels of the file data are being dropped out or additional pixels are being extrapolated. This doesn’t affect the file size, because the number of pixels actually stored in the file remains the same.

i give up. it’s not about the abstract, it’s about the practical reality.
ppi RELATIVE TO IMAGE SIZE affects file size. in my life, in my dimension, in my universe. or am i just dreaming about this computer in front of me ? sometimes i think so.

we could take this all the way into the abstract and say that the pure data doesn’t really exist at all, it’s just modulated electrons; pure energy. so what ? what matters is what they mean to us in context. i have to deal with the interdependence if PPI and IMAGE SIZE.
i never deal with them in isolation. i deal with their practical relationship, with FILE SIZE the third point in the triangle. call it a game, call it a naming convention, call it a day.
i need a drink.

(i changed “people” to “we” because it’s all about... us.)

I think Chris is frustrated because you guys are implying that if I were to scan a six inch square image it would make no difference in file size whether the image was going to be scanned at 72 ppi or 600 ppi or 1200 ppi.

I don’t think that is what you guys are saying, but I think that is what some people are hearing.

“ppi RELATIVE TO IMAGE SIZE affects file size.”

I don’t think anyone has disagreed with this. I probably shouldn’t have used the word “abstract”, except that I wanted to make the point that the pixels you see on screen aren’t necessarily the pixels in the file.

Here’s a simple summary:
file size = pixel dimensions
on screen, image size = pixel dimensions / display ppi [nominally 72]
in print, image size = pixel dimensions / image ppi [whatever the ppi setting in the file is]

I think we’ve all been saying this, but in different ways and with different emphases that made it look like disagreement.

“I think Chris is frustrated because you guys are implying that if I were to scan a six inch square image it would make no difference in file size whether the image was going to be scanned at 72 ppi or 600 ppi or 1200 ppi.”

Yes, that may be the problem. Darrel and I have been talking about pixels not inches, but people who think in “paper” terms think in inches, not in pixels.

yes, the scanning reference is apt. that’s a practical example, no matter what the engineering book says. the equivalent example exists as i import psd images into other platforms.

all technical definitions aside (ha ha), here’s the simplest example i can give:

i have a photoshop image 1280 x 760 @ 300ppi. i place it unaltered in illustrator.
it comes in natively at a certain size on the ai doc.

i have a copy of the same file. i convert it to 72ppi without changing pixel dimensions
(1280 x 760). i place it in the illustrator doc. it comes in much larger than the higher rez file because the same amount of visual “pixel” information is spread over many more inches, because there is less information defined per inch. if i want it to be the same “placed size” natively, i have to make it a smaller file. less information, lower resolution
of the original visual information.

the exact same thing occurs when i bring images into aftereffects. so video is more like print ? - it is in effect a print medium with a preset resolution...

i just have to think of dots, pixels, data PER INCH as a defining aspect of resolution and file size, because my output medium handles it that way. lets call it a language problem.
if it’s some arbitrary definition within the arcane world of adobe / video, so be it.
functionally, for my work, the video screen remains 72dpi, and i prepare elements according how they look in the working environment. and the higher rez images are just
bigger files, no matter who is asking.

you wanna see a grown man cry ? i can’t wait to meet you guys... hugs all around ;-}

This discussion really accentuates the different point of view of this matter. Personally, I’ve grown up with the “pixel” outlook on computer images, and hence I often think that the resize dialog in more advanced image editing software, like Photoshop, is overtly complicated. “Inches? DPI? Why would I care about those arbitrary values? I want control over the actual number of pixels, because that is what is relevant for how much information is stored in the picture.” As others have commented, for web-use (today), the numbers of actual pixels in the picture is what actually matters. If you are thinking in terms of inches and DPI, you are making the matter unnecessarily complicated for yourself. Unfortunately, Photoshop and the like tends to enforce the concept of DPI (as the discussion about 72 DPI shows).

I don’t know if I can add much to the discussion apart from what has already been said, except to note that the term “resolution” sometimes is used in two very different meanings, which might be a source of great confusion. Sometimes it refers to the number of dots/points per inch, DPI/PPI, and sometimes to the raw number of pixels without any notion about physical length (for example when talking about computer screens, or digital cameras).

Personally, I’ve grown up with the “pixel” outlook on computer images, and hence I often think that the resize dialog in more advanced image editing software, like Photoshop, is overtly complicated. “Inches? DPI? Why would I care about those arbitrary values? I want control over the actual number of pixels, because that is what is relevant for how much information is stored in the picture.

I agree. I think of the pixels first, and the “real world” image dimension measurements (ppi/inches/cm) as extra info in the file which other applications (or Photoshop’s Print dialog) may or may not look at when I reuse that image in other contexts. Which is how the info is actually stored. I don’t think that GIFs don’t contain any real world size info at all.

Yes, it’s handy if I know all my images in a print project have been tagged as “300ppi” so when I scale them to 150% in Quark, I know that they will come out at 200ppi (plus you can’t scale smaller than 10% which is a problem if your images are tagged as 72ppi). But it is not a property of the image itself.

Personally, I’ve grown up with the “pixel” outlook on computer images, and hence I often think that the resize dialog in more advanced image editing software, like Photoshop, is overtly complicated. “Inches? DPI? Why would I care about those arbitrary values? I want control over the actual number of pixels, because that is what is relevant for how much information is stored in the picture.

There’s the difference right there. Maybe you upstart web kids should have a bit more understanding of “old media”, or print. And take a broader view. Photoshop deals with DPI and inches because that information is EXTREMELY relevant for print media. I may use the same image in print (300 dpi) in a pdf or comp (150 or 200 dpi) and for a web graphic or jpeg to email for approval (72 dpi). Images need to be scaleable both in terms of real size (inches) and resolution (DPI or PPI). If I had to make those calculations in pixel dimensions I’d go nuts.

If you are thinking in terms of inches and DPI, you are making the matter unnecessarily complicated for yourself.

Only if you are talking about the web. But I DESIGN for the web, do not program for it. I create my files in photoshop. And yes, once I have a grid figured out I resize various elements using their pixel dimensions but it still feels very unnatural to me, coming out of a different design tradition, not to think in terms of inches, at 72 DPI.

So I second what Chris says - it’s not about the abstract but about practical reality.

And I will add one more thing - if you take the same file, same file size (in pixel dimensions) and place it in a design program such as Quark or InDesign, the clarity with which it will display will be very different if you place it at 300 dpi and scale it up or at 72 dpi, full size - in inches.

even in various contexts, “resolution” is a term that necessarily implies unit size and amount of data, relative to eachother. whether you call them pixels per inch or dots per inch or grains per cm or blocks per mile or bits per second...

only in relation to data density per unit can you discuss the relative resolution of different documents. a higher data density within the same unit is more information, and (if that information requires storage without compression) its a larger file. more information is just... more information.

the photoshop convention may be “unreal” but it works well enough across platforms,
and provides clear enough standards that i can manipulate and anticipate results.

to say “dpi has no relation to file size” in the abstract sounds more unreal to me than the
mythical pixels per inch because, as bluestreak wrote, when i scan a 6 inch doc at 300dpi
i get a larger document than when i scan a 6 inch doc at 72dpi.

the word resolution refers to different standards of measurement at different stages in the process; input, manipulation, output. at various stages it may entail file size, image quality, or interpolation, but not necessarly all at the same time.

and because screengrabs and video grabs still come in at 72ppi that remains a functional
convention for working with screen resolution. is it true ? not really but it works for me in many situations until a better uniform standard is in place.

the truth is... the electrons are having a big party in there and bumping into eachother
at unimaginable speeds, playing drinking games, singing kareoke, and making snow angels in the documents. if you listen closely to a really hi-rez document, you can actually hear them singing. i have a lawnmower. can you swim ?

Another reason why 72ppi could confuse - when I had an old CRT monitor, that was about 72 ppi, but on my current laptop 100ppi would seem to be closer to the resolution on the screen - so don’t expect your 72 by 72 pixel image to show up as one inch across on every web user’s screen - for many, maybe even most people, it’ll appear smaller.

The one place where the dpi resolution will be relevant is if you’re putting an image file online and expect people to download it and print it out by itself, i.e. not as part of a HTML page - then their printer will probably respect the dpi number and size it accordingly.

Kellie, I have two monitors (one CRT one iMac) at right angles to each other and the same image at 100% or actual size or on the web looks drastically different. So when I do design for the web I make sure to test it out for size on both monitors.

Maybe you upstart web kids should have a bit more understanding of “old media”, or print. And take a broader view.

I don’t know if I should regard “upstart web kids” as an invective or not, but in any case, I maybe should clarify that my whole message was about images on the web (which is the subject of the thread), and about resizing them, as opposed to images to be printed. Of course DPI is very much relevant for printed matter; it would be silly to imply otherwise.

And I will add one more thing - if you take the same file, same file size (in pixel dimensions) and place it in a design program such as Quark or InDesign, the clarity with which it will display will be very different if you place it at 300 dpi and scale it up or at 72 dpi, full size - in inches.

I must admit I am not fully following you here, but I don’t know if it is because you are saying something blatantly obvious, or something very subtle. In your example, do you mean that both of the pictures are to be printed in the same size (in inches)? Which, then, would you say, has most clarity?

“ppi RELATIVE TO IMAGE SIZE affects file size.”

If you are measuring image size in inches, sure. Though the term there is DPI. Not PPI.

But we’re talking on-screen graphic here.

PPI is simply a measurement of screen density. It has nothing to do with your image, really.

“you wanna see a grown man cry ? i can’t wait to meet you guys… hugs all around”

And beers. Hugs and beers!

“There’s the difference right there. Maybe you upstart web kids should have a bit more understanding of “old media”, or print. And take a broader view. Photoshop deals with DPI and inches because that information is EXTREMELY relevant for print media.”

All the confusion here is really software’s fault. They still assume the world is 1984 and we’re all using Macintosh computers that truly have monitors that display 72ppi. All the technology has changed, but the software never gave up that assumption.

Patty, you are right DPI is important when printing. It’s *only* applicable when printing.

“to say “dpi has no relation to file size” in the abstract sounds more unreal to me than the
mythical pixels per inch because, as bluestreak wrote, when i scan a 6 inch doc at 300dpi
i get a larger document than when i scan a 6 inch doc at 72dpi.”

And thats because changing the DPI pegged against physical dimensions inscreased the actual number of pixels.

DPI doesn’t DIRECTLY change the file size. Scanning software uses a DPI setting combined with a physical measurement setting (inches) to calculate the pixel dimensions for you. Changing the DPI in your scanning software is just telling the software to scan in more pixels of data. You are reinterpolating the image, just as you can when resizing in photoshop.

I agree with what you are saying, Ch...Software has one way of describing all of this which is somewhat antiquated. It’s just the way we’ve always done it, so it’s what we’re used to.

It is good to understand the issues of screen vs. print image settings, though...regardless of what Photoshop wants to call it all.

This is not to be rude to anyone, but I honestly don’t understand why this is so difficult to comprehend.

When I started design (largely self taught) I picked up the 300dpi number for print and the 72dpi for web but could see that there was a problem with the latter:

OK, for print I want this image to be 2.5” square, so if I need (asks printer...) 300 pixels per inch, that image that needs to be ... 300 x 2.5 = 750 pixels square.

Now for the web, I also want that image to be 2.5” square, so that means it should be .... 72 x 2.5 = 170 pixels square ... saves it at 72dpi ... checks it on own screen... OKish. Hang on, when the CEO sees it projected on the screen in the the boardroom it’s going to be much bigger. And in fact it’s smaller if I change the resolution on my Mac. (back in the CRT days). So what’s changed - is it displaying the same number of pixels? Yes. So the dpi must have changed. So that 72 isn’t a constant. (measures a few screens with ruler and checks display settings...) 75, 80, 85... tries saving at each of those DPI values, plus 300 for good measure... no effect whatsoever) right, let’s forget that 72!

The operative element for web is wysiwyg - whether it’s 72 dpi or 100 dpi (depends on your monitor) you are working in screen resolution.

To answer Johan, the image will LOOK better in Quark or InDy if it’s 72 dpi at actual size rather than 300 dpi (same px dims) enlarged to fit. Even tho the file size is the same.

To confuse you webbies further, in print there’s a distinction btw high res and low res. While the printer gets high res files, it is common to use low-res scans when making a layout to keep the Quark or InDy files from getting unmanageably large. If the scans have the same name, the printer can replace them automatically while preserving sizing, cropping, etc. So yes, to reiterate, DPI is very important.

ppi RELATIVE TO IMAGE SIZE affects file size.

If you are measuring image size in inches, sure. Though the term there is DPI. Not PPI.

Technically we should always talk about DPI (dots per inch) for printers, and PPI (pixels per inch) for displays. And perhaps less importantly, SPI (samples per inch) for scanners. All of these are input/output devices. Image files themselves have none of these.

The two meanings of the word “screen” — display and halftone — may have helped in the confusion...

“If you are measuring image size in inches, sure. Though the term there is DPI. Not PPI.”

No! That’s what is perpetuating the confusion. Both are measurements “per inch.” If you want to only measure in pixels only that’s fine. I love measuring that way and do measure that way. But don’t refer to it as PPI.

To answer Johan, the image will LOOK better in Quark or InDy if it’s 72 dpi at actual size rather than 300 dpi (same px dims) enlarged to fit. Even tho the file size is the same.

...editing...

To answer Johan, the image will LOOK better in Quark or InDy if it’s 72 dpi at actual size rather than 300 dpi (same px dims) enlarged to fit. Even tho the file size is the same.

Aha, you are talking about the appearance on the monitor, not in the resulting print. I tried what you described, and there is indeed a clear difference. However, that is only an artefact of the software’s optimization algorithm. In theory, the result would be identical, and if you turn on High Quality Display (instead of Typical Display) in InDesign, you will indeed see that the pictures look the same.

I don’t really get it either but am attempting to show you what I mean. The image on the left was placed from a 300 dpi file that was scaled up over 300% to fit. The image on the right is 72 dpi placed at 90%. I changed the resolution in p-shop with resampling unclicked so the pixel dimensions of both files are exactly the same, 706 x 900. I reduced the whole thing a bit so as not to be too huge here, I hope you can read the difference. And yes, Johan is right, there would be no difference in printing or other output.

“No! That’s what is perpetuating the confusion. Both are measurements “per inch.” If you want to only measure in pixels only that’s fine. I love measuring that way and do measure that way. But don’t refer to it as PPI.”

My point was that DPI and PPI are used to measure different things.

DPI = the number of ’dots’ of data PRINTED per inch of paper.

(edit: that’s not quite true, either. DPI is really the number of dots of data AVAILABLE for printing. Most printing is done via a line screen [LPI], so the actual dots that are printed are less than the number of pixels in the image)

PPI = the number of pixels on a computer screen per inch of glass.

DPI is an image file setting/printing measurement. PPI is a hardware display measurement.

“I don’t really get it either but am attempting to show you what I mean. The image on the left was placed from a 300 dpi file that was scaled up over 300% to fit.”

Then it’s no longer 300dpi. It’s now 100dpi.

“The image on the right is 72 dpi placed at 90%.”

Which = (ugh...gotta remember some math now)...umm...80 dpi

So, when printed, the image on the left, would actually have more detail than the one on the right. As for the screen display, as mentioned, that’s just how the DTP software is rendering the screen ’thumbnail’

Maybe this will help explain things. Ch posted that picture of babel at 72dpi.

Here’s the same image, but set at 300dpi:

Same number of pixels = same file size = same size on screen.

Now, if you download each one and open each one in Photoshop and then print each one from photoshop, then you’ll see that the DPI setting merely changes how large the image will be printed.

(edit: that’s not quite true, either. DPI is really the number of dots of data AVAILABLE for printing. Most printing is done via a line screen [LPI], so the actual dots that are printed are less than the number of pixels in the image)

I think this conversation is missing one key component. Interpolation. I understand the concept that DPI doesn’t matter when displaying an image on screen (nor does it effect file size) but when the issue of printing is in place, it becomes a major issue. And it’s all based on simple interpolation.

Now, if you download each one and open each one in Photoshop and then print each one from photoshop, then you’ll see that the DPI setting merely changes how large the image will be printed.

Well... not exactly. The DPI setting will not determine how large the image will be printed in inches, but rather how high the resolution will be. They should both print at the same size.

I really don’t know why this topic is so difficult to understand, but obviously it is, as I run across people every now and then who confuse things...

I’ll try to explain:

Lets start with print: PPI means Pixels per Inch.
You have a certain amount of Pixels, distributed on the length of one inch. The more Pixels you have, the smaller they get, the sharper the image looks like.
The PPI-Value set in Photoshop is only a number: It defines the relationship between number of pixels (pixel dimensions) and the physial size of the image (length and width dimensions). There is no additional information in this number.
If you have a picture with 300*300 pixels, and a dpi value of 300, it will print 1*1 inch in size. If you take the same picture, and change the dpi value to 100 (picture is still 300*300px large!), it will print 3*3 inches. There is the same amount of pixels printed, resulting in a grainier picture with larger pixels.
I think this quite clear.

So let’s switch to screen:
How large is a Screen with 1600*1200 pixels? It differs. There are small 12” notebook displays with this pixel dimensions, and large desktop displays as well. Both have the same pixel dimensions, but the differ in: PPI. A small notebook display has let’s say 200 pixels per inch, a large desktop-display maybe 100. The Pixels of the Desktop Display are larger.
What happens if you display a picture with 300*300 pixels here? It will display in different sizes. On the notebook, you will have a picture of 1,5*1,5 inches. On the Desktop, the same picture will be 3*3 inches. Each pixel of the display shows one pixel of the picture.
As the notebook pixels are much smaller, the resulting display of the image is smaller too. There is (yet) no way to determine, how big a picture (in inches) is displayed on a screen. All you can do is give pixel dimensions.

So what is it about 72ppi (or 96ppi)?
Well, for some purposes, the operating system has to convert pyhsical lenghts to pixels. This happens for example with type. You say “my window titles should have the size of 10pt”. pt is a physical length. But the operating system has to display pixels, so it needs to know what “10pt” is. Ideally, you would tell the system, how large your screen is in inches (lenght, height). Then, if you say “10pt”, it could display the type exactly 10pt. But until today this is theoretically possible, but practically not, as for programming reasons. So, the system *assumes* your screen has a physical resolution of 72ppi (apple) or 96dpi (windows), even if it is not exactly true. For most desktop displays, the value today is between 90 and 100ppi, so 96 is quite a good number (72 was quite good in the 80ies and even 90ies, but displays became better).

So: if you have a 96ppi screen, and you take a picture of 96*96 pixels in photoshop, and enter the value 96ppi, it will show exactly as large as it would print (1*1 inch).

But all of this only matters if you want to print a picture. The PPI value is worthless on a screen, which dimensions are unknown to you (which happens on the internet or on TV).
As Aluminium tells us with the tower of Babel, if you have the same number of pixels in a picture, it does not matter whether it is saved at 30000ppi or just 30. On screen, each pixel is shown 1:1, size according to the size of the actual display. If you took this picture to photoshop and print it, the printed size would differ dramatically (this does not apply to print from a internet browser, they act like displays when they print).

> Well… not exactly. The DPI setting will not determine how large the image will be printed in inches, but rather how high the resolution will be. They should both print at the same size.

No, if this would happen, you would have different number of pixels in the image. 300 pixels are 300 pixels. The PPI-Value tells how they are distributed. In 300ppi, they are placed on the length of one inch. In 100ppi, they take the place of 3 inches.

“Well… not exactly. The DPI setting will not determine how large the image will be printed in inches, but rather how high the resolution will be. They should both print at the same size.”

I think that’s where you are confused, Patty.

They will not print at the same size. Try it. ;o)

For them to be different DPI resolutions, they HAVE to be printed at different sizes, as DPI is directly related to that. If they were printed at the same size, since they both have the same number of pixels, then they’d be at the exact same resolution.

sorry about the atrocious typography (among other things)

Ch,

what you did “wrong” when changing the PPI-Value in C is to have the box “resample image” checked in photoshop. If this is checked, Photoshop does not change the picture dimensions (inches), but the pixel number, resulting in a smaller (lesser pixels) picture.
You did not change the relationship between pixel number and size, but the pixel number itself.

For picture B: This has to be done with interpolation (making the picture smaller and resize it to original size again). Otherwise, you would not see a difference between A and B on screen (but in Print, B would print significantly larger and grainier).
(Edit: OK, it might be that Illustrator interpolates in display...)

Ch...sebastion explained it well. You did more than change the DPI. You also resampled the image.

As for A and B, I have no idea how you managed to make them look in that image different. As you can see the image you originally posted and the one I posted are exactly the same, even though they are set to different DPI settings.

OK I don’t feel like firing up my printer and wasting toner to print a test but there are two factors when setting up a file in photoshop, size (inches, lets say) and dpi. This is why an image of greater than 72 dpi will appear as different sizes on screen when you view it as “Actual Pixels” or “Print Size”.

Print Size is the dimension, in inches, regardless of the dpi or pixel size. Changing the dpi won’t change the print size. It will change the resolution and also the way it reads onscreen, if viewed as “Actual Pixels”.

I really don’t think I’m confused. I’ve been using Photoshop since some of you were in grade school. I just don’t use pixel dimensions as my starting point.

i appreciate what you’re saying but i knew exactly what i was doing -
i understand the resampling option.

my point is that it’s meaningless to divorce resolution from image size and document size.
resolution is the “result” of data density per unit size. they are interdependent.

so i chafe when one is described as unrelated to the other because my experience with the files completely defies the separation of the concepts.

i actually think we’re all saying the same thing in different languages ! hence: babel.

For them to be different DPI resolutions, they HAVE to be printed at different sizes, as DPI is directly related to that. If they were printed at the same size, since they both have the same number of pixels, then they’d be at the exact same resolution.

If this were true, then you’d never be able to get print quality out of your inkjet. A photo taken on, say, a 7 megapixel camera would then print out poster size.

When I take a pic on my digicam default is 180 dpi at some huge size, 20 something inches. If I want to email the pic I downsize it to 72 dpi at about 6 x 8”. If I want to print it and have it look good I change it to 300 dpi and then size it to fit the paper I’m printing it on. I know that you can click “print to fit” and the machine does it for you, but I prefer to control the sizing myself.

Inches and dpi do matter, in printing. It’s not all about the pixel dimensions.

okay, so how about we all start working with 72 dpi images from now on ?
they should look just as good as 300 ? why bother with resolution at all ?

I think that people who don’t work in print don’t understand resolution. That’s the only conclusion I can come to. There’s really no such thing as resolution on the web unless you really screw up.

One of the reasons I don’t like web design is that there are no absolutes. In print, there are. You have much more control over the appearance of your project.

So I guess the answer to the question at the top of this thread is no, dpi is not relevant to web graphics.

A to B was upsampled. degradation.

originally A to typophile was downsampled. reduction.
the first babel image i sent alone was at 300dpi.

>>One of the reasons I don’t like web design is that there are no absolutes.
>>In print, there are. You have much more control over the appearance of your project.

actually it’s the other way around. web is fixed resolution, hence no concept.
print is quite variable, hence control.

video is sort of both, or neither. a few presets. just to add to the fun, in video i have to deal with square pixels (computer) vs. non-square pixels (video). so both pixel dimensions and resolution remain vital as i work in preset frame sizes determined by engineering standards, but i use elements of various sizes and resolutions that often go from print to scan to computer to video.

tennis, anyone ?

I meant by absolutes that you aren’t hostage to someone else’s browser, monitor resolution, etc. You control the design, you know how it’s gonna look, in perpetuity. Which can be a problem of course if you make a mistake.

“Print Size is the dimension, in inches, regardless of the dpi or pixel size. Changing the dpi won’t change the print size.”

Yes. It will. Again, print out the images above. Please. I think it’s the only way I can convince you. ;o)

I think you and Ch aren’t seeing that there are two ways to change the image in photoshop. You can resample, or not resample.

If resampling is on, changing the DPI will not affect the print size. It will affect the pixel dimensions.

If resampling is off, changing the DPI will affect print size. It will not affect the pixel dimensions.

“If this were true, then you’d never be able to get print quality out of your inkjet. A photo taken on, say, a 7 megapixel camera would then print out poster size.”

That’s irrelevant to what I said. I said if you have two images with the exact same number of pixels, for them to be printed at different DPI resolutions, they have to be printed at different sizes.

“Inches and dpi do matter, in printing. It’s not all about the pixel dimensions.”

Absolutely! No one is arguing that. Inches and DPI matter in print. Pixel dimensions matter on the web.

“okay, so how about we all start working with 72 dpi images from now on ?
they should look just as good as 300 ? why bother with resolution at all ?”

On screen, it won’t matter at all. On paper, it will.

“I think that people who don’t work in print don’t understand resolution. That’s the only conclusion I can come to. There’s really no such thing as resolution on the web unless you really screw up.”

There is resolution, but it’s not based on the image. It’s based on the monitor. So, you are saying exactly what we’ve been saying. We are in agreement on this. ;o)

As for print vs. web...

Print design is about dictating a solution. Web design is about suggesting a solution. ;o)

I’m amazed at how many posts there are on this topic.

In practice I think it’s better to use the term ppi for the image file and dpi for the printed result. Although dpi is too engrained at this point much as font has replaced typeface.

“In practice I think it’s better to use the term ppi for the image file and dpi for the printed result.”

DPI is definitely a factor of printing the image. However, PPI is really just a measurement of the density of the physical computer monitor’s pixels. It’s not really related to the image at all. The same image will have a different PPI depending on which monitor is displaying it.

I think.

I’m confused now too. ;o)

One last attempt at an explanation...

In the end, this is just some algebra:

DPI = pixel dimensions / print dimensions

It’s only relative to print, because print dimensions are only relevant to actually printing out an image on paper. For the web, you get rid of the printing part, and therefore DPI is ignored too, leaving just the pixel dimensions.

“One of the reasons I don’t like web design is that there are no absolutes. In print, there are. You have much more control over the appearance of your project.”

Yes, I think that sums it up perfectly. Printing an image is based on two variables: the pixel dimensions and the ppi setting in the file, which combine to create a size in inches. Web display is also based on two variables: the pixel dimensions and the user’s monitor settings, which the designer has no control over. The 72 ppi convention is artificial, and usually incorrect (since most people use monitor settings somewhere around 100 ppi now), but it does provide a way for people who are more accustomed to working in inches to get a rough idea of how big the image will be.

Problems are most likely to occur where the designer doesn’t really understand that print and screen display work in basically different ways. This could be a print designer saving images with overly high pixel dimensions for use on screen, or it could be a web designer not realizing that the images with low pixel dimensions will look like crap if they’re printed out. It’s probably useful nowadays to speak both “languages” to some degree.

“The 72 ppi convention is artificial, and usually incorrect (since most people use monitor settings somewhere around 100 ppi now).”

Damn. I think that sums up everything I’ve been trying to say in one nice sentence. Nice!

Whatever will we do when the iPhone ships at 160ppi?

http://www.apple.com/iphone/technology/specs.html

“Whatever will we do when the iPhone ships at 160ppi?”

a) rejoice, since it’s about time we get some decent resolution on handheld screens ;o)

and

b) nothing. Since it shows web sites and all it cares about are the pixel dimensions we set the images up as. ;o)

White flag... It’s the same as always when I have this topic going on again. For me, everything is plain clear, maybe because I do a lot of print design and screen design.

I have a certain mass of pixels.
If I distribute them on paper, they need to be small enough (300dpi+) so the result is crispy. I just have to print the picture small enough or have enough of pixels, so that this is guaranteed.
If I show this mass of pixels on screen, I don’t know how large the pixels of the viewer will be, so I can’t say how big the picture will be displayed. But I know that the image will be displayed 1:1 (everything else isn’t possible with todays operating systems – *if* it was possible today, *then* DPI and inches would matter on screen!).

“One of the reasons I don’t like web design is that there are no absolutes. In print, there are. You have much more control over the appearance of your project.”

Web design is almost exactly as absolute as print design, if you do everything with pixels (font sizes, artboard dimensions and – here you have no other choice – pictures). One can produce perfectly static websites that look exactly the same on every desktop computers screen, except for one thing: you can not determine, how big the site as a whole is exactly displayed. And, of course, you don’t know whether your viewer has turned his monitor settings to 100% brightness / 100% contrast...

Print design has also some variables you can not control: Under which ambient light the product is looked at? Should the reader use glasses? Did the Newspaper get wet and wobbly before he got it inside?
100% control isn’t possible.

“Whatever will we do when the iPhone ships at 160ppi?”

That’s no problem, actually it’s good. Your iPhone is much closer to your eyes than you desktop monitor. So everything appears bigger. A 160ppi-screen shrinks it again, giving you more space with same viewing experience as on a Desktop (but smaller dimensions).

Q: how many typophiles does it take to change a lightbulb ?

A: why do you want to change it ? that’s not really a lightbulb. yes it is. it doesn’t matter.
i don’t care what you call it, i just have to change it. what exactly do you mean by change ? when it’s off it’s not a lightbulb, it’s a dark bulb. that’s not really a bulb shape, it’s a drop shape. should i use the same size ? size is irrelevant to luminosity. but the size and shape matter to me, because i’m also an interior decorator. won’t a bigger bulb be brighter ? not necessarily, it depends on the luminance. why bother replacing it ? why not replace it with halogens ? should they be of equal luminance ? that’s meaningless because they burn at a different color temperature. but luminance is independant of color. no, they are related. does a blue of 2000 lumens look the same as a red of 2000 lumens ? there’s no such thing as a red of 2000 lumens, that’s off the charts. who wrote the charts ? i still have to change it. do you have any gloves ?

I just don’t use pixel dimensions as my starting point.

I understand that, and there’s really nothing wrong about that. Different schools of thought.

However, that doesn’t mean that pixels are unimportant. Far from it. Knowledge about the pixel size is important, in the way that it represents the actual information stored in the picture.

Let me pose a rethorical problem: suppose you want to print a very small picture — and with “small” I mean few pixels, of course ;-) — for example your avatar, which measures 60 times 60 px. If you want, you can resize this picture to be 10 inches wide at 300 DPI, right? But to achieve this, you will have to change the number of pixels in the process (because 10in times 300 DPI equals 3000 px). This can be achieved through interpolating upsampling. However, the catch is, and I am sure that you realise this, that you can’t really add any information to the original picture in this way. The final picture will have the resolution 300 DPI in one sense of the word, but that number says very little about the image quality. In fact, the picture will be extremely blurry.

In short, don’t ignore the pixel count, and be vary of resampling.

That’s irrelevant to what I said. I said if you have two images with the exact same number of pixels, for them to be printed at different DPI resolutions, they have to be printed at different sizes.

My point exactly. They will print at different sizes. For what you said to make sense you assume that all printers print at the same resolution. You control the print size using a combo of dpi and size in inches. The same image - let’s say 6 x 8” - at 300 dpi and then down-rezzed to 72 dpi (resampled) will print the same size on paper - at different resolutions - but will appear different on screen if viewed at “Actual Pixels”.

If resampling is off, changing the DPI will affect print size. It will not affect the pixel dimensions.

That’s right but you will also notice that the size in inches changes too, proportionately. Your print size will still be your dimensions in inches, irrelevant to the dpi or pixel dimensions.

Print design is about dictating a solution.

Which is why I’m in print!

It’s late and my brain is empty, but one thing jumps out at me, in the differences between web and print, that I’m surpised no one else has mentioned, especially on a discussion group called “Typophile” . . . when I hear Patty mention that she likes the control in print design compared to the web, I immediately think of type as much as pictures, perhaps even moreso. In web design we cannot know how lines of type are going to break, and we cannot control the color of type, cannot subtly track the word spaces in a line of FL text to make the rag more even, cannot ensure that we won’t have more than two lines in a row that end in a hyphen. This is the part about web that I am still trying to accept — it’s exciting, but it’s a bit like walking into a frontier town in the wild west where only some aspects of life are ordered and predictable. For me, the careful massaging of type on a book page is one of the most challenging, meditative, and satisfying things I could ever do. I love it, and I hate having to give up that subtle degree of control when I do web design.

At this late hour, I also see something rather amusing. We have all learned to think of vector art as resolution-independent and pixelated (bitmap) art as resolution-dependent. Right?

Well, having read this whole thread from the beginning, I would summarize by saying that designing for the web — for which the lingua franca is pixels — is resolution-independent! Apart from the density of an end user’s display, we need not care about anything except pixels. (Video is different from computer displays, as Ch has pointed out.) So that is the ultimate in simplicity. For the web, a pixel is a pixel is a pixel. Whereas design for print is dependent on resolution! Does anybody else think this is a bizarre twist, or is it because it’s 1 in the morning and I’m the only one laughing?

I also want to return to something Patty said a bunch of posts up from here: she said the pictures of those two guys would print at the same size and a lot of people said no! But if I understand this correctly, she was showing us two picture boxes in an app such as QuarkXPress. One picture was blown up to 300%, the other one reduced to 90%. But both pictures would indeed be the same size because they would be printed on paper with identical dimensions. the density of their contents might be different (and the file sizes of the scans different), but the pictures would be the same size on the printed paper.

Taz Tally is saying that pictures for the web ought to be saved in Photoshop at 96 ppi rather than 72 ppi. Have any of you heard this? (He says it during a Silverfast scanning software video at lynda.com.) I don’t understand why he thinks we should save them at 96 ppi when they are still going to display as plain ol’ pixels! The file sizes will be identical, and the pixel dimensions will be identical, but the print size will be smaller. What advantage is there in that if one is making a scan strictly for the web?! (The only thing I can think of is that he wants his 4x6 inch snapshot print to appear on the screen at roughly the same size (thus returning to WYSIWYG) but no two monitors are alike, so what good is that? Am I missing something essential here?

One last thing about resolution. So much of it depends on appropriate understanding of viewing distance, rather than going for whatever is the highest absolute quality. I make very big photomurals (sometimes 50 feet long) and although most of them are doneon photographic paper, I’ve made a few public art projects using traditional paper billboards. These are made by silkscreening CMYK process inks onto the paper. When you see a billboard from your car or from the subway, the image looks normal, and very sharp. If you walk right up to it, you’ll find that the color separation was made with a 15-line screen! The ink spots look like golf balls! For the designed viewing distance, you don’t need a screen ruling any finer than that.

In 1984 I bought an electronic typesetting system for the book-printing company where I was working. Up to that time we were setting everything in hand type or on the linotype. (Yes, that is correct, all hot-metal in 1984!) I bought a Monotype Lasercomp because it gave us access to Monotype’s distinguished library of types. The Lasercomp’s resolution was 1000 dpi. My friends a couple of states away, who did the same kind of work in book production, had a Linotronic with a resolution of 2540 dpi. One friend from that plant came over and looked at the output from our machine with a high-power loupe and commented gently that he could see the rough edges on the letters from our machine, whereas the Linotronic edges were smooth. He was quietly happy that their machine produced smoother edges.

He was right, but I would also say that the type from our machine, once burned onto a plate via contact in a vacuum frame, its image inked and then transferred to rubber blanket, and then transferred again to uncoated paper such as Superfine or Dulcet, would read just fine. Our books were meant to be read at a distance of 12 or 15 inches (30 to 38 cm) and in that situation, 1000 dpi vs 2540 dpi didn’t matter. But the difference between a 133-line halftone and a 200-line halftone could be perceived immediately with the naked eye: you could feel grain in the 133 and it was absent in the 200.

So we agonize about resolution all the time when paper is involved.

Time to get horizontal.

Bruce said:
“Taz Tally is saying that pictures for the web ought to be saved in Photoshop at 96 ppi rather than 72 ppi. Have any of you heard this? (He says it during a Silverfast scanning software video at lynda.com.) I don’t understand why he thinks we should save them at 96 ppi when they are still going to display as plain ol’ pixels! The file sizes will be identical, and the pixel dimensions will be identical, but the print size will be smaller. What advantage is there in that if one is making a scan strictly for the web?! (The only thing I can think of is that he wants his 4x6 inch snapshot print to appear on the screen at roughly the same size (thus returning to WYSIWYG) but no two monitors are alike, so what good is that? Am I missing something essential here?”

You understood that exactly right: if you scan an image of 1*1 inches with 96ppi, *most* of the todays screens will display it at about this size. If you scan at 300ppi, you will get a picture about three times as large on a usual screen, so if you only want to scan for screen use, 96dpi will be the “right” resolution if you don’t want to magnify or show details.
Today, almost every normal desktop screen has a physical resolution of 90 to 100ppi, rather than about 72ppi in the 80ies. Special devices like laptops, handy displays, etc. may differ, but they are used in different viewing distances. Or they are used for special tasks. You can’t care about the special ones...

As for choosing a ppi-value for a picture you want to use on screen, and you already have (not scanning yet): You *have* to choose a value in most picture file formats, but its completely irrelevant on screen. There, only pixel dimensions count. You can set the value to 3ppi, 30, 300 odr 30000, the picture will not display any different, nor will there be more or less information in the picture, thus the filesize will be identical. The ppi-value is ignored in internet browsers (it may not in photoshop in certain display modes, as photoshop is print orientated, but we talk about output media like paper or on-screen internet browser).

When people say they can’t control how their content is displayed on the internet, that’s just wrong. They can not control the total size of there website in inches, but they can do it very exactly in pixels. Assuming that every user has a display that fits his needs in certain circumstances (desktop, laptop, mobile phone), this means that your website reaches the viewers eye as intended.
If somebody looks at his 160ppi-iPhone at the same distance he uses his 23” desktop monitor, it is *his* problem. It’s the same thing as if someone does not uses his glasses, and complains that he can’t read this small printed type.

Maybe what may confuse some, is that they use the pictures intended for screen in mainly print orientated software like Illustrator, Indesign or (in parts) Photoshop. This software simulates print output, don’t trust it for on screen display (specially not Illustrator, Indesign or xPress)! They *do* read and consider the PPI-value of an image, because they also do consider inches and pt.

What is relevant for internet use just is internet browsers. They are “real world”. They don’t care about inches or pt (that’s why text size in browsers of OSX and Windows can differ in certain circumstances - but that’s the *only* part where internet browsers care about lengths units).

When people say they can’t control how their content is displayed on the internet, that’s just wrong. They can not control the total size of there website in inches, but they can do it very exactly in pixels. Assuming that every user has a display that fits his needs in certain circumstances (desktop, laptop, mobile phone), this means that your website reaches the viewers eye as intended. If somebody looks at his 160ppi-iPhone at the same distance he uses his 23” desktop monitor, it is *his* problem. It’s the same thing as if someone does not uses his glasses, and complains that he can’t read this small printed type.

Plus most browsers allow you to scale up or down. Which of course makes even WYSIWYG irrelevant... I had an older web client with bad eyes who made me design everything HUGE. I tried encouraging him to up the size in his browser instead but he was such an egomaniac that he thought his eyes were fine and everything else was just too small.

these narrow definitions of “relevance” are what’s bothering me. why would i want to supply my web host with gigabytes of huge resolution images just because they’ll “display” the same as small ones ? obviously it makes more sense to reduce them for web display for no other reason than the overall storage size of the site. and yes, large images load slower.

for me, it’s pointless to define relevance purely in the isolated context of final delivery media. relevance includes all the intermediate media stages, interpolations, translations, conversions, and prepwork.

i can’t believe all you web builders out there aren’t making choices about picture size
and clarity every day, possibly converting unwieldy hi-rez originals into more managable sizes and making sure they look as good as possible. you’re dealing with resolution, whether you apply ppi choices or not. i thinks that’s what the real misunderstanding has been - patty and i use ppi as our means of defining resolution, and perhaps that particular mode of measurement isn’t useful to the web, but RESOLUTION itself is a basic aspect of digital image quality and optimization for any digital media, web included.

i’ve said it before and i’ll say it again: more information is more information,
and more information is a larger file, so resolution remains relevant. one of the peculiar platform-specific ways to define it during the working process is ppi.

maybe for webbies the “relevant” issue is bandwidth. i could say bandwidth is irrelevant to print, but i see bandwidth and ppi resolution as related in the larger issue of
“data density per delivery unit”.

and if i’m delivering huge print files online, bandwidth becomes temporarily relevant to that process, addressed not by altering the files but by assuring that my tools and connections can handle the job. so it’s all relevant, relatively, depending on your role in the process.

Ch... sorry to say this, but judging by your first paragraph you haven’t grasped this at all.

Trying to avoid the word “resolution”: Your huge images won’t display the same as the small ones. Of course you convert your original images into smaller ones for the web, otherwise they wouldn’t fit on the screen and as you say would take a long time to download.

I think actually working this through from an original digital photo to a small image in a web page may help.

It has all been said here before … by aluminium, by Sebastian. But Ch, you still didn’t get it. Sorry. ;) So I’ll give it another try.
“more information is more information”
100px × 100px. That’s the information.
100px × 100px @ 72dpi = 100px × 100px @ 300dpi. It. Is. The. Same. (On the web.) Same file size, same bandwidth.
The web doesn’t know about inches. There is no density to choose.

what’s up with you guys ? i understand what you’re saying, but you seem not to understand what i’m saying. i’m not debating your web facts, i’m debating the
appropriate use of the term “relevant”.

>>Of course you convert your original images into smaller ones for the web,
>>otherwise they wouldn’t fit on the screen and as you say would take a long time to >>download.

that’s exactly what i’m saying! on my end that involves ppi resolution! so we agree?

>>“more information is more information”
>>100px × 100px. That’s the information.

yeah, EVENTUALLY, but here upstream ppi also represents real information. information seems to be defined differently at different platforms in the process.
you’ve preferenced your definition of information over mine. why in the name of odin should i ignore the term “resolution” ? my work is all about resolution! usually high data density elements that must be conformed down to lower resolution media.

>>There is no density to choose.

??? says who ? on your end, maybe because density (in the plastic sense) is fixed and meaningful only according to the end user’s monitor, but on my end NO, there IS density to choose, and tweak, so i can prepare YOUR end to discard it with optimal results !
(see above first quote from your post: “of course you convert”).

i understand there are no inches on the web (!!!!) and if i eventually define my image as 100 x 100 pixels the “original” dpi is thrown away. okay ? got it.

read this: I UNDERSTAND.

what i object to is the blanket statement that ppi is irrelevant. if the process includes it
at any stage, it’s relevant. granted this argument has included (on my part as well as others) some cross-terminology : dpi / ppi / resolution.

you say it’s irrelevant, but i say the web equalizes “resolution” (in the “print” sense),
but file size is relevant across all platforms, and resolution - however defined - effects file size. don’t tell me it doesn’t unless you’ve figured out how to derive all your nutrition from air. i’ve heard that’s possible...

here’s another way to explain it, for those of you who still care:

i design a postcard for a client. the working file is relatively hi-rez, specified in photoshop as 6 inches by 4 inches at 600ppi. in pure pixels that’s 3600x2400, with a file size
of 24.7 M. “too big for the web”.

now i want to display it as close to “actual size” as i can on a web site.
by actual size i mean apparent physical size, the way a postcard looks sitting in front of you. right there is a chance for misunderstanding: you might say 3600x2400 is the actual size, “but on the web it will be huge.”

but i say “postcard size” is the actual size, and i want it to appear approximately “life size”, knowing that it will vary somewhat, but within a tolerable range, from one monitor to another. so i reduce the image, in photoshop.

method 1) maintaining 6 inches by 4 inches but down to 96ppi (or 72ppi if you prefer). the resulting file is now 576x384 pixels, weighing in at a more manageable 648 K.
it has also suffered noticable loss in resolution.

method 2) simply adjust the pixel size to 576x384, while maintaining 600ppi,
but the “inches” measure in photoshop drops to .96 x .64 - again, detail (information)
is lost. it’s not the same file size, nor is it the same resolution.

i’d appreciate some restraint, if not an apology, in the “you just don’t get it” department.
i get it, i got it, i’m gonna go get some more of it.

Ch, you got it! Get a hug, too. :)
So we answered the question of this thread, which was “Is dpi relevant to web graphics?”. No, it isn’t. You proved it with providing methods 1 and 2, both leading to the same result – as far as web is concerned.
Hooray!

Ch, now I get what you want to say :)

Method 1 would be my choice if I wanted to present the postcard same size as printed (with variation) on screen.
But is this the usual task on webpages, to resemble the size of a printed object in inches on screen? Usually, when I do one of my rare web jobs, I start with lets say 800 pixels in width of white screen (my “artboard”). Maybe I want to show a picture, and a small text column next to it. So I say: “Picture gets 500px width, so text column will get 300px”. I take the original picture delivered by my digital camera (it has 3000px width) and resize it to 500px width. Then I save it and integrate it to the code. When I look at the web page, the picture will be displayed 500px width.
What I want to say: If I prepare a picture for web, I don’t have to look at or care about the ppi-value, all that counts is pixel dimensions (resolution), as browsers will display the picture 1:1 on screen.

What I do not understand yet is why you think the resulting file size or resolution (pixel dimensions) of method 2 won’t be the same as with method one. They have exactly the same amount of pixels, therefore the same amount of information (detail) is lost, and the filesize will be the same.
What is different is the ppi-relation. Browsers don’t care about that, and even if you print directly from browser, it tries to imitate what is displayed on screen. But if someone took those two pictures, opens them in photoshop or another print orientated program, and prints them (or places them in Indesign right as they are), they would be different sizes (in inches). For method 1, the picture would be large, but grainy. For method 2, it would be small, but crisp. Its the same information in both of the pictures, but the ppi-value tells on which area this information is distributed.

So, if you want to reproduce a printed object on screen, it is wise to use method 1 if you want to give the viewer a hint how large the image should be in inches (if he takes the picture to photoshop and print it, he will know exactly, but get a grainy image). So setting the ppi value to 96 and therefore maintain the original printed size in inches is better than resizing pixel dimensions, resulting in same ppi, but smaller inch size. What will be the same with both methods is the amount of information that is left.
But, if you just design virtual images for virtual space, without resemble the size of a physical object, pixel dimensions is all what counts.

Which is why we use 72 (or 96) dpi/ppi as our setting when we design for the web, so that what we are actually looking at - in Photoshop, Dreamweaver, GoLive, whatever our tool is - appears the same size as it will appear in the browser.

So... dpi is in fact relevant. Nobody in their right mind would design for the web at 600 ppi even if the actual pixel dimensions are the same.

Dear god, is this thread still going!?!

“Which is why we use 72 (or 96) dpi/ppi as our setting when we design for the web, so that what we are actually looking at - in Photoshop, Dreamweaver, GoLive, whatever our tool is - appears the same size as it will appear in the browser.”

Why not work with “view —> actual pixels” (or just 100% zoom in navigator)?

It simply shows all pixels of an image, so it’s the same way as a browser (or dreamweaver, golive, ...) would do. And it doesn’t matter what ppi value is set. If you try it with a 100*100px image at 96ppi, and the same 100*100px at 300ppi, it will show exactly the same size in photoshop at “actual pixels (100%)” (i just tried it in photoshop CS2).
It would be different size if you switch to “view —> print size”, as here, Photoshop simulates the size it will have in print (using the set ppi-value, and assuming your screen has the same resolution as set in your operating system). But in this mode, it can’t display all the pixels, as the screen just has 96 per inch, not 300. So for screen display, it interpolates (that’s okay).
You could say “actual pixels” is the web-mode of Photoshop, and “print size” is the print-mode.

Which doesn’t mean that you should not use the value of 96ppi when doing web graphics. It’s logically correct to do so (well it would be if everybody had a 96ppi-display). But it doesn’t matter at all in real world if you don’t.

Yes, this thread is still going on, but I think we are coming to an end :)