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 Format
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
Formatting Photos for Your WebsiteThe 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 Format
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.