Podcast: Play in new window | Download

Vimperator, Memes, and a great guide to image optimization.

News and Follow-Ups

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

Webapps

• 08:08 – Know Your Meme – Discover information about internet Memes.
• 11:03 – Readability Bookmarklet – Make those annoying sites easier to read.

Topics

• 15:41- Image Optimization
  • Tools
    • Imagemagick – http://www.imagemagick.org/
    • Pngcrush - http://pmt.sourceforge.net/pngcrush/
      • Discussed in Episode 15
    • Jpegtran
      • Discussed in Episode 15
    • Smush.it -http://smush.it
      • Discussed in Episode 10
    • Punypng - http://www.gracepointafterfive.com/punypng
    • RIOT (Radical Image Optimization Tool) – http://luci.criosweb.ro/riot/
  • 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