Getting your photographs online is not always a simple process of making an upload and jotting down a bit of code. Although the html for putting an image onto a website is simple, making your picture appear on the web is the easiest part. Making it appear good on the web is another matter entirely. There are several factors to consider when putting your photographs on-line, and to ignore, dismiss, or overlook them can lead to a lagging website, out-of-place images, low image quality, or all of the above.



Most of the potential pitfalls in putting photos on the web relate to the image size. It is certainly of no help to us that the typical resolution for a website is 72 dpi while a printer prefers 300. Even less fortunate, the resolution of a screen and of an image in a picture editor can be a very variable thing. To see what I mean, load a high-resolution image into a photo editor, and then lower the resolution. You'll notice that the image appears smaller. Now take that same high resolution image, and go into your computer's properties and lower the resolution of your screen. That same image appears larger. As the purpose of this article is not a discussion of resolution, we can leave that experiment by the wayside. The point was to display how we now have this variable unit of measurement - the pixel - that relates to inches in a differing manner based on computer settings. Naturally, these settings have an impact on the image's file size (for the image's resolution) and its apparent visual size.

So say you have a 300 dpi photograph that you want to put on the web. Printed, it shouldn't look that large. On the screen, it might well appear massive. So naturally, if you go ahead and post it to your website as-is, you'll have this huge picture dominating the scene, potentially pushing things out of alignment, getting cut off, or forcing scrolling. Fortuitously, this is a problem easily solved; just set the image's height and/or width attributes to the desired settings, and you're set, right?

Wrong! Resizing an image directly on the web is perhaps the worst possible way to do so. The first reason for this is lag time. We all know that smaller images means smaller file sizes and, thus, faster loading of a website. What may not be immediately apparent is that a photo or graphic that is shrunk directly by the web browser is not, in fact, a smaller file. The browser must still load the entire image, and then calculate how to modify it to appear in the smaller area required. If you want to have multiple thumbnails on a page, this can quickly bring the site's loading time up to the point where even a user with a high-speed connection gives up.

Perhaps even worse, the image's quality will be awful. Web browsers are not graphics programs, and are not made for high-quality image resizing. A vector can get around this to at least some degree, but a photograph will suffer from a massive loss of quality with this form of resizing.

The solution is simple. If you want to put your photographs on the web, run them through a proper program first. Make multiple sizes if you want them, but set the resolution to 72 dpi and then adjust the size accordingly. In this manner, you will not only get images of the correct size, but you will reap the benefits of higher image quality and smaller file size.