Visual Sizes of Images
Photoshop Free Online Course

Be sure to understand Monitor Resolutions before working with the visual sizes of images. It is critical to understand that the exact same image will "appear" bigger or smaller to different users depending on their browser settings.

For example -


This bar is 800 pixels wide

For some users, that will nicely fill the entire width of the page from left to right. For other users, that will only stretch partway across their page. You need to develop a design that looks nice no matter what the user's resolution.

So let's say you want to show a "clear image" of a chickadee to a user. Here's an image that is 400 pixels wide -



For users running monitors at 800x600 resolution, this takes up 400 pixels - or exactly half of their 800 pixel width. But for users running at 1200 x 1024, the image only takes up 1/4 of the total screen width. If a user has a big 24" monitor, half a monitor width could be huge. But if a user has a little 13" monitor, and only sees the image on 1/4 of that monitor, the image could be small. What's a web developer to do?

The solution is to offer different options. 400 pixels wide is pretty "standard" as a good size image for most people to at least get a general idea of what the image is. Yes, it might be really big for people on 800 x 600 with 24" monitors. That's a 12" across image! But most people aren't running that configuration. You can then provide the option for people to click on that 400 pixel wide image to see a larger version. If someone already can see the image clearly enough, they won't bother to click through. But if someone has a tiny monitor or is running at a high resolution, they will want to click to see a bigger version that is more clear.

So the visual size of an image is how big or small that image APPEARS to the end user. This is affected by two things. First, the physical size of the monitor being used. Items on tiny 13" screens are tiny, items on huge 24" screens are huge - just like with TV sets. The second factor affecting perceived image size is the user's chosen screen resolution. Again, read through Monitor Resolutions to understand how the exact same monitor can make images *appear* larger and smaller by changing the monitor resolution.

Photoshop Free Online Course