by D. Sproul | July 6th, 2009
Are you paying more money than you should be to load photos on your company’s website? Loading images larger than they appear on your website can increase your server traffic costs, not to mention your customers’ page loading time. This article will help you understand how to use website images the right way.
Keep Images the Correct Resolution:
Print resolution is usually 300 dpi or higher. You can sometimes print an image around 250 dpi and get away with it not looking too bad.
Images for use on the web should be 72 dpi; “dpi” means dots per inch, and is a measure of resolution. It might also be written as “ppi,” or pixels per inch. dpi is the most common phrase, and it usually is written lowercase.
Most screens read images at 72dpi, so using a larger image just uses more server memory and load time; it won’t show your images any better.
You can change your photos’ resolution using programs like Photoshop, ACDC (free from Download.com) and others.
Use Correctly Sized Web Images:
If your photo appears 400 px (pixels) wide on the web page, then you should really use a web image that’s the same size. If you used an image that was 2000 px wide, you would just be costing yourself money in server bandwidth, and increased loading time for your customers. (You might have seen these images: they load very slowly from top to bottom even with a great internet connection.)
To fix your image to the correct size, resize a copy of the original photo down to 400px, and 72 dpi. Then save it as a web image: JPEG, GIF, PNG.
JPEG’s are compressed, and great for photos. They don’t look good stretched larger than their original size, or will appear pixelated or blurry. They also aren’t good squished smaller than the original size, even if the length and width are shrunk together. They will appear blurry. JPEGs work well for gradients. If you have a transparent part of the image, it will be filled with a matt color (usually white, unless you specify another color during the “save for web” process). JPEGs are lossy, which means they degrade a bit with each new save. If you want to modify a JPEG image, its best to go back to the original, and not make a copy of a copy of a copy.
GIF’s are also OK for photos, depending on the complexity of the image. If you have transparent sections, they will preserve that. They don’t work well for gradients, as they look like lines. These are best for less complicated images like line drawings or black and white.
Portable Network Graphics or “PNGs” (pronounced p-n-gees) are bitmapped images that are larger than JPEGs, but can be enlarged to a larger size without losing quality. They use lossless data compression. Apparently they were invented to replace GIFs. (Here’s a great article on Wikipedia on PNGs and how they compare to other formats.)
If you have an e-commerce website with thumbnail-sized images and larger product images, its advisable to scale two versions of the image, instead of using the larger image squished down for the thumbnail size. Imagine the loading time with twenty large JPEG images squished down on the same page (500-700k each x 20 on the page = 10,000k or 10MB) when you only need a thumbnail (10-20k each x 20=200k). The text isn’t even included here.
I hope this article has helped you understand more about photo file sizes, and how to use the correct image size and resolution to help your company’s bottom line, as well as your customers.