icon sc-linkedin logo of codepen-icon logo of github-icon youtube play button

notes by Adam Sullovey

web & mobile application developer
practicing in Toronto, ON

Shrinking Images @ Toronto Web Performance Meetup

@HenriHelvetica from Forge Media + Design presented “The Biggest Loser: (Web) Images Edition”, thoughts and techniques for shrinking images. Here’s me notes!

  • Web archive says size of images downloaded is up to 1200kb per page. 57% increase this year. Graphs and trend tools available at http://httparchive.org/trends.php

  • Mobile devices aren’t helping themselves out – we consume more photos than ever before because we shoot more photos than ever before. Sites like Pinterest, tumblr and Instagram encourage us upload pictures without much thought to optimization. Do they do it for us?

  • Special images for Retina Displays and other high DPI screens are 2x to 3x the size, or 4x to 9x the amount of image data. Think of the data plans!

  • There are too many not-animated GIFs out there.

Image Formats to think about

  • Sprite sheets are helpful but sometimes difficult to make and maintain for large sites. Is it worth our time trying get automations for this work?
  • Discipline is a key part of all of this. Make yourself do the right thing and optimize images instead of tossing stuff online
  • Never use GIF when you can use PNG. PNG will almost always be smaller and faster to load

Web-p is Google’s image format

  • Lossy or lossless
  • Supports transparency, animation
  • Sometimes better compression than JPEG
  • Poor browser support
  • CPU intensive to encode and decode

SVG (scalable vector graphics) is a standardized format

Jpeg 2000 never caught on, probably due to patents

Tools

Photoshop’s ‘Save for Web’ tool has barely changed the way it compresses images over time. We have better tools now!

  • Jpegtran is a command line tool for tweaking JPEG files. Can be integrated into popular workflows with grunt-contrib-imagemin and gulp-image
  • Jpegoptim is another command line tool for optimizing JPEGs
  • Optipng is a command line tool for optimizing PNG files. Also included in grunt-contrib-imagemin and gulp-image
  • Pngout is another command line png optimizer. Jeff Atwood wrote about it. There’s a nifty Windows GUI for it called PNGGauntlet
  • Mozjpeg – Mozilla proves more file size can be squeezed out of JPEG. Cloudflare approves
  • ImageOptim – OS X GUI tool integrating some command line tools listed here and many others. Optimizes many images formats
  • Pngmini – OS X GUI tool that optimizes images (a bit lossy) to make them compress better with the usual PNG compression. Not really lossy compression, just a lossy optimization + regular compression
  • Afterwards, I found TinyPNG, a browser-based tool and Photoshop plugin which is similar

Want more content?

Remember FSTO Conf is coming up fast! Get your tickets for November 22 – 23, 2014.

Full Stack Toronto Nov 22-23, 2014

Check out this Meetup →

comments powered by Disqus