Eric Portis me rejoint pour plonger dans le monde des images responsives.
Nous commençons par les bases. Les images responsives sont spécifiquement des images en HTML et existent en raison d'un désir de meilleures performances. Les images sont probablement le principal responsable du poids global des sites Web. Si nous pouvons éviter d'envoyer trop de pixels sur le réseau, nous devrions le faire. Après tout, un écran de seulement 720 pixels de large n'a pas besoin d'une image de 2000 pixels de large, même s'il s'agit d'un écran 2x.
Le problème est que les navigateurs sont très agressifs pour télécharger des actifs tels que des images. C'est bien, car c'est pourquoi le Web (peut être) aussi rapide qu'il l'est. Mais cela signifie également que nous devons fournir un tas d'informations sur nos images directement dans le HTML. Un navigateur ne peut-il pas savoir quelle est la taille d'une image? Bien sûr, il peut, après l'avoir téléchargé. Un navigateur ne peut-il pas savoir à quel point une image sera affichée sur la page? Bien sûr, il peut, après avoir téléchargé tout le CSS et effectué la mise en page. La syntaxe des images réactives essaie de devancer tout cela en fournissant ces informations directement dans la syntaxe. Comprendre cette syntaxe est délicat! Il y a srcset, sizeset l' élément, et il y a une tonne pour envelopper votre esprit ici.
Cela se complique encore.
La syntaxe que vous devez créer est basée sur le fait d'avoir plusieurs copies de cette image dans lesquelles construire la syntaxe. Comment les fabriquez-vous? Combien devriez-vous en faire? Quelle taille devraient-ils avoir?
Heureusement, il existe des outils automatisés autour d'images réactives. WordPress a été l'un des premiers joueurs. Prêt à l'emploi, WordPress créera plusieurs versions des images que vous téléchargez et produira des srcsetsyntaxe utile . Mais vous pouvez faire beaucoup mieux. Vous pouvez fournir un sizesattribut qui correspond réellement à ce que fait votre thème et à la façon dont il redimensionne ces images.
De plus, WordPress n'utilise aucune intelligence spéciale pour créer plusieurs copies des images que vous téléchargez. Mais c'est possible. Un outil comme le générateur de points d'arrêt d'image réactif utilise une certaine intelligence pour déterminer le nombre d'images différentes que vous pouvez créer, afin que vous puissiez trouver un équilibre entre avoir près de l'image parfaite pour le travail et ne pas avoir besoin de faire des centaines ou des milliers de copies de il. Cet outil a une API!
Cela se complique encore.
Différents navigateurs prennent en charge différents formats d'image. Par exemple, WebP. Il y a des économies de performances à réaliser en fournissant le bon format d'image au bon navigateur. La syntaxe des images responsives peut vous aider, mais elle complique la syntaxe. De nombreux formats d'image ont également une notion de qualité. Dans quelle qualité enregistrez-vous ces copies multiples?
À ce stade, c'est le bon moment pour mentionner Cloudinary. Je l'ai intégré en ce moment sur CSS-Tricks, et cela aide beaucoup de choses. Je dois mentionner que je suis un client Cloudinary payant et que ce screencast n'a pas été sponsorisé, mais Cloudinary a sponsorisé CSS-Tricks sous la forme de deux articles sponsorisés très liés:
- Images responsives dans WordPress avec Cloudinary, partie 1
- Images responsives dans WordPress avec Cloudinary, partie 2
En un mot, voici comment tout cela fonctionne sur CSS-Tricks maintenant:
- Je télécharge des images comme je le ferais toujours avec WordPress.
- Plutôt que les
srcsetinformations générées avec WordPress, elles sont générées par cette API plus intelligente. - L'image est également téléchargée sur Cloudinary.
- Lorsque WordPress filtre et génère le HTML pour les images, toutes ces bonnes données
srcset(et personnaliséessizes) sont appliquées. L'URL pointe vers les URL Cloudinary. - Les URL Cloudinary utilisent la capacité de Cloudinary à ajuster automatiquement le format et la qualité automatiquement (en utilisant leur technologie sophistiquée) pour s'assurer que les choses sont les meilleures possibles pour le navigateur particulier qui demande l'image.
- Les anciennes images qui n'ont pas été téléchargées sur Cloudinary à l'origine bénéficient toujours de toute la bonté Cloudinary. Ils n'ont pas des
srcsetdonnées aussi intelligentes , mais ils utilisent toujours l'URL «extraire», ce qui signifie qu'ils peuvent bénéficier du formatage automatique et de la qualité automatique (ce qui est probablement une bonne partie de l'amélioration des performances, de toute façon).
En bref, non seulement j'utilise des images responsives ici sur CSS-Tricks pour améliorer les performances, mais l'intégration Cloudinary améliore sérieusement ce jeu.
Je suis également heureux que ce ne soit pas une dépendance difficile. Si le plugin Cloudinary est déjà désactivé, tout revient aux images réactives WordPress normales.