Performance on Web2Generators

Des images adaptatives qui économisent vraiment la bande passante : srcset, sizes, picture et tests

Tue, 20 Oct 2026 09:00:00 +0100

Une photo nette sur un ordinateur portable peut gaspiller de la bande passante sur un petit téléphone. Une miniature qui se charge vite sur mobile peut devenir floue dans une grande carte sur ordinateur. Les images adaptatives répondent à ces deux problèmes : elles proposent au navigateur plusieurs versions utiles du même visuel et les informations nécessaires pour choisir.

Le balisage devient simple lorsque l’on distingue trois rôles : srcset énumère les fichiers candidats, sizes décrit leur largeur d’affichage prévue et <picture> propose d’autres formats ou compositions. La difficulté consiste surtout à vérifier ce que le navigateur télécharge réellement.

Pourquoi votre site affiche d'anciens fichiers : diagnostiquer Cache-Control et les ETags avec cURL

Sat, 17 Oct 2026 00:00:00 +0000

Vous déployez une nouvelle feuille de style, actualisez votre site et voyez toujours l’ancien design. Un collègue obtient immédiatement la nouvelle version. Un client en voit encore une autre. Le navigateur conserve-t-il un fichier en cache ? Un CDN renvoie-t-il une ancienne réponse ? Ou le serveur fournit-il un contenu différent de celui attendu ?

Les problèmes de cache deviennent plus faciles à comprendre lorsque vous examinez la réponse HTTP au lieu d’actualiser la page sans arrêt. Deux en-têtes, Cache-Control et ETag, expliquent une grande partie du mécanisme. cURL permet de les examiner sans les comportements supplémentaires d’une page dans le navigateur.

Les sprites CSS sur le Web moderne : quand les utiliser et comment les tester

Thu, 15 Oct 2026 00:00:00 +0000

Les sprites CSS étaient autrefois une solution courante pour les pages qui chargeaient des dizaines de petites images. Au lieu de demander chaque icône séparément, un site pouvait charger une seule image regroupant plusieurs icônes et en afficher de petites zones avec CSS. La technique fonctionne toujours, mais les navigateurs modernes, la mise en cache, le SVG et les mises en page adaptatives changent les compromis.

La question utile est de savoir si un ensemble d’images gagne à être regroupé dans une seule ressource. Réduire le nombre de requêtes d’images ne suffit pas à prouver qu’une page se charge plus vite.