1
Object-fit & position
Détecte les changements dans la façon dont les images remplissent leurs conteneurs : cover, contain, fill et ajustements de position.
25 cas de test
Images & SVG
Les images et les graphiques vectoriels portent une part essentielle de l'identité visuelle d'un site : photos produit, illustrations, icônes, logos, schémas métier dans un dashboard. Une régression sur cette catégorie peut prendre la forme d'une icône cassée à la place d'une photo, d'une bannière étirée dont les visages sont déformés, d'un logo dont la couleur a changé après modification d'un filtre CSS, ou d'un SVG dont le chemin a été altéré lors d'une optimisation automatique de build. L'impact business est direct : un visiteur ne peut pas acheter un produit qu'il ne voit pas, un opérateur ne peut pas interpréter un graphique dont les proportions ont changé, et un site qui affiche des assets cassés perd immédiatement en crédibilité. Les causes typiques sont une réorganisation de l'arborescence des assets qui casse certains chemins, une règle max-width modifiée pour un cas particulier qui se propage à toutes les images, un changement de ratio de conteneur qui étire les visuels, ou un object-fit ajusté pour résoudre un cas isolé qui dégrade le cadrage ailleurs. Les filtres CSS appliqués globalement et les clip-path mal coordonnés ajoutent une couche de complexité difficile à anticiper. Delta-QA compare les captures d'écran complètes des pages contenant ces visuels et signale les zones dont le rendu a changé : icônes cassées, débordements, déformations, modifications de filtre, chemins SVG altérés. Le rapport visuel localise précisément chaque image touchée, ce qui évite à l'équipe QA de devoir parcourir manuellement chaque fiche produit, chaque page éditoriale et chaque composant pour vérifier que les assets se chargent et s'affichent correctement après chaque mise en production.
Ce que nous détectons
2
Filtres CSS
Surveille les filtres blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia et drop-shadow.
3
Modifications SVG
Capture les changements de chemins SVG, les modifications de couleur fill/stroke et les ajustements de viewBox.
4
Changements clip-path
Détecte les modifications de forme clip-path avec les fonctions circle(), ellipse(), polygon() et inset().
5
Images d'arrière-plan
Suit les changements de background-image, background-size, background-position et background-repeat.
Exemple interactif
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
Avant
Après
Scénarios concrets
🎯
L'image produit qui ne charge pas
Un développeur réorganise l'arborescence des assets et casse le chemin de certaines images produit. Le navigateur affiche une icône d'image cassée ou le texte alternatif en brut là où devrait se trouver la photo. Vos clients voient « photo-produit-123.jpg » au lieu du produit — personne n'achète ce qu'il ne peut pas voir. Le refactoring touchait la structure des fichiers, pas le code — personne n'a retesté visuellement les fiches produit. Delta-QA compare les captures d'écran et détecte immédiatement l'icône cassée à la place de la photo.
⚠️
L'image qui déborde
Un développeur modifie une règle max-width pour un cas particulier et, par effet de cascade, toutes les images du site perdent leur contrainte de taille. Une image de 2000px de large déborde de son conteneur, une barre de défilement horizontale apparaît — la mise en page est cassée, surtout sur mobile. Le développeur a testé son cas particulier, pas les 15 autres templates qui utilisaient cette même règle. Delta-QA compare les captures d'écran et met en évidence l'image qui déborde ainsi que la barre de défilement horizontale apparue.
💡
Le ratio d'aspect qui change
Un développeur modifie les dimensions du conteneur de la bannière d'accueil et le ratio de l'image passe de 16:9 à 4:3. L'image est étirée : les visages sont déformés, le logo est écrasé — vos visiteurs voient une image amateur là où il y avait une bannière soignée. C'est un changement de conteneur, pas d'image — le développeur n'a pas pensé à vérifier le rendu visuel. Delta-QA compare les captures d'écran et met en évidence la déformation — les proportions altérées ressortent clairement dans le diff.
Prêt à détecter chaque régression visuelle ?
Téléchargez Delta-QA et détectez les changements CSS dans vos pages web — sans code.