Formatting photos for your website can be a confusing task if you don’t understand the different file formats that can be used on websites. I think many people question why professional website cost so much when you can build your own for practically nothing. This article demonstrates just one very small (but important) bit of knowledge it takes to build a good website. There are about 1,000 more things to know, but i’ll save those for future articles.
Photos and graphics are an important part of any website. Understanding the various web compatible image types will make the job of determining what to use for a particular graphic. The original photos and graphics used on websites were Windows BMP (bitmap) format. These are no longer used because the files are very large and render too slow in a browser. There are better options for image format types to use. Keep in mind that when you place files on your website, you need to think about the trade off between quality and speed. Large file sizes (in bytes) will come up slow, but if you optimize the image too much, it won’t have good quality.
GIF is an acronym for Graphics Interchange Format. It was used on the web as an alternative to BMP files, but isn’t used much now because it has some limitations. Images stored in a GIF format can use only 256 colors, which makes graphics like photographs and anything with a gradient color look grainy. GIF’s were popular because it was the first image format to be used that created a small file (in KBs). GIF is also the only format that can be made into simple animations. Now that flash is not viewable on most iPads and iPhones, I have reverted back to using some animated GIF files as a good alternative.
JPEG (JPG) Format
The JPEG format was created by the Joint Photographic Experts Group, which is where the JPEG name came from. It was designed as a file format that could be used for storing high quality photos with small file sizes that work well on websites. JPEG files are viewable in all web browsers. The most important feature of JPEG is the ability to “optimize” it without losing visible quality. Most image editing software allow you to optimize your JPEG files, and will give you a preview so you will be able to a loss in quality if the file is over optimized. This assures you have the best quality photos at the smallest file size for your website.
PNG is an acronym for for Portable Network Graphics, and is the newest image format being used on websites. It was designed as a replacement for the outdated GIF format, allowing the use of millions of colors instead of the 256 colors allowed in the GIF format. PNG files have smaller file sizes than GIFs, but they also create larger files than JPEGs, since PNG compression doesn’t loses any of the image quality. PNG files should be used only for line art that doesn’t have a lot of shading or gradients or if you need a transparent background to place your graphic on top of a color or another image. PNG files should not be used for complex graphics or photos because it makes the file size way too large and will take the browser too long to render. A method for creating animated PNG files is currently in the works.
Here are a few examples of how different files and formats should and shouldn’t be used:
JPEG (.jpg) file with no optimization.
File size: 38,900 bytes
JPEG No Compression
File size: 36,300 bytes
JPEG No Optimization
Size: 60,219 bytes
JPEG file with 90% compression
File size: 9,404 bytes
Quality: Very Good
Optimized JPEG Format
Size: 11,046 bytes
Quality: Very Good
File size: 8,734 bytes
Size: 9,321 bytes
Size: 30,106 bytes
File size: 47,907 bytes
For a graphic like this, I would choose the optimized JPEG file to place on a website.
Size: 5,006 bytes
For this image, I Would go with the PNG format. It has the best possible quality. For a logo, a little bit larger file size is worth it.
For this file the obvious choice would be the optimized JPEG file. It has good quality and is the smallest file size.
It\’s important to consider what file type you want to use. JPEG is still the preferred method for photos and complicated graphics, but they need to be optimized. For clean artwork you may get by with a GIF, but if there is shading or gradients, PNG is probably a better choice. It all comes down to getting the best possible quality with the smallest file size.