Web Image Formats and Optimization

Summary of Web Image Types and Appropriate Uses:
(adapted in part from http://yuiblog.com/blog/2008/11/04/imageopt-2/)

  • JPG is the format for photos and full color images with lots of gradients. (JPG file sizes are smaller than PNG24)
  • GIF is the format for animations.
  • PNG8 is the format for everything else — icons, buttons, backgrounds, etc. (size usually smaller than GIF, supports alpha transparency, Fireworks can output variable transparency)
  • PNG24 is the format for full color images with transparency (largest file sizes, requires filter hack for IE6)

PNG8 = 256 indexed color PNGs. Newer versions of Photoshop (CS3) can output these using “Save for web”. Supports alpha transparency just like GIFs but generally results in smaller file sizes than GIFs. Fireworks can output PNG8 with variable transparency which degrades nicely to 100% transparency in IE6.

One slight problem with PNGs is they use gamma correction which can cause problems when colors in a PNG image need to match background colors (so colors will be slightly off in the PNG). This can be solved by using a program like pngcrush to strip the gamma chunk from the image (which reduces file size a bit more as well).

NOTE: When saving images from Photoshop always use “save for web”; results in greatly reduced file sizes than just saving normally.

EXTRA NOTE: Saving JPGs as “progressive” reduces file sizes further in 94% of cases for files over 10k (for under 10k baseline JPGs are generally smaller)

Advertisements
Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s