Website Image Optimization
Repost from our FAQ page.
Q. What constitutes an optimized image and how can I do this?
A. When displaying images on a website you should always optimize them for their intended use. That usually means resizing the image (pixel dimensions), cropping the photo as desired and using a web-friendly and compressed image format (like jpg, gif and png).
Keep in mind that websites can rarely display images larger than the dimensions of the visitors typical monitor size. If you intend nothing more than to display images to add appeal to your content, then resizing is almost always necessary. Cameras today are capable of taking pictures of many megapixels in resolution, but your site should probably have no images larger than one (and even that is quite large on most displays). Calculate how the image should fit within the page you will display it, then crop and resize it to those dimensions before uploading.
The other important aspect is compression. By choosing the right image format and then compressing your images to reasonable amounts, you can reduce file size significantly (and site size correlates directly to page load speed…that still matters a lot). Typically, photos should be saved in the JPG (Joint Photographic Experts Group) or the newer PNG (Portable Network Graphics). JPG is generally better for photos due to it’s compression method. PNG is better for flatter color images that contain transparency. Finally GIF (Graphic Interchange Format) and PNG formats are well suited to flat color graphics like logos and charts. For instance, images that have only 16 visible colors is ideally suited to the GIF and PNG formats. Plus, both offer transparency capabilities, though PNG is far better at this. Some software allows you to see the effect of compression in realtime (Photoshop), other software requires you to try and test.
If you need software that allows you to optimize your photos, visit Pixlr.com and try their free online tools. Other good choices include PhotoShop (CS and Express), PaintShop Pro and GIMP (free and OpenSource).
