Few things make me cringe more when viewing a website than when I see large images slowly paint as I gradually lose interest. This is far from the only “party foul” for website images. These are some of the important considerations when choosing or creating images for your website:
- Lossy vs Lossless. Some image formats reduce image size by altering the image itself. In some cases, areas of nearly identical colors might be reduced to all be a single color. In other cases, most notably with JPEG images, image data is reduced to a mathematical formula, which can cause “artifacts” to appear even in areas where the image should be a solid color. The compression methodology where the compressed image is not identical to the original is called “lossy”. In “lossless” images, the compression is fully reversible and the compressed image is identical to the original. For photographs, lossy images are usually okay to use, but for “clip art” or logos, artifacts from lossy compression stand out more and you should use a lossless format.
- An important prerequisite for posting images is to choose the right image format and not all image formats are created equal. These are some of the more common image formats you will see:
- Bitmap (.bmp) – this is an uncompressed image. The size of a bmp file is going to be very close to width * height * bits-per-pixel. So for something of web resolution, say 300×400, the bmp will be around 350K, while a jpeg of the same image might only be a tenth of that size.
- Portable Network Graphics (.png) – PNG is a relatively new format that is quite arguably the best thing since sliced bread. PNG images are lossless and support “alpha channel” transparency, which allows “translucent” or partially transparent sections of an image. This feature allows you to create images that fade to transparent instead of fading to white or fading to another particular color, so the same image can be used on any background. It is important to note that Internet Explorer prior to 7.0 had no support for alpha channel transparency, but as Microsoft tells us, that is becoming less of a concern. Only about 2.4% of the US and 11.4% of the world still uses IE6.
- Graphics Interchange Format (.gif) – GIF images were great in the 90s, but have largely fallen out of common use with their usefulness replaced by PNGs. GIF files are limited to 256 colors, which was fine in the 1990s when many/most users had monitors that could only display 256 colors, but it’s a different story today. Animated GIFs are the exception to this rule and they are still fairly common. For example, check out this site for some amazing animated GIF art.
- JPEG (.jpg) – JPEG is usually a lossy format (though there is a less commonly used lossless jpeg). For photographs, JPEG images are the most common format. An important setting to note that you most likely have in your image editing software is the JPEG compression quality. You can control just how lossy your photo will be, thus giving you a tradeoff between size and quality.
- Always create the image in the size that you want it to be displayed – do not allow the user’s browser to resize it. When you resize an image in HTML, you pointlessly stretch it and reduce its quality. If your image is a photo, this may not be particularly noticeable, but if it’s a screenshot or a logo, resizing it multiple times can drastically reduce the quality. You should always resize the image yourself to the size that it will be displayed on the website. If possible, this should be done from the original or a vector copy of your logo, as applicable. Some content management systems, for example, WordPress, have the ability intrinsically to resize images and will automatically generate thumbnail versions of images you upload.
Want to know more about graphics manipulation? Visit us at our web design home.
image credit: Billy Alexander