PNG: Compatibilità e Hack!

[99caos]

Mi sto interessando molto a questo formato.
Estremamente performante.

Mi chiedevo (non sono riuscito a rispondermi da solo con le ricerche):

Quanto è incompatibile?

Ciò che ho letto riguarda la trasparenza.
Ma è solo questa?

Il mio problema :

Ho un'immagine di header da dividere in tre parti da dare in pasto al CSS: left, right e center.

Per chi non conoscesse questa tecnica la ricordo velocemente:

xHTML:

            <div id="headerC">
                <div id="headerL">
                    <div id="headerR">
                    
                    </div>
                </div>
            </div> 

CSS:

#headerC {
    background: #fff url(.headerC.gif) repeat-x top left;
}
#headerL{
    background: url(headerL.gif) no-repeat top left;
}
#headerR {
    width: 770px;
    height: 190px;
    background: url(headerR.gif) no-repeat top right;
} 

Metodi di compressione (gif, png, jpg)

Allora: se invece di usare left, right e center usassi solo un'unica gif questa mi peserebbe circa 30Kb, un pò troppo per un header, anche se oggi non è poi così grave viste le connessioni.

Gif: 30Kb
PNG8: 19Kb
PNG24: 29Kb
Jpg: 24Kb (qualità 80%)

Potrei gia usare il PNG8 che non è male ma volevo scomporla.

Valori di Left e Right:

Gif: 3kb
PNG8: 2 Kb
PNG24: 1Kb (!!!)
JPG: 2Kb (qualità 80%)

Valori di center:

Gif: 1.3Kb
PNG8: 0.9Kb
PNG24: 0.6Kb (!!!)
Jpg: 0.7Kb (qualità 80%)

In più c'è una parte centrale piuttosto grande da aggiungere che pesa rispettivamente:

Gif: 11Kb
PNG8: 8.3Kb
PNG24: 14Kb
Jpg: 10.3 Kb (qualità 80%)


Una scoperta

Questo studio mi ha fatto scoprire come si comportano i diversi formati.
Su immagini piatte (con gradazioni di colori lineari) il PNG24 batte tutti!!

Le somme:

Gif: 18,3 Kb
PNG8: 13.2Kb
PNG24: 16.6Kb
JPG: 15 Kb

Usando PNG8+PNG24 : 11Kb

Conclusioni:

- PNG24 è un formato che comprime senza perdita.
- La soluzione migliore si ottiene mischiando PNG8 e PNG24

Ma come la mettiamo nome con la compatibilità?
In tutte le immagini non ci sono trasparenze e nel momento di salvare ho deselezionato la casella di controllo della trasparenza.

Posso dormire sogni tranquilli oppure oltre alle trasparenze ci sono altri problemi?

[andrea.paiola]

su Internet Explorer manca il supporto per la trasparenza variabile
http://webdesign.html.it/articoli/le...et-explorer/1/

[99caos]

se è solo questo non è un problema in quanto non la uso.