and, btw, just have checked, if you export your photograph with Adobe Image Ready (or Photoshop's "Save for Web" function, what is the same code anyway) they will create files some new resolution (not pixels size!) no matter what was the original resolution: 100dpi jpeg, 72 dpi gif and 72dpi png... (on my Mac)
yes Ken, but - 300dpi, 1200dpi and 72dpi image of 400x300 pixels have almost same byte size... should have same size but compression can create some small changes (in just few bytes). And, btw, speaking about optional attributes - width and height (and alt too!) are demanded by html (and newer) specifications... otherwise you will have "dancing" page while loading. Browser take information about width and height of incoming element and can prepare space for it only if it is declared in html code. It is not a "must have", but is good to be there. :-))
Ken and others,
It amazes me that people still refer to screen image as being 72dpi or 96 dpi or 100dpi. Just how do you think you can set that value? If you set dpi in PS your screen software ignores it since it takes its resolution from the graphics card software parameters which do not look at PS or any other image software.
Yes old crt's were around 72dpi but that is not a fixed value. A lot of newer crt's are 96dpi but again that is not fixed.
if you change your screens native resolution from say 1280 wide to 800 wide and both options use the full width of the screen then I would like you to tell me how they can both be 72 or 96 or 100 dpi wide when at the 1024 setting a 600 pixel wide image will be using much less screen width than at 800 screen width resolution width.
It is further complicated by the fact that on a crt you can adjust the screen by stretching the width and height.
If you want to know just how many pixels per inch your screen is currently using just take a ruler and measure the viewable area width and divide that into the screen resolution width.
there will be an optimum viewable screen width in inches to tie up with pixel dot pitch so that you get best results on your screen but you will need to play with stretching your screen to find it. It will also depend on the screen grid(if you have one).
So please forget the mythical 72 or 96 or 100 dpi image concept. Its pure mis information(unless you are talking about printing).
for simplicity just think of screen resolution as x pixels wide and image as z pixels wide and it will occupy z/(x/100) percent of your screen width which is z pixels funnily enough.
please note that because your screen is not capable of displaying 5lp/mm (10 pixels per mm) then all on screen images should appear soft. Using sharpening to create artificial edge effects does two things.
Firstly it makes the image look harsh, especially at lower screen resolutions.
Secondly it increases the jpeg size when you save for web. Omit any sharpening(or only use a aver small amount) after the last downsize operation and use a higher jpeg quality instead which lessens the amount of jpeg artifacts.
To get to final size from a 4600 pixel wide image, first do any major sharpening you need then take final size, say 400 pixels and double it up to 3200. make first resize to 3200 then 1600 then 800 then 400. Skip sharpening at final step.
take a look at the two images here. They were made from scans of prints and employed blurring in the sky sections to get rid of noise and downsizing artifacts from big files. Some manual digiedge sharpening was used on route.
The proof of the pudding is to be seen by taking your screen resolution to 600x800dpi where the images still look reasonably smooth even on my 19inch 1280 x 1024 native res monitor.
The other images on my site will look crap at 800x600 because they have been used as work images whilst developing and are not optimised.
Note that bicubic downsizing introduces image artifacts. For pictorial images such as landscapes they are not usually visible. When they are, then some intermediate action such as blurring may be necessary to remove the artifacts.
"Just how do you think you can set that value? "
Sorry if I gave the impression that one can set the value... You are right !
As you and others have stated very nicely, not only is monitor resolution limited, it varies from monitor to monitor, and from setting to setting.
For that reason, list members have recommended (and demonstrated) that one should not really try to provide a truly high-resolution image over a browser: after around 72 - 100 dpi, there is no discernable gain.
As a few of the others have mentioned, pay absolutely no attention to dpi, or ppi for web presentation, all that matters is the total number of pixels, or literally pixel width x pixel height of the uploaded image, barring img tags which resize an image within the browser.
Here is an image which I sized at 4 (four) ppi, then uploaded to the web.
www.logojoe.com/photography/images/clouds_4ppi.jpg
Where the ppi /dpi comes into play, is of course printing images.
Forks
"if you export your photograph with Adobe Image Ready (or Photoshop's "Save for Web" function, what is the same code anyway) ..."
This is indeed how it's supposed to work, but for some reason I get much more predictable results using ImageReady rather than using save for web. Often with save for web, things look a lot different from my expectations in a browser. It might just be that it lacks the preview options. Save for web does work well for me for non-photographic art--gifs and things for web design.
One way to avoid artifacts is to size it a bit oversize on your monitor. Do a Print Screen or Grab on the Mac and paste the results into a new document. Then you can fine tune the size without introducing artifacts.
paul,
in photoshop save for web, right click in the optimised image and make sure uncompensated colour is ticked.
The web uses sRGB to display images. At least IE does and it ignores embedded colour profiles. If you have use document colour profile ticked then you will see the same image as your working profile for the image, which if you are using adobe 1998, will not be what you see on the web (since IE ignores it). i.e. IE6 defaults to sRGB regardless of your image profile.
For this reason you should convert your image to sRGB before save for web in PS and use the uncompensated colour option so that Adobe 1998 (or whatever) is not used to display the optimised image in save for web.
This is the equivalent of what I do; but for whatever reason I often get unpredictable results with save for web. I know it works for some people, but I wanted to throw that out there in case anyone has the same issues.
I came into this conversation in 1994.
The importance of dpi, ppi, etc is as a method of making sure that the image is a reasonable size.Those of us who come from digital print and started doing electronic retouching in the 80's think of dpi in the same way that a dot etcher thought of lpi for screens.
In general 72 or 96 or 100 dpi and a maximum size of 500 or so pixels in the widest dimension will produce an image that is viewable and doesn't take forever to download.
I am reminded of an art director from many years ago who wanted to use a 300 dpi 100% scan of an 8x10 on a web page. In those days 28k modems were still the rule with occasional users having isdn and many companies (including fortune 500's having fractional t1's). The image that this art director wanted would download at about 1kbyte/second. It's size was around 50MB. That of course meant that 50,000 seconds or around 14 hours would be required for download. These days things are faster, but huge images still cause problems for servers and users with slower lines. Call it whatever you want, dpi, ppi, lpi, fbi, cia, bbc, bb king, or doris day (thanks John and Paul), but keep the images small enough that downloads are reasonable.
Posting Permissions
Reply With Quote
Bookmarks