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