|
Beginner Tip:
Be Careful How You Resize Your Images
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
If you use Microsoft FrontPage or other WYSIWYG HTML editor, be careful how you resize your Web graphics. Most WYSIWIG editors let you fit a large image into a small space on your Web page with a simple mouse click.
That may seem easier than learning a graphics program but will you like the result?
WYSIWYG Editors: Easy But Dangerous
What You See Is What You Get editors (pronounced wiz-e-wig), such as FrontPage, are popular Web page authoring tools because they don't require knowledge of HTML. Nearly a third of webmasters use FrontPage to build their Web site. But a WYSIWYG editor is a two-edged sword: it makes it easy to build a Web page, but it also makes it easy to make HTML mistakes.
For instance, FrontPage allows you to resize your Web graphics within the editor itself - without using a graphics program. You can either grab the image with your mouse and stretch or shrink it to whatever size you want or resize it with the Pictures Properties attribute option.
While this may seem like a quick and easy solution to page layout issues, don't do it! Using FrontPage to resize your photo is bad because you really aren't changing your image file size at all! All you're doing is changing the space on your Web browser allocates for the image.
HEIGHT And WIDTH Attributes
For example, suppose you have a photo that's 100 pixels wide and 100 pixels high stored in a file called "portrait.jpg." When you put this image on your Web page, FrontPage ads an HTML IMG tag to your page like this:
<IMG SRC="portrait.jpg"
HEIGHT="100" WIDTH="100">
|
The height and width attributes allocate space on the Web page for the image. That's good, because using these attributes helps your page load more quickly.
Now, suppose you resize your image using FrontPage. When you do this, all FrontPage does is change the value of the HEIGHT and WIDTH attributes. No matter what the actual size of your photo, FrontPage tells the browser to stretch or squeeze it into the new size.
That's bad for two reasons: image quality and load time.
Image Quality Suffers
Though your Web browser is capable of scaling photos to make them bigger or smaller, it's really not very good at it. A graphics editor like Photoshop or Paint Shop will do a much better job of resizing your graphics.
For example, look at the two images below. Both show a picture of a circle that was initially 600 pixels wide and 600 pixels high. The image of the left was resized to be 150x150 pixels using Paint Shop Pro. The image on the right is still 600x600 pixels, but we've used the IMG HEIGHT and WIDTH attributes to shrink the image to 150x150 pixels, the same way that FrontPage would resize the image.
You can see that the left-hand image has a dramatically better quality than the right-hand image.
Slow Page Load Times
When you resize an image in a graphics program, you'll change both the image's dimensions and its file size. If you resize using the FrontPage editor, you'll change only the image's dimensions, leaving the file size the same as the original image.
For example, the original 600x600 image shown above had a file size of 8k. The right-handed image still has this file size. The left-handed image is only 3k, nearly a 3:1 difference.
In this example, both versions of the file size are small, so neither has much impact on our page's load time. But image if the original image was 80k: that 3:1 difference would be dramatic!
Use Image Composer With FrontPage
High-end graphics programs like Photoshop are very powerful, but also expensive and time-consuming to learn: they intimidate many WYSIWYG editor users. Microsoft addressed that problem by bundling a small graphics program inside FrontPage: Image Composer.
If you installed it along with FrontPage, you can easily resize your images the right way simply by double-clicking on the image. Image Composer opens automatically with the image loaded and ready to edit. While it isn't nearly as powerful as Photoshop or other high-end graphics packages, Image Composer is a quick and easy way to make minor changes to your image files.
Whatever editor you use, the bottom line is this: if you resize your images using FrontPage (or inside any WYSIWYG editor) instead of a graphics program, you're going to have fat, slow-loading Web pages. And slow Web pages are the #1 complaint on the Web.
How slow are your pages? Let HTML Toolbox test your site and see. You can also use GIFBot to see if your graphics are as fast as they can be.
|
