Speed Up Your Site: Image Formats

By Daniel Scocco

On the first part of this series we discussed how to optimize images in order to reduce their size and consequent load time (click here to read). Apart from optimizing the images it is also important to choose the right format. You should use the GIF, PNG and JPEG formats based on the type of the image and on size constraints of your website. Below you will some guidelines for each format:

JPEG: Stands for Joint Photographic Experts Group. This format was created for photographs and fine art-work. You should use JPEG images whenever you are displaying a photo or a true-color image. Notice that if you are using compression to reduce the file size you should use a 50% compression rate for optimal results.

GIF: Stands for Graphics Interchange Format. The GIF format is connected with the history of the Internet, mainly because of its small size. JPEG images support millions of colors while GIF ones will integrate a maximum of 256 colors. You should use this format for flat-color images like logos, buttons or text images. GIF is also the format of choice for animated images.

PNG: Stands for Portable Network Graphics. The PNG format was created specifically for the Internet, with the objective of replacing GIF images. The main advantage of PNG images over GIF ones is that they support 24-bit colors and alpha transparency. That said not all the browsers recognize some of its features. You should use the PNG format for simple images that require more than 256 colors.

Speed Up Your Site Series:

  1. Optimize Images
  2. Image Formats
  3. Optimze Your CSS
  4. Use a Slash on Your Links
  5. Use the Height and Width Tags
  6. Reduce the HTTP Requests



Share

24 Responses to “Speed Up Your Site: Image Formats”

  • Ajay

    Actually you should state that PNG is the preferred format over GIF. It offers better compression than GIF. JPEG images are best for photos because there is a lot of color then the JPEG algorithm works best.

    When you have lesser number of colors you choose a PNG format, the reason is because each color information and the specific pixel is stored in the file.

  • Daniel

    Ajay, I agree that PNG is preferred over GIF for simple images like logos or buttons that have complex or many colors. If you are working with a flat-color image that uses less than 256 colors, however, I think that the GIF compression will offer a better quality-size relationship.

  • Chris

    Thats was interesting, and very useful, thanks.

  • Bes Z

    Interesting comparison. 🙂 I have also noticed throughout the years that different software can produce different formats in lower sized image formats. So I think you have to try different things like IrfanView to see which program produces best quality and size for which formats.

    Also, this is a bit off-topic, but what is your and everyone’s view on the following link. It takes about Microsoft creating its own new image format:

    http://www.betanews.com/article/Microsoft_Unveils_JPEG_Alternative/1148594312

    Sorry for the long and external link.

  • Pallab

    irfan View is a good software for converting and compressing images.
    I use jpeg mostly. GIF for transparent images. And png when other two formats doesnt work (jpeg often messes it up if the image has lots of text in it).

  • Jeff

    Very insightful posts here, thank you so much for taking the time to put these together.

  • msedoh

    rihanna stop the music

  • kduvemfin

    Anyway, occasionallyleaning down into the sexy amanda bynes states with one had.

  • Bang Kritikus

    use png formation

  • Smackitta

    i see some spams in the comment !! 🙂 thank you for the tip, i will use the GIFs

Comments are closed.