DPIs for the www
-
Gai... my photo editor has an option to change the DPI for internet use... but it's called PPI
-
And what does it do then?
I just created two images in Corel PhotoPaint - "measured" both 800x600 in pixels, one with 300 dpi and the other in 150 dpi (both totally uncompressed). They really looked alike on screen - both resolution and size - everything.
Then "measured" both in centimetres (I turned on resampling and changed to cms):
the one with 300 dpi came out with 6,7733 x 5,08 cms,
the other one (150 dpi) with 13,5467 x 10,16 cms (i.e. double the size)This is obviously a metadata stored in the image file somewhere - how "big" a certain pixel x pixel digital image should be printed. Obviously the size and the quality (resolution dpi-wise) printed will depend on these metadata - but the appearance of the digital image is not affected at all.
And of course, the file sizes were exactly the same.
-
well as we said, PPI is pixels per inch and dpi is dots per inch...
so after a certain # it will start making your image larger than the original, however they expect you to force the image into a certain view, there for giving it a better resolution.
-
exactly right Bruce...
Google and others don't want your page to be more than 100kilobytes and that is the top they say...
most want it to be like 20kb... and that's nutz to me... we are in a specialized niche on the internet... we as designers want high quality and high file size...
so there is a comprimise between Bruce's web requirements and our designer requirements... you need to make smaller images on the first page, (thumbnails) and then link to pages that hold larger files, or link straight to the file if you're not worried about theft. this will help you get both goals.
-
Well, that 100kb file size is for the html file only - whatever in displayed there as an image, is "outside" the file anyway - let it be an <img src> tag or an <a href> tag.
And for a "simple text file", 100 kbs are not that little. Put all your javascrips and css files into separate files and you're already there!
-
DPI and PPI are exactly the same thing...and are both fairly meaningless as far as size on a web page is concerned. If you want an image to fit into a 485x390 frame then simply make it that size...it doesn't matter whether its 72 DPI or 300 DPI.
Set the jpg compression level to around 7 out of 12 or 70% (whichever application you are using). This is a good compromise between quality and image-loading time.
An example of bad web design is here http://www.rinconvitova.com/fly%20trap%20sagebrush.htm
If you go to the pic on the bottom right and r-click it, then choose View Image (to see the image in its raw state in the browser) you'll see that a very large pic has been shoehorned into a very small frame, leading to totally unnecessary page-load time for viewers on dial-up. This isn't a case of a small thumbnail linking to a larger pic (there's no pointy hand cursor to indicate a hyperlink). The actual larger pic has been squeezed smaller -
Thanks for confirming (well, at least "reassuring), Alan!
Indeed, that site you linked here is crazy. I have built (well, have been building) a site with galleries and thumbnails - and even the "big" images aren't that heavy. Plus they are preloaded so when you get to clicking on the thumbnails, they load pretty much:
http://www.septichora.hu/hu/index.html? ... munkafotok
(that's our excavation from last year). -
no gai, that's images too
like mine...
here http://www.google.com/search?hl=en&q=www.aboveallhouseplans.com
31k
that's with every image you see on the home page.
-
I have to argue Alan...
it's not going to be the same resolution...
example
-
more pixels per inch or dots are going to give you higher definition. and the size after a certain number which I don't know will start making your image larger than you called out originaly, such as 300x400 if you went to like 900ppi would like double or quadruple the size of the image.
-
Well, Kris, there is an image on your main page where the first Google link directed. Here are the specs of it. (see "Fájlméret"). Only that's three times bigger than the mere html page counted by Google.
-
that's right gai, I put that picture up about 1 week ago, but the cache from google is a bit older... it will reflect it soon if I don't update the file...
-
I take that back, it looks as though they have cached it
if you save the file... gai is right, I'm wrong... I have been minimizing my images for nothing I guess... if you save the index file it is only 30kb... and that's what they call it out as...
sorry guys, I spoke too soon...
-
Oh man, I was just taking these screenshots about the different pages of your site!
Nevermind, post them anyway:
This is one of your pages ("Home Photos"
This is your first pic (the thumbnail) but there are a whole bunch of them:
This is the file size of what Alan posted above - obviously the huge images aren't counted in:
Yet the two images of the letter A are somewhat misleading, too. They are both of the same size (pixel wise) and you apparently embedded some typed letters there - this can behave differently.
Edit: Poor Coen, these screenshot were resized so much and now huge like hell... I must set my print screen software somehow else!
-
It's quite simple really; if you have a screen that is 2000 pixels wide and you have a web page containing a pic that is 500 pixels wide then the pic will take up 25% of the width of the page no matter what its DPI. The size of the pixels on your screen don't change unless you deliberately adjust the resolution. The only exception is if you constrain it within a frame that is smaller...and specify in Dreamweaver or whatever that you want it to fit the frame.
As it states on this page http://www.wpdfd.com/issues/17/dpi/
"Working with screen-based Web or multimedia images, DPI has no meaning whatsoever. If you scan an image at 50 dpi or 600 dpi and it is 100 pixels wide, it will be 100 pixels wide on any screen regardless of its resolution. Of course, if it is on a 640 x 480 screen it will occupy a larger area of the screen real estate than on a 1024 x 768 monitor."DPI or PPI only has any meaning when used in conjunction with a physical size for an image (Like 3"x4"). Obviously, a 4" wide image at 72 DPI will be 288 pixels wide, while a 300 DPI image will be 1200 pixels wide.
-
my point is it will be different, as I scan many many hand drawings... if you scan in at 75dpi then you'll have blur... if you scan in at 300dpi then you won't
and regardless of the width of the image, the clarity is transformed by the ppi so there is a difference.
-
When I'm throwing together web pages, I set up my tables first, then use that area to determine how big my image will be... mucking around with DPI is rather pointless...
on another note, DPI is a left-over term from dot matrix printers (remember the really loud screeching ones) and PPI is just some other software developer trying to confuse more people... What software are you using that says that?
-
I think scanning is different - it's like printing (just vice versa) so if you have a picture you want to scan and set 150 dpi, it will create 150 pixels of every inch - regardless of the original resolution of the printed picture - while you scan at 300 dpi, it will have twice as big resolution in the digital image (thus the "size on screen" will be twice as big, as well).
Scanning and printing is the two ends of the connection between digital ("virtual" and physical ("real") worlds. Just conversion of prints into digital and vice versa.
-
when I scan in at 300dpi the image is then 300ppi
-
Semi Interesting trivia: (I got my degree in graphic design)
The confusion arises because of the terms left over from the printing industry. Historically, artwork destined for the printed page was photographed through moire screens of various resolutions....like 300 DPI. The setup was huge; the process camera was actually built into the wall of a small room. The artwork would be on the outside, lit by two carbon arc lamps and you walked inside the room...hence inside the camera...to set up the half-tone screens and expose the negative that was later transferred to the printing plate. This did actually produce a plate (whether photo-litho or letterpress) that comprised actual dots...think old black and white photos in newspapers or the very obvious dots in old comic books, as reproduced large in a Roy Lichtenstein painting....because the half-tone screens had the optical effect of focusing the image as a pattern of different sized white dots. Hence the term Dots Per Inch. You could use other fresnel patterns that might break the image down into straight or wavy lines or concentric circle, for artistic effect, but by far the most common was the familiar dot pattern. When preparing colour material, the screens had to be rotated a precise number of degrees for each colour so that the four printing colours CMYK wouldn't all print in exactly the same place on the page http://www.phys.ufl.edu/~avery/course/3 ... or_dot.jpg
This term got carried over into computing, but is more properly termed Pixels Per Inch in a digitally scanned image destined for a computer screen. However it may still shake down to DPI if an actual printing plate is being produced for a commercial print run...depending on the type of printing involved. If you are producing stuff like a web page that doesn't relate to any hard printed output, you can just forget about it.
Using a desktop scanner, then obviously you'll get a higher resolution image (and hence a larger one in terms of pixels) the higher you set the resolution of the scan. Usually you'd like it as clear as possible, but setting it too high on source material like an image from a book or a low quality postcard will actually reproduce the printed half-tone dots...which is probably not what you want. Some scanners have pre-sets for printed matter which will introduce a certain amount of random dither in an attempt to break down the resulting moire pattern. If you set the resolution very high it will even reproduce the actual film grain from a non-digital photograph.
I've always scanned in my own illustrations at 300 DPI, because that's what the publishers want for reproduction in books or book covers. If I need the image to be smaller than the resulting scan...for instance for a web page or other on-screen use, then I just resample it smaller.
Apps like Photoshop can seem overly confusing, but that's only because most people that use them only use about 10% of the features. The people that it was actually designed for...the publishing industry...do actually need all that stuff.
Advertisement