Image optim FTW

Jakob Anderson       @jakob_anderson


#webperf     #imageoptimization

Don't be this

Use Appropriate types

JPG - Photos




PNG - graphics, complex illustrations



SVG - vector, icons, simple shapes

Maximum size

  • Images should be saved at no larger dimensions than the largest size used on web page 


  • Mobile shouldn't be downloading desktop-size images


  • Use multiple sized images for mobile using media queries and background-images

Use "save for web"

  • JPEG: always use "progressive" mode


  • adjust "quality" bar down to just above artifact threshold at actual size (consult designer)

Check yo headers,
OR u turn into 


Set static public images with
far-future expire headers,
or browsers may cache
them poorly

To stay bad, 
I never set my
caching headers. 


Cache-Control:public, max-age=2914449
Expires:Wed, 15 Oct 2014 09:56:57 GMT

Optim further

Web services

  • Image Optim
  • SMUSHit
  • tinyPNG
  • SVG Optimiser (it's English)

Optim EVEN further

Build Scripts

  • Gulp scripts (gulp-imagemin)
  • Grunt scripts (grunt-contrib-imagemin)

Optim even more furtherest

Bake it into Frontier asset deploys

  • Optimize all images on deploy
  • Needs to keep quality visual close to original (can't be very lossy)
  • Needs "opt-out" for an individual file


  • WEBP is ~30% smaller for lossless (PNG) and lossy (JPG)



  • Currently only supported in Chrome, Opera, and Android browsers
  • Must use js like modernizr to detect support 
  • unless using "onerror hack"
<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">

Keep optim winning


Fight for the users




#webperf     #imageoptimization


Shredder img:
by "Mystic Forces"


Dogs and robot photos:

(c) Jakob Anderson


Bender illustration:
(c) Fox (from Futurama)


Image Optim FTW

By Jakob Anderson

Image Optim FTW

  • 1,039