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.

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