Optimiser la performance par un choix optimal des dimensions des images responsives

A presentation at We Love Speed in in Bordeaux, France by Nicolas Hoizey

Étape 1 : statistiques des visiteurs

Étape 1 : statistiques des visiteurs

Étape 1 : statistiques des visiteurs

Étape 1 : statistiques des visiteurs

Étape 2 : largeur d’image selon viewports

Étape 2 : largeur d’image selon viewports

Étape 3 : consolider les données

Étape 3 : consolider les données

Étape 4 : identifier les valeurs cibles

Étape 4 : identifier les valeurs cibles

Étape 5 : finaliser le choix

Étape 5 : finaliser le choix

Étape 5 : finaliser le choix

Étape 5 : finaliser le choix

Les requêtes les plus fréquentes

Les requêtes les plus fréquentes

Les requêtes les plus fréquentes

Les requêtes les plus fréquentes

Automatiser

Automatiser

responsive-images-widths

responsive-images-widths

responsive-images-widths

responsive-images-widths

responsive-images-widths

responsive-images-widths

Automatiser

Automatiser

Automatiser

Automatiser

Were we're going, we need perf

Were we're going, we need perf

L’usage des standards pour les images responsives (srcset-w principalement) est devenu incontournable, mais n’est pas toujours accompagné d’une réflexion de fond sur leur bonne utilisation.

Plus particulièrement, trop de sites utilisent des tailles d’images arbitraires dans leurs srcset-w, négligeant une piste d’optimisation de performance conséquente.

Il sera donc question de différentes méthodes permettant de définir les meilleures dimensions possibles pour ces images, permettant d’une part d’optimiser la performance pour les visiteurs, mais aussi d’autre part d’optimiser les ressources de génération, stockage et bande passante nécessaires côté site.

Il ne sera par contre pas question dans cette conférence de taux de compression optimal, de format d’encodage des images ou de solution automatisant la gestion de toutes ces optimisations.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

  • responsive-image-widths

    An open source command-line tool helping the choice of optimal responsive image widths to put in your srcset attribute(s)

Buzz and feedback

Here’s what was said about this presentation on social media.