In addition to my last post about saving for web, I wanted to show how one photo (instead of a vector image) can look different when saved as the three different extensions – .png, .gif, and .jpg. I saved the below images in Photoshop using the option Save For Web under the File drop down menu (for thorough instructions, see part one).
^This is a GIF, but as you can see this format can’t handle gradients very well. This file size is 96 KB, which is in the middle of the other two examples. Although it’s not a super-large size, it will still take a second for your page to load, especially if you have a few of these.
^This is a JPG, which is generally the best format for images without text. The file size is 33 KB, which is the smallest of the three formats.
^This is a PNG, which is generally the cleanest reproduction of the photo, however it’s file size is a whopping 209 KB. If you had just a couple of these on your page, it would take a good 3 seconds to load (after 4 seconds you’re losing a huge percentage of viewers).
When it comes to photos, or other raster images (something with pixels), JPG is a great compromise for the file size. You lose hardly any information while staying below 50KB.
Thank you to Nicole Cawlfield for use of her photograph.
MABBR: Mid-American Bully Breed Rescue
Blue Gallery: to view Nicole’s online gallery
