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!

Trends

• 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!

Hey you jerks with gigantic images on your sites: I’ve used up my monthly data plan already, and my cycle’s not over for another two weeks.

— Dave Newton  (@newtron) October 8, 2014

• 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

• Good browser support
• Vector shapes look great on Retina Displays and high res screens

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?

• VelocityConf is a conference all about improving website performance. Go there, or watch recorded talks
• EdgeConf panel on images – Watch tense debate about image formats
• Marcos from Mozilla was sick and had to cancel his presentation. Hopefully he presents at another meetup!

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

Check out this Meetup →