|Resizing Images for the Web via HTML|
Prepare Your Images for the Web > Resizing via HTML
Many people have learned you can use HTML to change the size of your images on the Web page by specifying the HEIGHT and WIDTH in the IMG SRC tag. (Continued below...)
While it is advisable to specify actual image height and width via these tags, it's not advisable to use these tags to change the image display size for a few reasons.
- You're forcing your viewers to download larger files then they need. Cropping your photos before putting them on your Web page will result in smaller files and less download time.
- Browsers don't do a very good job of resizing images. The images are going to look either blurry or blocky if you resize them via the browser. GIF images are the worst. Never resize GIF images via the browser; they'll look awful!
- Resizing in the browser requires more time to render the page and uses more of your viewer's system resources and RAM.
a look at the two comparisons images below.
This image was resized to 50% of the original size in Photoshop and then sharpened. This image is 19KB and still looks quite good.
This image was cropped in Photoshop and then resized to 50% of actual size via the browser. This image is 46KB and will take more than twice as long to download.
|This is a GIF image that was resized in Photosop and then converted to GIF format. The file size is 8KB.||This is a GIF image that was first converted to GIF and then resized in the Web browser to display at 50% of the actual size. Notice how blocky it appears? Not only does it look worse, but the file size is a whopping 24KB... that's three times larger than the image to the right that actually looks better!|
I suggest you take the time to crop and resize your images before putting them on your Web page. If you reached this page from a search, you can go back to the introduction to learn how to prepare your images for the Web in several popular software programs.
Questions? Comments? Post to the Forum!