| Home | Free Articles for Your Site | Submit an Article | Advertise | Link to Us | Search | Contact Us |
This site is an archive of old articles

    SEARCH ARTICLES
    Custom Search


vertical line

Article Surfing Archive



Optimizing Images For Web Pages - Articles Surfing

If you want attractive, fast loading pages on your web site, then you must optimize the images that you use. Optimizing essentially means finding the right balance between image file size and image quality. There are various ways to do this, and here we'll discuss some of the common options.

Reduce the Image Quality:
Although this sounds like a disadvantage, it actually is not since digital pictures usually have a far higher resolution than any computer monitor can display. By reducing the resolution, or the number of pixels displayed per square inch (dpi), you can effectively optimize the image for both display and download purposes.

Crop Images:
Photos and other graphics often have more surrounding detail than is needed for your purpose. Zero in on the subject of your picture by cropping away any unnecessary white space or clutter. This will reduce the picture size (and load time) while focusing the visual impact directly on the subject matter.

Resize Images:
This one is easy. Why post a huge photo on a web page when a smaller one will serve just as well? Just resize the height and width of the photo in whatever graphics program you use on your computer before uploading it to your server. Do NOT simply reduce the height and width dimensions in your html code as this continues to use the huge file size and merely displays it in a smaller area of the page.

Image Optimizing Tools:
There are some excellent tools available for optimizing images, and one of the best is Irfanview, at http://www.irfanview.com, a free download that enables quick and easy image compression, cropping and resizing.

If you have Adobe Photoshop, you might want to read the optimizing images tutorial at http://catalyst.washington.edu/catalyst/how-to/scanning/minimizeImages.html which has excellent step-by-step instructions.

There are also free online tools. Netmechanic offers free sample use of GifBot, at http://www.netmechanic.com/products/GIFbot_FreeSample.shtml, which displays optimized versions of any image you upload, ranging from 90 percent down to 10 percent compression. MyImager, at http://www.myimager.com, is an online image editor with many different effects options, plus the capability to reduce colors in gifs and reduce quality in jpg format. There are many others - just search for "online image optimizer" in Google for more options.

One caveat - never optimize the original image!
Save a copy instead, and optimize that version so the original is always available in the future if you need it again.

Re-Using Images:
A common mistake among web hosting beginners is uploading the same image into multiple image folders. If your web site has several different directories, each with its own image folder, it might seem logical to upload the logo.gif into each image folder and call it into a page with a link relative to that directory. But consider - if you do this, then your server must reload the logo image every time a visitor moves from one directory on your site to another. Instead, use the same image path every time you use the image. That way, the server loads just one image which is then cached on the visitor's computer and re-used for each page that displays it. This can greatly improve page load time if you have a number of common images, such as a logo or menu buttons.

Choose the Right Image Format:
Most web images are created as either gif files or jpg (or jpeg) files. There are pros and cons to both. Basically, gifs are best for simple graphics or line drawings. They can be created with a transparent background or used in simple animations and are often optimized by reducing the use of colors. The jpg format is better for photographs or full color images, but cannot be animated or used with a transparent background. For more detailed information on this topic, including side-by-side sample images, read David Eisenberg's informative article, "Why Good Images Go Bad - A Guide to Effective Use of Images on Your Website" at http://www.catcode.com/imgguide/index

Submitted by:

Jane Lake

Jane Lake is a writer on the HostNexus Site Development team. Her own website, AllFreeCrafts, at http://www.allfreecrafts.com, offers hundreds of original free craft projects which include photos (and optimized images) of the finished craft plus detailed how-to instructions. This site is consistently at the top of Google searches for free crafts and is one of many successful sites hosted by HostNexus at http://www.hostnexus.com



        RELATED SITES






https://articlesurfing.org/internet/optimizing_images_for_web_pages.html

Copyright © 1995 - Photius Coutsoukis (All Rights Reserved).










ARTICLE CATEGORIES

Aging
Arts and Crafts
Auto and Trucks
Automotive
Business
Business and Finance
Cancer Survival
Career
Classifieds
Computers and Internet
Computers and Technology
Cooking
Culture
Education
Education #2
Entertainment
Etiquette
Family
Finances
Food and Drink
Food and Drink B
Gadgets and Gizmos
Gardening
Health
Hobbies
Home Improvement
Home Management
Humor
Internet
Jobs
Kids and Teens
Learning Languages
Leadership
Legal
Legal B
Marketing
Marketing B
Medical Business
Medicines and Remedies
Music and Movies
Online Business
Opinions
Parenting
Parenting B
Pets
Pets and Animals
Poetry
Politics
Politics and Government
Real Estate
Recreation
Recreation and Sports
Science
Self Help
Self Improvement
Short Stories
Site Promotion
Society
Sports
Travel and Leisure
Travel Part B
Web Development
Wellness, Fitness and Diet
World Affairs
Writing
Writing B