HOWTO: alfa-PNG's voor meerdere browsers - 💡 Fix My Ideas

HOWTO: alfa-PNG's voor meerdere browsers

HOWTO: alfa-PNG's voor meerdere browsers


Auteur: Ethan Holmes, 2019

Als u een webontwerper bent, is dit een hulpprogramma dat uw leven een stuk beter zal maken. Serieus, je zult in no-time schaduwen laten vallen zoals Galileo de sinaasappel laat vallen.

Transparante GIF's hebben slechts één bit transparantie - een pixel is volledig transparant of volledig ondoorzichtig. 24-bits PNG-afbeeldingen hebben daarentegen een bonafide alfakanaal, waardoor uw afbeeldingen een volledig transparantiegebied hebben. Het probleem is, ze hebben slechte browser-ondersteuning in IE.

Het geïndexeerde PNG 8-formaat is vergelijkbaar met het GIF-formaat en ik had altijd gedacht dat dit alleen Booleaanse transparantie toestond. Het blijkt dat het PNG 8-formaat een beetje slimmer is. Je hebt nog steeds een 256 kleurenindexpalet zoals het GIF-formaat, maar het formaat laat toe dat elke index zijn eigen transparantieniveau heeft, en dat niveau kan worden ingesteld op elke hoeveelheid transparantie!

Hier is de echte kicker. Zelfs oude versies van IE ondersteunen het PNG 8-formaat tot op zekere hoogte. Dus met Firefox, Safari en IE 7 kunt u volledige alfa-ondersteuning krijgen zonder gebruik te maken van de eigenzinnige IE-specifieke PNG-hacks. Oudere versies van IE geven nog steeds uw alfa-PNG's weer, maar ze keren terug naar een GIF-achtige transparantie, alles of niets.Elk gedeelte van de afbeelding dat halftransparant is, wordt gedwongen volledig transparant te worden.

Kortom, het PNG8-alfa-formaat geeft u volledige cross-browser alpha-transparantie voor alle moderne browsers, en het verslechtert sierlijk voor oudere versies van IE die sommige mensen mogelijk nog steeds gebruiken. De afbeelding hierboven is bijvoorbeeld een semi-transparante PNG8. De meesten van jullie zullen de blauwe gradiënt zien vervagen rond de rand van de gloeilamp. Degenen van jullie met oudere versies van IE zullen een harde rand rond de lamp zien, vergelijkbaar met wat je zou krijgen met een GIF.

Correctie: mijn voorbeeld is een beetje misleidend, omdat het blauw in het beeld tijdens het kwantisatieproces een gedeeltelijke transparantie kreeg. IE-gebruikers zien slechts een deel van het onderste gedeelte van de lamp, met name kleuren die niet overeenkomen met het transparante gedeelte in de RGB-ruimte. Voor normale slagschaduw overlays vormt dit meestal geen probleem. Houd er echter rekening mee dat het converteren naar PNG8 betekent duizenden kleuren en alpha-waarden terugbrengen tot 256. Als uw effen kleuren worden toegewezen aan een gedeeltelijk transparante index, verdwijnen deze in oudere versies van IE.

Een collega heeft me vandaag geïntroduceerd en liet me zien hoe Fireworks een exportoptie voor PNG 8 heeft waarmee deze volledig alfa-modus kan worden gebruikt. Ik was er niet van op de hoogte, omdat Photoshop niet zo'n functie heeft, maar alleen GIF-achtige transparantie toestaat voor 8-bits PNG's. Helaas, ik echt haat haat het moeilijk hebben met Fireworks en ik wil het niet kopen.

Maar een beetje zoeken en ik vond pngnq, een opdrachtregelprogramma dat een PNG24-afbeelding kwantiseert in een 256-kleuren PNG8-afbeelding met alpha-transparantie. Hier is hoe je het gebruikt:

  1. Exporteer ("opslaan voor web" in Photoshop) uw afbeelding in de indeling RGBA PNG-24
  2. Op de opdrachtregel uitvoeren "pngnq bestandsnaam.png
  3. De afbeelding wordt geconverteerd en de uitvoer met de naam bestandsnaam-nq8.png

Om pngnq te installeren, pakt u het binaire bestand van de onderstaande koppeling en kopieert u het uitvoerbare pngnq naar een plaats op uw pad. In OS X kun je het in / usr / local / bin plaatsen en dat toevoegen aan je PATH-variabele (of gooi het gewoon weg / usr / bin). Het programma vereist de libpng-bibliotheek om te kunnen worden uitgevoerd. Dit is om een ​​of andere reden niet vooraf geïnstalleerd op een Mac, dus je zult het moeten bouwen vanaf de bron, Fink gebruiken, of het installatieprogramma gebruiken op de hieronder vermelde handige plaats.

pngnq - Link libpng installer voor OS X - Link



U Bent Wellicht Geïnteresseerd Zijn

Dus je wilt een makerspace maken?

Dus je wilt een makerspace maken?


My First Epic Failure was bij Maker Faire New York

My First Epic Failure was bij Maker Faire New York


Twas the Night Before World Maker Faire ...

Twas the Night Before World Maker Faire ...


In de winkel met meesterbouwer Jimmy DiResta

In de winkel met meesterbouwer Jimmy DiResta






Recente Berichten