Posting images to the web is relatively easy. But placing images properly to take into account download time, aesthetics, layout constraints and simple practicality, well, that's the real challenge.

Let's begin with the basics of height and width. In web design, the pixel is our measurement of space. The image below is 150 pixels wide by 300 pixels high.


Hover your mouse over the image. What happens? Why does that happen? View the source code of this page to see why this image appears as it does.

So, a 300 pixel wide by 150 pixel high image will always appear this way, right? Well, not really. There's always the issue of screen resolution. Most browsers are set to display either 800 pixels wide by 600 pixels high OR (the more recent standard) 1024 x 768 pixels. Try changing the resolution of your display and see what happens to the image above.

And we haven't even begun to address how resizing the browser window can affect design. But let's not get ahead of ourselves.

Let's say we want to resize the image above. Any WYSIWYG editor will allow us to physically grab the image and grow or expand it. But manipulating the image in an HTML editor leads to all kinds of problems.

 Click here to see what I mean...