Superposer des images sur n'importe quel HTML / site Web pour une comparaison par pixel [Chrome]

PerfectPixel, une extension Chrome, permet aux développeurs et concepteurs Web de superposer facilement une image semi-transparente au-dessus d'un site Web HTML développé. En déplaçant l'image sur une page Web, les développeurs peuvent voir visuellement la différence dans les pixels. L'extension a également une option d'opacité, qui vous permet de visualiser à la fois la superposition et le code HTML développé. Lorsque vous déplacez l'image, les coordonnées sont automatiquement mises à jour dans la fenêtre contextuelle PerfectPixel, qui peut ensuite être copiée et utilisée par les développeurs Web.

Une fois que vous avez installé l'extension, cliquez sur le bouton dans la barre d'outils et une fenêtre contextuelle apparaîtra sur votre page Web. Cliquez sur Ajouter un nouveau calque et sélectionnez un fichier dans votre système local. Cette image sera instantanément ajoutée en tant que couche sur la page Web. Vous pouvez Afficher / masquer images et choisissez également différents. Déplacez l'image pour la tester dans différentes positions et les coordonnées seront automatiquement mises à jour dans la fenêtre contextuelle. Vous pouvez ajouter autant d'images que vous le souhaitez et en sélectionner certaines en cliquant dessus. Une fois l'image correctement positionnée, vous pouvez utiliser les coordonnées mises à jour pour positionner votre image via CSS. Le développeur a mentionné la prise en charge de plusieurs superpositions; cependant, nos tests n'ont pas permis d'ajouter plusieurs couches.

Le PerfectPixel Les options vous permet d'activer la Mode de compatibilité de stockage, qui est là pour résoudre les problèmes de compatibilité avec le téléchargement d'images. Une limitation de l'utilisation du mode de compatibilité, cependant, est que la taille du fichier est limitée à un maximum de 1,5 Mo. Vous pouvez également activer Mode débogage et Raccourcis clavier.

cependant, nos tests ont montré que même si vous pouvez ajouter plusieurs couches, vous ne pouvez afficher qu'une seule couche à la fois sur une page donnée. Il s'agit d'une limitation malheureuse et le développeur devrait envisager de la modifier afin que plusieurs couches puissent être visualisées à la fois. Le bouton "Verrouiller" enregistre la position d'un calque d'image que vous avez ajouté et même si vous quittez l'extension (cliquez sur son bouton à nouveau pour que le panneau disparaisse), il se souviendra de la position de ces images lors de la prochaine ouverture il.

L'extension PerfectPixel est un outil très pratique pour les développeurs et les concepteurs Web, et disponible sur le lien Chrome Web Store ci-dessous.

Installez PerfectPixel pour Google Chrome