Websites use a lot of images. They're not all photographs, either—they're used for background textures and text, as well. Because images are prevalent and important, understanding their basics can help you make a better-looking website. Here are some best practices for using website images.
File types
Websites most commonly use one of three image file types, each with a distinctive purpose:
JPGs are most commonly used for photographs. Because their quality can fluctuate, some JPGs can be really large, while others can be pretty small.
GIFs are small files typically used for logos or other graphic elements without many colors. Their range of color support is nowhere near as wide as JPGs (which is why the files are smaller), but they do have the advantage of supporting transparent pixels (which JPGs do not).
PNGs are the most versatile type of file for websites. They support a color range similar to JPGs, support transparency, and are typically smaller than their JPG counterparts. They're great for most graphics on your site, as well as anything using gradients.
File size
With the proliferation of broadband, high-speed Internet connections, you don't need to be incredibly exacting about the size of most images on your site. But, when your home page starts creeping into multiple MBs of data, instead of hundreds of KBs, it's going to take longer to load (read about page load speed).
It's a common mistake to have a website load an absolutely massive image (like the kind taken directly from a digital camera) and then resize it using the page's HTML.
Even though the image might display drastically smaller than the original image, it still loads the entirety of the file. A better practice is to resize the image using an image editor. If a visitor wants to get the massive image in all its glory, it's better to link to it so not every visitor is forced to download the whole thing.
A quick side note about pictures taken from cameras: if you're using them for multiple purposes — say a product brochure and your website — images on the web are governed by different rules than those for print. For example:
- DPI doesn't matter for your website's images.
- Getting the color exactly right is almost impossible because you have no control over your visitors' monitors and how they're calibrated.
Now go forth and use website images properly.
