Nov 17 2009

Episode 43: Optimize Those Images!

Play

3371324643_5ffe07a527_oVimperator, Memes, and a great guide to image optimization.

News and Follow-Ups

  • 00:35 – Vimperator – make Firefox act like VIM

Webapps

Topics

  • 15:41- Image Optimization
    • Tools
    • Correct
      • Pick the right format type: http://help.adobe.com/en_US/Fireworks/9.0/help.html?content=frw_optimize_export_oe_08.html
      • You can check the GIFs and see if they are using a palette size corresponding to the number of colors in the image. Using imagemagick it’s easy to check using
        identify -verbose image.gif
        When you see an image useing 4 colors and a 256 color “slots” in the palette, there is room for improvement.
      • Try converting gifs to PNGs.  Often times PNGs are smaller.
        • anything a GIF can do, a palette PNG (PNG8) can do too (except for animations).
        • convert image.gif image.png
        • pngcrush image.png -rem alla -reduce -brute result.png
      • Optimize your Jpegs
        • jpegtran -copy none -optimize -perfect src.jpg dest.jpg
    • CSS Sprites
      • Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
      • “Be mobile-friendly” and don’t leave big gaps between the images in a sprite. This doesn’t affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100×100 image is 10 thousand pixels, where 1000×1000 is 1 million pixels
      • Spriteme.org – Webapp to help you out with sprites
    • Don’ts
      • Don’t scale images with HTML
        • img width="100" height="100" src="mycat.jpg" alt="My Cat"
        • Don’t use gif/png for photographs
        • Don’t use Jpeg for images with limited colors