The way you create a high-quality looking web page for the computer screen is somewhat different than doing so for printing purposes.
IMG tag and WIDTH, HEIGHT attributes
When displaying images on a web site, don't use the WIDTH and HEIGHT attributes to scale the image to a smaller size. Web browsers use a quick-and-dirty scaling algorithm for speediest drawing, which sacrifices the quality of the image. It's better to use a "real" image manipulation software to scale images to the sizes you need on the web site, and store them as separate files on the web server, using the appropriate sizes on each web page.
Now, understanding that, you may still choose to specify WIDTH and HEIGHT within the IMG tag, supplying the true width and height of the actual image file. Why would you do that? Isn't the web server going to figure out how big the image is when it reads the file? Yes, but most browsers begin rendering the HTML long before all the images on the page are loaded. Without the WIDTH and HEIGHT attributes, the browser has to guess the size, and redraw everything on the screen moments later when the image is finally received.
You have probably seen this behavior on image-laden web pages - text flowing then reflowing, things scooting around, getting wider across the screen, sometimes over and over - many times in 1 second. Some people like that, and some don't. You can avoid that behavior by specifying the WIDTH and HEIGHT attributes of IMGs in your HTML.
Exception To the Rule - Printing Web Pages
There is, however, an exception to the above rule. Printers have a much higher resolution (dots per inch) than computer screens do. If you're displaying images on a web page that's destined to be printed by the user, you should use higher-resolution images and scale them down with WIDTH and HEIGHT, if you want the highest quality printed results!
Scaling Images Professionally, No Work Involved
You may be thinking, "I can't bring up Photoshop/Paint.Net/Gimp/my-favorite-painting-application every time my customer wants another picture or two on their web site. That's work!" Or you may wonder, "How am I supposed to scale my images to 2 different sizes (thumbnail, larger version) when the customer uploads a picture using the web site's administration area?"
The easy answer to those questions is, "you need a command-line-driven image manipulation utility that does high-quality image scaling, and can be called from PHP/Perl/Ruby/your-favorite-server-side-web-environment." Specifically, ImageMagick. There are others, but ImageMagick's "mogrify" is the application I fell in love with first.
ImageMagick comes preinstalled on most Linux server distro's today. You can download it for almost any platform though, nowadays. It's open source, so it's basically free for you to use. It comes with a variety of command-line utilities - identify, convert, display, mogrify, montage, and a few others. I use "identify" all the time to see the dimensions (in pixels) of images in a directory/folder. You can type "man identify" to learn more about it on a Unix/Linux system.
The "mogrify" utility makes it easy for you to scale an image smaller in-place. You can now write your code to receive the image from the user, copy it and scale it, even multiple times - all as part of the user's "uploading a new picture" experience. Suppose your web site needs thumbnails of every picture that are no larger than 80x80 pixels. And you also need larger versions, no larger than 350x350 pixels, for display when a visitor clicks the thumbnail, so they can see a larger view of whatever the thing is. And, you happen to know that your customer takes photos at 1024x768 pixels or larger with their digital camera.
The customer uploads a new 1024x768 picture. You copy it twice and scale it twice, behind the scenes. Now you're storing 3 copies of the picture: thumbnail, medium size, and original size. Easy, the software did it, no excessive work for you today.
Should I Keep the Original Image? It's Huge.
Yes, in my experience, always store the original images, even if you're not displaying them anywhere on the web site. There are many reasons for this; the biggest reason being...
Printable Web Pages Should use High Resolution Pictures
For the best results, you want to use the highest resolution images, and scale them to the right physical size on the web page using the IMG tag's WIDTH and HEIGHT attributes. This way when the customer prints the web page, the browser has the opportunity to print the image at printer-resolution.
Not all browsers behave the same way when printing a web page - they each tend to scale text and images different ways, and fit different amounts of text per page. This is somewhat frustrating. But at least you'll know the quality of the images will be as high as possible on the printed copy.
Spend a Little Extra Time for Quality Results
In my experience, it's the little things that count. Your customers may not specifically notice a higher-quality printout. And if they do, they may not mention it to you. But there will be something about it they remember, that adds to the "feel" of a professional web site. Or perhaps their customers will see it, and send them more business as a result.
It's a good thing when your customers are more successful - it tends to make you more successful as well. So, play around with this, and build high-quality web sites that people enjoy using.
Don't miss the latest web tips and tricks!
Subscribe to our low-volume mailing list:
Privacy Policy
| Copyright © 2006 Fastech Learning LLC, all rights reserved. |
| Phone toll free 1-866-464-6688, Phoenix Metro area 480-895-6688 |
| Problem with this web site? please let us know |
