24Apr/083

Distractiv. Imagini PNG in IE.

O sa ziceti: "Da domnule, stim ca IE e praf.. habar nu are de transparenta in PNG.." si aveti dreptate insa exemplul de mai jos nu este legat de niveluri de alpha ci de niste amarate de culori. Mai precis browserul asta cu cea mai mare raspandire (inca), care in curand o sa ajunga la versiunea 8, pare un copil care inca nu stie sa faca inmultiri desi in clasa a 5-a toti ceilalti stiu de mult cum sa le faca. Exact asa se comporta Internet Explorer cu PNG, chiar daca nu e vorba de transparenta. Am urmatorul studiu de caz de mai jos:

Ipoteze: Avem o imagine cu un gradient (de la #FF9900 la #0099FF) pe care vrem sa o aplicam pe fundalul unei pagini web. Aceasta imagine este in format PNG (1.84 KB):

Gradient Fundal

Codul sursa al paginii este urmatorul:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>I heart IE</title>
</head>
<body style="background: #0099FF url(fundal.png) repeat-x;">
</body>
</html>

Problema: Chiar si in IE 7, la afisare, fundal.png sufera o mutatie iar culorile afisate nu sunt cele din gradientul original (devin de la #FF9000 la #0090FF), iar rezultatul este evident in pagina prin faptul ca fundalul nu se mai "pupa" cu gradientul, dupa cum se vede:

IE cu fundal PNG

Este inutil de spus ca in Firefox sau Opera culorile sunt cele originale, din fisierul PNG. Am putea sa folosim stiluri specifice pentru IE si alte browsere, dar de obicei caut sa evit astfel de solutii.

Solutia: Salvam fisierul fundal.png initial sub forma fundal.jpg (24.6 KB) si schimbam adresa din stil, iar rezultatul este cel asteptat:

IE cu fundal JPG

Sunt un fan al formatului PNG pentru ca-l consider un mostenitor de seama al formatului GIF pentru grafica web si mi se pare stupid ca sa nu fie recunoscut corect de aplicatii consacrate in ziua de azi. Daca m-as apuca impreuna cu cativa colegi sa realizam un browser si acesta n-ar reprezenta corect culorile din imagini ar fi de inteles..

Articole asemanatoare:

  • Nu exista articole asemanatoare.
Comentarii (3) Trackbacks (0)
  1. Nu stiu de ce iti mai pui problema sa mearga in lt IE6 :)

  2. Pai, la problema asta IE6 sau IE7 e acelasi lucru, iar pentru unele site-uri, procentul vizitatorilor care folosesc IE6 si IE7 este de peste 50%. Ce sa-i faci.. daca astia sunt cam cei mai multi? :)

  3. Din ce am citit/gasit pe net … o alta solutie implica (daca am inteles eu bine explicatia) renuntarea la Gamma correction din varianta 24-bit (care s-ar parea ca genereaza problema in IE in cazul gradientelor) si salvarea ca 8-bit PNG (eu am testat si e ok).


Lasa un comentariu

Nu exista trackbacks pana acum.

Switch to our mobile site