Image Optimization for Web
To be a student in the CIT-235 class at BYU-I, we have to make sure that we fallow certain rules and guidelines when creating and developing our websites and presenting our assignments.
One of these rules is that all of the images that we use on our website MUST be 20 kilobytes or less, no matter what the dimensions are.
Now let’s face it.. It seems kind of hard to do that without losing overall quality.
In this article, I’ll try to help you understand how to achieve better results when compressing and using images effectively on your website.
Images play a crucial role in websites, especially if you have a website that sells products online. If your website is full of pictures and they take a long time to load up, it will drive the customers/visitors away from your web site. Remember: You only have from 4-7 seconds to “convince” the user to stay on your web site.
According to the website www.about.com , these are some of the things you can do to optimize your images:
Before going to your intended size, you first want to crop your image to remove any unnecessary portions of the picture. After cropping, you can change the overall pixel dimensions to go even smaller.
All photo-editing software will have a command for changing the pixel dimensions of an image. Look for a command called "Image Size," "Resize," or "Resample." When you use this command you will be presented with a dialog box for entering the exact pixels you wish to use. Other options you may find in the dialog are:
- Resample - You need this on when sizing down. This enables the software to change the pixel dimensions.
- Constrain proportions or keep aspect ratio - You want this option enabled. It prevents the image from being stretched and distorted. When this option is enabled, you only need to enter one value--height or width--and the other value will adjust automatically.
Never, ever resize and overwrite your original file!
After sizing the image, be sure to do a Save As so you don't overwrite your original, high resolution file. You'll want to save as a JPEG file.
- When choosing the compression level, keep quality in the medium to high range.
- You want to shoot for a file size of 30 to 100 KB per image. Go small if you will be putting several files on the same page or sending them in one email.
- Try not to exceed 100 KB per Web page for the total of all images.
This may sound like a time consuming process, especially if you have a lot of photos to share, but fortunately most of today's software has made it easy to size and compress a batch of photos very quickly. Most image management and some photo editing software has an "email photos" command that will resize and compress the images for you. In fact, Windows XP has this functionality built-in. Some software can even resize, compress, and generate complete photo galleries for posting on the Web. And there are specialized tools for both of these tasks--many of them free software.
Tuesday, December 9, 2008 6:11 PM
