Boostez le chargement de vos images ! - JSSophia

BOOSTEZ LE CHARGEMENT DE VOS IMAGES ! JSSophia 2019 Jean-Michael
Legait

Jean-Michael Legait @jmlegait

Desktop Mobile POIDS D’UNE PAGE WEB

“ On vous demande d’intégrer une image de 3Mo sur
un site

LE FORMAT

LES FORMATS LES PLUS CONNUS

ASTUCE #1 WEBP

: Web Picture Open source et créé par Google en
2010 25% à 35% plus petit que JPEG ou PNG Permet : - la compression avec et sans perte de données (JPEG) - la transparence (PNG) - les animations (GIF)

WEBP EN PRODUCTION ?

SUPPORT NAVIGATEURS 72% des utilisateurs Edge v18 Nov. 2018 FireFox
v65 Jan. 2019 Chrome v32 Jan. 2014

CONVERTIR UNE IMAGE EN WEBP Option 1 : En ligne
de commande avec l’outil officiel de Google : cwebp cwebp -q 75 source.jpg -o output.webp cwebp -lossless source.jpg -o output.webp q = Facteur de compression

CONVERTIR UNE IMAGE EN WEBP Option 2 : Script Node.js
const imagemin = require("imagemin"); const webp = require("imagemin-webp"); imagemin(["sources/*.jpeg"], "webp_images", { use: [ webp({ quality: 75 }) ] }).then(function() { console.log("Images converted!"); });

CONVERTIR UNE IMAGE EN WEBP Option 3 : Build process
(Ex: Gulp) const gulp = require("gulp"); const imagemin = require("gulp-imagemin"); const webp = require("imagemin-webp"); const extReplace = require("gulp-ext-replace"); gulp.task("exportWebP", function() { let src = "src/images/**/*.png"; let dest = "dist/images"; return gulp.src(src) .pipe(imagemin([ webp({ quality: 75 }) ])) .pipe(extReplace(".webp")) .pipe(gulp.dest(dest)); });

LIGHTHOUSE DE CHROME DEVTOOLS

COMMENT L’UTILISER

ASTUCE #2 LE TAG <source>

“ L'élément HTML <source> définit différentes ressources média pour un
élément <picture>, <audio> ou <video>

<picture> <source type="image/webp" srcset="ghostbusters.webp"> <img src="ghostbusters.jpg"> </picture> Seul le premier
format supporté sera chargé ! Si non supporté par le navigateur <img src="ghostbusters.jpg"> Avant : Après :

SUPPORT NAVIGATEURS 88% des utilisateurs Edge v16 Oct. 2017 FireFox
v38 Mai 2015 Chrome v38 Oct. 2014 Safari v9 Oct. 2015

LA COMPRESSION

Les algorithmes de compression sont spécifiques à chaque format d’image.
2 catégories : AVEC OU SANS PERTE DE DONNÉES Sans (Lossless) Avec (Lossy)

“ Une qualité de 80-85 permet de réduire de 30-40%
la taille de l’image avec un effet minimal sur le rendu. https://images.guide/#what-is-mozjpeg

ASTUCE #3 Imagemin

IMAGEMIN

IMAGEMIN PLUGINS JPEG PNG GIF SVG WebP Sans perte imagemin-
jpegtran imagemin- optipng imagemin- gifsicle imagemin- svgo imagemin- webp Avec perte imageminmozjpeg imagemin- pngquant imagemin- giflossy imagemin(["sources/*.jpeg"], "dest_images", { plugins: [ imageminMozjpeg({ quality: 80 }) ] });

DIMENSIONS DE L’IMAGE

ASTUCE #4 AFFICHER L’IMAGE EN FONCTION DU DEVICE

<img srcset="ghostbusters-small.jpg 480w, ghostbusters-large.jpg 1080w" sizes="(max-width: 320px) 100vw, 50vw" src="ghostbusters.jpg">
Largeur en “w” au lieu de px <img src="ghostbusters.jpg"> Avant : Après : Largeurs d’écran disponibles Si non supporté par le navigateur

<picture> <source type="image/webp" srcset="ghostbusters-small.webp 480w, ghostbusters-large.webp 1080w" sizes="(max-width: 320px) 100vw,
50vw"> <img src="ghostbusters.jpg"> </picture> Si non supporté par le navigateur Avec le tag <source>

ASTUCE #5 LAZY LOADING

LAZY LOADING PRINCIPE LOAD FOR INITIAL VIEW LOAD WHEN VISIBLE

<head> <script src="lazysizes.min.js" async></script> </head> <body> <img data-src="ghostbusters.jpg" class="lazyload"> </body>
Importer la lib Modifier le tag img LAZY LOADING NPM PACKAGES : Lazysizes & Lozad

FONCTIONNALITÉS EXPÉRIMENTALES DANS CHROME

BONUS PROGRESSIVE LOADING

‘BLUR UP’ ou PROGRESSIVE LOADING Exemple sur Medium

‘BLUR UP’ ou PROGRESSIVE LOADING Technique de Facebook 70Ko 200
octets Preview Photo Blur & Scale Resize

EXEMPLE : HTML <div class="placeholder" data-large="image-large.jpg"> <img src="image-preview.jpg" class="img-small"> <div
style="padding-bottom: 66.6%"> </div> </div> Code PEN : https://codepen.io/jmperez/pen/yYjPER

EXEMPLE : JAVASCRIPT window.onload = function() { let placeholder =
document.querySelector('.placeholder'), small = placeholder.querySelector('.img-small'); let img = new Image(); img.src = small.src; img.onload = () => { small.classList.add('loaded'); }; let imgLarge = new Image(); imgLarge.src = placeholder.dataset.large; imgLarge.onload = () => { imgLarge.classList.add('loaded'); }; placeholder.appendChild(imgLarge); } Charge la preview et l’affiche Charge l’image de bonne qualité

EXEMPLE : CSS .placeholder { position: relative; overflow: hidden; }
.placeholder img { position: absolute; opacity: 0; top: 0; left: 0; width: 100%; transition: opacity 1s linear; } .placeholder img.loaded { opacity: 1; } .img-small { filter: blur(50px); }

“ En 2015, Facebook a migré à PJPEG pour son
application iOS. Ils ont réduit les données utilisées de 10% et affichent une image de ‘bonne’ qualité 15% plus vite. https://code.fb.com/ios/faster-photos-in-facebook-for-ios/

CHARGEMENT D’UNE IMAGE ‘Blur Up’ avec JPEG : PJPEG :

POUR CONCLURE

Le format WebP Progressive loading Comment l’utiliser Multi-devices Lazy loading
Compression

MERCI ! DES QUESTIONS ? @jmlegait [email protected]

Boostez le chargement de vos images ! - JSSophia

Boostez le chargement de vos images ! - JSSophia

More Decks by Jean-Michael

Other Decks in Programming

Featured

Transcript