Is resolution Stricly confined to a Screen?

[Donamai]

Hi,

I recently encountered a problem with a website designer. Fortunately I could see his point before I started getting a bigger problem.

Ok, here is the situation. I always thought that I new about image resolution but I was strictly confined to the screen in front of me.

The designer ask me to retouch a few pictures for him and asked me if I could resize them to make them bigger. I actually did. I increased the size of the image a couple of times to what he wanted the dimensions to be. When I gave them the images he said that he noticed a big loss of quality and said that in some screens the images would look bad. "I jumped out my seat" I say well, I don't know how could that happen I always use the same technique when retouching my pictures and so to make a long story short he said that I had "resampled" the images the incorrect way.

I could not believe it! I thought I have mastered the size and resolution of images. I guess I was only focused on my screen and printer only. I never thought about images displayed in different screen resolutions.

I took a quick look at some books about resolution but I either could not see what the designer meant or I was still confused.

I have never worked with graphic or web site designer at all. This time I felt like I have gained nothing for the past few years. I wanted to keep working with the designer but I don't think he would like to keep working with me.

This is where I have my questions:

What is the best way to practice resolution for the web and for print?

Where I could get some more info on resolution on the internet? The internet offers tutorials but very limited to study.

Are there any differences when working with scanned images for the web than actually getting them directly from a digital camera, device? I know! I supposed to know this buy now but apparently I don't.

Any good tutorials I have not looked out here in the forums? I have looked and looked but the word resolution is infinite here.

I tried posting images on top of another and they either looked way to big or way to small on the resolution. What would be the best way to match images in resolution?

I think I need to be more proficient now with resolution before I can continue to work on collaboration. Wish me luck!

[stosh7]

Digital Photography is all about the number of pixels in the image. If you consider that, it will simplify your thinking about web display, printing and scanning quality vs. size.

For example, If a base image is 3000 X 2100 pixels and you do not resample, your image sizes vs. resolution (dpi) is:

10 X 7 at 300 dpi ... good resolution for printing
41.7 X 29.2 at 72 dpi ... standard resolution for web

So if you wish to display this very same image smaller than 41.7 X 29.2 on the web, you must resample downwards. If you wish to print the image larger than 10 X 7, you must resample upwards.

Bicubic resampling is the method of my choice with the caveat that it yields the most accurate results if done in small bites. I resample 10% at a time - either up or down. It's easy to write an action to do this, and then keep running your action to the desired size. The action can also be written do multiple, 10% reductions or expansions. In this manner, you can have poster size prints with little or no loss of detail or appearance of blur since the edges are nicely preserved. Noise, however does become an issue.

Hope this helps.

Stosh

[KR1156]

use bilinear when downsizing. the information is already there when downsizing.

[smak]

On the web (on monitors), only the Pixel dimensions matter. For example: an image is 600px X 400px. Everybody's monitor is made up of a certain number of pixels - width and height. Only pixels matter; there are no inches on the web or your monitor. That image will be 600 X 400 pixels on every monitor in the world. The DPI or more technically, the PPI, has no relevance on the monitor - only the pixel dimensions of your image: 600 X 400 pixels. You can enter in Photoshop: 72ppi or 72000ppi, that has no relevance on monitors; it's always the pixel dimensions. (Do this on the same image without reampling - set 72ppi and save - set 720ppi and save. The image will be the same on your monitor. Your monitor doesn't know anything about inches - only the resolution you use your monitor at, for example: 1024 X 768 pixels. Your image will take up 600 X 400 pixels of that 1024 X 768 pixels.
Photoshop recommends when you RESAMPLE (increase or decrease pixel dimensions) to use Bicubic Sharper when reducing and Bicubic Smoother when increasing pixel dimensions.
Resampling upward almost always leads to a poorer quality image. Resampling down is almost always fine. A little sharpening after reducing is recommended. I don't see why any image out of a camera would ever have to be resampled up - It would be too large for most screens.

Here is a great link; it is very long, but it explains this all extremely well.

http://www.scantips.com/no72dpi.html

Why does Photoshop and many people use 72ppi for the web? Well, you have to put some number there. 72 has stuck as this magic number.

[NancyJ]

Unless you're working with vector graphics there will always be quality loss when you increase the size. What size were the images originally and what size did the guy want them resizing to? Perhaps you could show us one of the images so we can see what he's talking about. When I'm working on web images, I usually drop my res to 8x6, or go 3x zoom, so I can see what someone on that resolution will see. Things may look all shiny for me on 1280x1024 but at lower resolutions they can look awful because the image is the same size and my monitor is the same size so its effectly like zooming in, barely noticeable artifacting at high resolutions can be really ugly at low resolutions.
But perhaps the issue is not the resizing at all, it may be how you've saved them - how much compression did you use?

[Jerryb]

hi,
well here my view of your post........

1. up sampling.... first ... unless you can't help it you always take your pictures in the largest size resolution so you don't have to worry about enlarging... smile...... anytime you up-sample... there going to be issues...
now here a nice little websites that has screen pixal deminssions, dpi, and printing size for optimal printing. puposes...!!
http://www.microsoft.com/windowsxp/u...stquality.mspx .... this is a nice and quick reference for when you do take your pictures or you scan...

note: if pictures are just for viewing and nothing else........ on the monitor.... 72--96 dpi is sufficient..... because of limitations of the monitor...

2. i don't know what procedure you used t o up scale.. some people just use a simple resize or the 10% meathod.... there was nice tutorial. on the radiantvista website, a couple of week ago on up scalling for printing prep that I been playing with and it looks reall good... these are Mark Johnson basic steps
1. in PS, open image resize windows
2. in dialog box , uncheck "resample image"
3. change resolution to 300 (for epson 360)
4. then check mark "resample image"
5. pick bicubic sharper (he prefers that)
6. then put your longest deminision. the other demision will adjust automatically
7. ok.... then for the last major step a little sharpening...!

3. your questions....
a. best way to practice... I don't know if there is a best way... what i have done is just a lot of expermentation... to see what the results are... shrinking a picture and see at what point i lose too much quality or resizeing upwards and at what points my picture start get pixalated on the screen or how large i can print a picture before it get ugly... smile... now that link i posted above.. that a good guidlines... to see what the differences are....

b. where for tutorials... never really found any one good site.... now your search criteria maybe is what limiting you.. if you search for just RESOLUTION believe me that will get no where.. smile.... but if you search for something like PIXAL PRINTER RESOLUTION TABLE what you end up finding is a lot of info and a lot of comparison pictures!!! and a lot of discussion on print and scanning issues...

c. now the next question you had mmm """""Are there any differences when working with scanned images......."""" not really sure what your looking for here.... on the surface there is no difference... other than when your working with a camera... your telling the camera what pxial deminsions you want... and the larger the better...!! always easy to resize downward!! .

now scanners.... first. the term dpi and ppi... although different definitions but manufacturers will use those interchangeably...!! grrr. smile... although in many case the default is 72 dpi/ppi.... that ok for just monitor viewing... however you really want to scan at least 200 if not 300 dpi/ppi ...!! that get you more data,,,, that will give you more pixals!! for printing and editing purposes....!!!

d. your last question... not sure...when I was doing the mark johnson tutorial, what i did was after I had finish resizing up ward.... i put the orginal and the modified picture side by side then zoom in to where the display was about equal in both and then looked at the details betweenthe two and see how good my work was or how poor.. smile....... that about all i can say....

Well those are my thoughts I hope there usefull to you good luck....

Originally Posted by Donamai

Hi,

I recently encountered a problem with a website designer. Fortunately I could see his point before I started getting a bigger problem.

Ok, here is the situation. I always thought that I new about image resolution but I was strictly confined to the screen in front of me.

The designer ask me to retouch a few pictures for him and asked me if I could resize them to make them bigger. I actually did. I increased the size of the image a couple of times to what he wanted the dimensions to be. When I gave them the images he said that he noticed a big loss of quality and said that in some screens the images would look bad. "I jumped out my seat" I say well, I don't know how could that happen I always use the same technique when retouching my pictures and so to make a long story short he said that I had "resampled" the images the incorrect way.

I could not believe it! I thought I have mastered the size and resolution of images. I guess I was only focused on my screen and printer only. I never thought about images displayed in different screen resolutions.

I took a quick look at some books about resolution but I either could not see what the designer meant or I was still confused.

I have never worked with graphic or web site designer at all. This time I felt like I have gained nothing for the past few years. I wanted to keep working with the designer but I don't think he would like to keep working with me.

This is where I have my questions:

What is the best way to practice resolution for the web and for print?

Where I could get some more info on resolution on the internet? The internet offers tutorials but very limited to study.

Are there any differences when working with scanned images for the web than actually getting them directly from a digital camera, device? I know! I supposed to know this buy now but apparently I don't.

Any good tutorials I have not looked out here in the forums? I have looked and looked but the word resolution is infinite here.

I tried posting images on top of another and they either looked way to big or way to small on the resolution. What would be the best way to match images in resolution?

I think I need to be more proficient now with resolution before I can continue to work on collaboration. Wish me luck!

[Donamai]

I have been practicing with the resolution and it is cool to see the differences. You were right Jerryb; a search by resolution had millions of pages come up. Next time I have to be more specific.

Like I mentioned earlier in this thread, I have no knowledge on web design. It had never crossed my mind that everything in a web page design has to match the resolution otherwise images can look jagged or pixelated.

I have found sites online where I can see the crispness of their details and others where images seem out of place.

I found that book "Making and Compositing" by Kathing Eismann and I saw a good challenge to play with... the combination and moving Paths section. I did not even know that even paths had resolution. I always thought that paths would adjust themselves to their local image no matter the size. Darn i was wrong! I had not had the situation where I had to combine images of different resolutions before.

It was great to see the differences in image size when putting two images together.

I definitely have to practice more with combining images of different resolutions.

Any good challenges out there? Tutorials? on matching image resolution for composition? I maybe a bit behind on that...

[Jerryb]

hi,
again my thoughts
another aspect of picture displaying on webpages...
now.. generally a lot people, when using jpg format, will compress there picture a lot in order to save space on the server.

However, jpg format is a lossy format! the more you compress a picture the quality goes down. you can get bluriness, fine lines or details can getd dotty/brooken lines, smooth areas the shades changes slightly, and some extraneious artifacts can be introduced.....

a lot of people will use 90-95 % compression... to me that too much if you want to maintain a high quality picture... for general emailing i like to go no higher than 80-58% for jpg to me that a nice balance between compression and quality.... but if quality is very important.. and if they need to be in jpg format then i'll go with minimum compression... in fact with your clients unless they have a requirement that you send them jpg.. i would use tif or png or bmp... smiling.

as rule i never use jpg format i save orginals in tif or png or bmp format... or keep in psd format if i am go to do more things with the picture... these are non lossy formats...

you can easily experiment with the jpg format...... take a nice sharp clear uncompress picture... then start applying 10% 50% 95% 98% compression and see the differences

anyway those are my thoughts....

Originally Posted by Donamai

I have been practicing with the resolution and it is cool to see the differences. You were right Jerryb; a search by resolution had millions of pages come up. Next time I have to be more specific.

Like I mentioned earlier in this thread, I have no knowledge on web design. It had never crossed my mind that everything in a web page design has to match the resolution otherwise images can look jagged or pixelated.

I have found sites online where I can see the crispness of their details and others where images seem out of place.

I found that book "Making and Compositing" by Kathing Eismann and I saw a good challenge to play with... the combination and moving Paths section. I did not even know that even paths had resolution. I always thought that paths would adjust themselves to their local image no matter the size. Darn i was wrong! I had not had the situation where I had to combine images of different resolutions before.

It was great to see the differences in image size when putting two images together.

I definitely have to practice more with combining images of different resolutions.

Any good challenges out there? Tutorials? on matching image resolution for composition? I maybe a bit behind on that...

[byRo]

Originally Posted by Donamai

....asked me if I could resize them to make them bigger. I actually did. I increased the size of the image a couple of times to what he wanted the dimensions to be. When I gave them the images he said that he noticed a big loss of quality and said that in some screens the images would look bad. ....

I'm no web designer (yet!) but, maybe, I might add something useful...

To me, you should be producing images at the final pixel resolution for the screen. That way the image you send is exactly (give or take a bit of colour and gamma) the image that folks will see on their browser.

If he said that there is a loss of quality on some screens, then it seems that he is using your enlarged image on the page and then letting the browser do the resizing.

As you've seen from the comments above, resizing isn't a trivial process even with Photoshop - now imagine leaving that to a browser.

Rô

[Dave.Cox]

I do a lot of images that are going to be on the web. Ro, I think that you have hit the point exactly. It is not a good idea to let the browser size an image. I always size the image before I put it on the web page. When the browser resizes it, you will usually loose quality, and the graphic will often looked blurred. Also, if the browser is downloading a large image, and then resizing it, you are taking time to download more information than you need.