Överlägg bilder på alla HTML / webbplatser för jämförelse per pixel [Chrome]

click fraud protection

PerfectPixel, ett Chrome-tillägg, gör det möjligt för webbutvecklare och designers att enkelt lägga över en halvtransparent bild ovanpå en utvecklad HTML-webbplats. Genom att flytta bilden på en webbsida kan utvecklare visuellt se skillnaden i pixlarna. Tillägget har också ett opacitetsalternativ, som gör att du kan se både överlägget och den utvecklade HTML. När du flyttar bilden uppdateras koordinaterna automatiskt i popup-fönstret PerfectPixel, som sedan kan kopieras och användas av webbutvecklare.

När du har installerat tillägget klickar du på knappen i verktygsfältet så visas ett popup-fönster på din webbplats. Klick Lägg till ett nytt lager och välj en fil från ditt lokala system. Den här bilden läggs omedelbart till som ett lager på webbsidan. Du kan Visa gömma bilder och även välja olika. Flytta bilden runt för att testa den i olika positioner, och koordinaterna kommer automatiskt att uppdateras i popup-fönstret. Du kan lägga till så många bilder du vill och välja vissa bilder genom att klicka på dem. När bilden är korrekt placerad kan du använda de uppdaterade koordinaterna för att placera din bild genom CSS. Utvecklaren har nämnt flera överlagringsstöd; Men vår testning gav oförmåga att lägga till flera lager.

instagram viewer

PerfectPixel (2)

PerfectPixel alternativ låter dig aktivera Lagringskompatibilitetsläge, som finns där för att åtgärda kompatibilitetsproblem med att ladda upp bilder. En begränsning för att använda kompatibilitetsläge är dock att filstorleken är begränsad till högst 1,5 MB. Du kan också aktivera Felsökningsläge och Snabbtangenter.

alternativ

Men vår testning visade att medan du kan lägga till flera lager kan du bara visa ett lager åt gången på en given sida. Detta är en olycklig begränsning och utvecklaren bör överväga att ändra den så att flera lager kan ses på en gång. Knappen 'Lås' sparar positionen för ett bildlager som du har lagt till och även om du lämnar tillägget (klicka på knappen igen så att panelen försvinner) kommer den att komma ihåg positionen för dessa bilder när du nästa öppnar den.

PerfectPixel-förlängningen är ett ganska praktiskt verktyg för webbutvecklare och designers, och finns på Chrome Web Store-länken nedan.

Installera PerfectPixel för Google Chrome

watch instagram story