Images Web : redimensionnez et convertissez parfaitement (et automatiquement)

Presque tous les développeurs front-end savent que nous devons fournir aux utilisateurs les images les plus petites possibles sans affecter leur qualité. Nous savons tous comment y parvenir. Mais c’est une corvée que personne n’aime faire. D’un point de vue commercial également, cela prend du temps, et le temps, c’est de l’argent. Donc, « assez bien » est juste assez bien.

Permettez-moi de vous expliquer comment nous avons amélioré et automatisé la diffusion d'images parfaites sans créer davantage de travail pour les développeurs.

Comment cela se fait habituellement

Ce n'est peut-être pas vous, mais c'est le cas de plusieurs personnes, probablement de la plupart d'entre nous.

Vous exportez une image au format PNG à 2 × la taille prévue pour répondre aux écrans haute densité et l'utilisez dans unétiqueter. Si vous êtes prêt à consacrer 30 secondes supplémentaires (ou plus), vous faites mieux : vous le convertissez en WebP et placez les deux versions dans un fichier WebP.élément, permettant au navigateur de sélectionner le meilleur (enfin, pas le meilleur, juste le format le plus récent pris en charge et le favori du navigateur).

C’est le « assez bien », et c’est souvent le cas.

Mais ce n'est pas parfait. Les nouveaux iPad sont grands et peuvent utiliser des images 2,5 × ou même 3 ×. D'un autre côté, un Lenovo ThinkPad d'entreprise standard n'a pas besoin de ces détails supplémentaires, et une image 1× est parfaite.

Et honnêtement, tout cela convient parfaitement au travail manuel. Personne ne peut passer 15 minutes sur une seule photo.

Automatiser à la perfection

Pour mon cerveau perfectionniste, « assez bien » n’est pas ce que dit l’expression. De plus, certains de nos clients évoluent dans des domaines très compétitifs, nous avons donc commencé à rechercher des options. Cela n'a pas pris longtemps. Nous savions déjà que les navigateurs envoient des en-têtes HTTP indiquant les formats d'image qu'ils prennent en charge.

Ce dont nous avions besoin, c'était de découvrir queL'élément peut charger des images en fonction de la densité de pixels d'un écran donné. C'est quelque chose que vous pouvez diffici...
[Courte citation de 8% de l'article original]