A presentation at DevFest 2018 in in Melbourne VIC, Australia by Anton Ball
PICTURES ARE WORTH A THOUSAND WORDS …AND SOMETIMES 1,000MB. A CAUTIONARY TALE.
PICTURES ARE WORTH A THOUSAND WORDS …AND SOMETIMES 1,000MB. A CAUTIONARY TALE.
?
❤ 🍔 🍩
ANTON BALL @antonjb
We made a mistake…
😱
IMAGES 657 KB HTTP Archive EVERYTHING ELSE 1544.7 KB https://httparchive.org/reports/page-weight
&%' 7.6mb/s 11mb/s 6.5mb/s 62 sec 42 sec 72 sec ( 👓 Slow 3G 20 min
BBC has seen that they lose an additional 10% of users for every additional second it takes for their site to load Rebuilding Pinterest pages for performance resulted in a 40% decrease in wait time, a 15% increase in SEO traffic and a 15% increase in conversion rate to signup.
Format Resize Compression Automation
🖼 Our Process 🌏
DEVSIGN
Format
Exif PNM CD5 FITS SGI PLBM AMF PBM TIFF HDR BAT ECW PGF SID DWF FLIF BMP BAT DGN ILBM IMG XPS DWG VML BPG GIF SVG JPEG PNG WEBP HPGL ICO PGM XISF HSF PAM PCX HVIF QCC ODG PPM DEEP TGA JPEG XR Nrrd CGM DXF Xar
🖼 Can image be vector? NO Does it need transparency? YES YES SVG PNG Is the image complex? NO NO YES JPG
WEBP https://developers.google.com/speed/webp/
WEBP https://caniuse.com/#feat=webp
2.3MB GIF -85% 331KB MP4
Progress 😨
Size
510x368 5123x3697
SIPS sips -Z 510 *.jpg
SIPS sips -Z 510 *.jpg
📱 🔋
<Picture /> <picture> <source media="(min-width: 60em)" type="image/webp" srcset="donut-large.webp" #/> <source media="(min-width: 60em)" srcset="donut-large.jpg" #/> <img src="donut.jpg" #/> #</picture>
<Picture /> <picture> <source media="(min-width: 60em)" type="image/webp" srcset="donut-large.webp" #/> <source media="(min-width: 60em)" srcset="donut-large.jpg" #/> <img src="donut.jpg" #/> #</picture>
https://caniuse.com/#feat=picture
progress 😎
🖼 Can image be vector? NO Does it need transparency? YES YES SVG PNG Is the image complex? NO NO YES JPG RESIZE
Compression
PNGQuant OptiPNG TinyPNG ImageMagick MOZJPEG Guetzli SVGO PNG Compressor JPEGMini PNGOut PNGOptimizer ImageOptim PNGCrush PunyPNG Photoshop
Start with 100% quality
416KB original -42% 239KB optimised
Compressed Original
Not all images are equal
SVGOMG 916B original -83% 148B optimised https://jakearchibald.github.io/svgomg/
Guetzli guetzli #--quality 85 source/donut.jpg build/images/donut.jpg
Guetzli 416KB original -54% 191KB optimised
🤩
🖼 Can image be vector? NO Does it need transparency? YES YES SVG PNG COMPRESS Is the image complex? NO NO YES JPG RESIZE
😱 59MB original 🤩 -99% 427KB optimised
Automation
Automating Format
Automating Size
https://29a.ch/sandbox/2014/smartcrop/examples/testbed.html
Automating Compression
const imagemin = require("imagemin"); const imageminMozjpeg = require("imagemin-mozjpeg"); const imageminPngquant = require("imagemin-pngquant"); (async () #=> { const files = await imagemin(["images#/*.{jpg,png}"], "build/images", { plugins: [ imageminMozjpeg({ quality: 85 }), imageminPngquant({ quality: “75-85" }) ] }); console.log("Image buffer - save or process"); })();
const imagemin = require("imagemin"); const imageminWebp = require("imagemin-webp"); (async () #=> { const files = await imagemin(["images#/*.{jpg,png}"], "build/images", { plugins: [imageminWebp({ quality: 85 })] }); console.log("Image buffer - save or process"); })();
🖼 Can image be vector? NO Does it need transparency? YES YES SVG PNG NO NO YES JPG COMPRESS RESIZE WEBP Is the image complex?
☁ ☁ 🖼
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8
http://io.fastlydemo.net/io
<picture> <source media="(min-width: 60em)" srcset="#//fastly-io/img-1.io.jpg?auto=webp&crop=16:9&width=598&quality=75" #/> <source media="(min-width: 40em)" srcset="#//fastly-io/img-1.io.jpg?auto=webp&crop=16:9&width=402&quality=75" #/> <img src=“#//fastly-io/img-1.io.jpg?auto=webp&crop=16:9&width=241&quality=60" #/> #</picture>
https://cloudinary.com/documentation/image_transformations#face_detection_based_cropping
https://cloudinary.com/documentation/image_transformations
https://cloudinary.com/documentation/image_transformations#effects_with_face_detection
🖼 ☁ THE CLOUD 🌏
🖼 ⛈ THE CLOUD 🌏
BONUS TIPS
197KB original -62% 73KB indexed https://medium.com/@duhroach/reducing-png-file-size-8473480d0476
Perceived speed
1:1 16:9 https://daverupert.com/2015/12/intrinsic-placeholders-with-picture/ 4:3
.intrinsic { display: block; position: relative; height: 0; width: 100%; padding-top: 100%; background-color: #aabdcd; } .intrinsic-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .intrinsic.intrinsic#--4x3 { padding-top: 75%; } 4:3
actual size
Primitive SQIP
Lazy Loading
Lazy Loading <img data-src="donut.jpg" alt="jam doughnut" class="lazyload" #/> https://github.com/aFarkas/lazysizes
Lazy Loading <img src="donut.jpg" alt="jam doughnut" lazyload="on" #/> https://calibreapp.com/blog/2018-08-16-native-lazy-load/
Lazy Loading chrome://flags/#enable-lazy-image-loading
This adds resources
Don’t use images
Pure CSS Francine https://github.com/cyanharlow/purecss-francine
https://codepen.io/mandymichael/pen/BWyYYP
TO RECAP 1. Select best format 2. Use right size 3. Compress 4. Automate 5. Perceived performance 6. Don’t use images (if you don’t have to)
https://images.guide/ Addy Osmani
THANK YOU @antonjb
You spent hours shaking all the trees, shaving 20kb off JS bundles, ensuring gzip is enabled, all code is minified. How would you feel if one image undid all your work, 10x over? Images are the real cause for concern when talking optimisation. I’ll run through choosing the best type of image, ensuring it’s the correct size and compression. Enhance your optimisation efforts, by including these image techniques.
The following resources were mentioned during the presentation or are useful additional information.
An eBook by Addy Osmani
SVGOMG is SVGO's Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.
HTML/CSS drawing in the style of an 18th-century oil painting. Hand-coded entirely in HTML & CSS.
Here’s what was said about this presentation on social media.
for free. You
can too.