Code Internet Applications

07-10-2009

De browsers en de PNG

Het PNG formaat is ooit ontworpen om het antieke GIF formaat te vervangen. Het maakt namelijk gebruik van "lossless" compressie, wat betekend dat er geen beeld data verloren gaat. In vergelijking met GIF laat PNG laat ook transparantie toe, het Alpha kanaal wordt benut. Hiermee kunnen ook delen van het beeld kunnen procentueel doorzichtig gemaakt worden, dus geen gekartelde randjes meer. Het is een universeel formaat dat wordt ondersteund door het World Wide Web consortium en alle moderne browsers. Men zou dus kunnen denken dat iedere webbouwer PNG gebruikt in de bouw van moderne websites. Dit is niet het geval, er schuilen namelijk een aantal nadelen in het gebruik van de PNG. Met name het ingebouwde kleurenschema en de ondersteuning in Internet Explorer 6 laat te wensen over. 

Laten we met het kleurgebruik beginnen. PNG past zich aan de helderheid van verschillende platforms, deze gamma informatie wordt opgeslagen in de PNG. Terwijl dit zou moeten zorgen voor een nette weergave tussen platforms, gebeurd juist het tegenovergestelde in verschillende browsers. Sommige browser negeren de informatie of voegen zelf informatie toe waardoor er een kleurverschil optreedt. Lees meer over dit PNG Gamma Dilemma. Een oplossing die wij gebruiken is het weghalen van deze gamma informatie met Pngcrush, het is ietwat technisch, maar "it gets the job done". Gebruik de command line en voor deze code uit:

pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png 

En het kleurverschil verdwijnt als sneeuw voor de zon.

Zoals altijd moet Internet Explorer 6 (IE6) nog getempt worden. Deze browser, welke helaas nog meer dan genoeg gebruikt wordt, ondersteunt native geen transparantie in 32-bit PNG. Dit is een groot gemis, want vaak wil je juist PNG gebruiken voor deze eigenschap. Hiervoor heeft Microsoft een eigen filter in het leven geroepen, de AlphaImageLoader. Deze filter zorg ervoor dat transparantie werkt, maar niet zonder compromissen: links werken niet, CSS achtergronden kunnen niet herhalen of gepositioneerd worden en andere onverklaarbare render bugs. 

Vorige week zijn we, op zoek naar een oplossing voor onze talrijke AlphaImageLoader bugs, gestuit op een nieuwe vorm van de PNG transparantie fix. Deze fix heeft wonderbaarlijk niet de nadelen van de door Microsoft gemaakte oplossing (maakt wel gebruik van Microsofts VML implementatie) en doet het meteen, zonder vervelende witte flikkeringen in je scherm. Toepasselijk genoeg heet het artikel dan ook "Medicine for your IE6/PNG headache!"

Dit is voor ons het antwoord waar we naar zochten. Zolang IE6 ondersteuning wordt gevraagd kunnen we deze fix gebruiken om de problemen van de AlphaImageLoader te boven te komen. Verder adviseren wij altijd het gebruik van de oude en vertrouwde GIF (zolang er geen transparantie nodig is), deze zijn veelal kleiner en laden zonder de extra JavaScript laag in elke browser goed.

Geplaatst door Tim van den Bosch | Browsers, JavaScript | Reacties (1)

Reacties