Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Boostez le chargement de vos images ! - BreizhCamp

Boostez le chargement de vos images ! - BreizhCamp

Talk présenté le 22 Mars 2019 au BreizhCamp.
Pour avoir les références/sources/exemples, ils sont en commentaire des slides disponible ici : https://docs.google.com/presentation/d/1eA0-LbzG-x8YUKdL_d6qRVgIUHQfvIIhpuSK8s0cg8Y/edit?usp=sharing

Jean-Michael

March 22, 2019
Tweet

More Decks by Jean-Michael

Other Decks in Programming

Transcript

  1. et créé par en 2010 à plus petit que JPEG

    ou PNG Permet : - la compression avec et sans perte de données (JPEG) - la transparence (PNG) - les animations (GIF)
  2. 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
  3. 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!"); });
  4. 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)); });
  5. <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">
  6. des utilisateurs Edge v16 Oct. 2017 FireFox v38 Mai 2015

    Chrome v38 Oct. 2014 Safari v9 Oct. 2015
  7. <img srcset="ghostbusters-small.jpg 480w, ghostbusters-large.jpg 1080w" sizes="(max-width: 320px) 100vw, 50vw" src="ghostbusters.jpg">

    <img src="ghostbusters.jpg"> Largeurs d’écran disponibles Si non supporté par le navigateur Largeur en “w” au lieu de px
  8. <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 <source>
  9. 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é
  10. .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); }
  11. “ En 2015, Facebook a migré à PJPEG pour son

    application iOS. Ils ont réduit les données utilisées de et affichent une image de ‘bonne’ qualité plus vite. https://code.fb.com/ios/faster-photos-in-facebook-for-ios/