La qualità delle immagini ridimensionate con HTML
Venerdì 9 Luglio 2010 - 10:31
di Cesare Lamanna
Ridimensionare un’immagine facendo ricorso ad HTML e ad attributi come width ed height non è magari una pratica da consigliare, ma ci sono situazioni in cui può essere necessario. A quel punto si pone il problema della qualità della grafica così trattata, un problema che su IE (sul quale il degrado è particolarmente evidente nelle versioni 6/7) si può risolvere utilizzando nei CSS questa regola:
img { -ms-interpolation-mode: bicubic; }
Come si vede, non si fa che adottare, preceduto dal prefisso -ms-, uno dei tanti filtri proprietari di Microsoft.
Se problemi analoghi si dovessero riscontrare su Firefox, Mozilla prevede invece l’uso della proprietà image-rendering. Per aggiustare le cose su entrambi i browser la regola potrebbe essere così definita:
img {
image-rendering: optimizeQuality; /* Firefox 3.6+; default behavior is identical, no need to specify */
-ms-interpolation-mode: bicubic; /* Internet Explorer 7.0; default in IE8+ */
}
Il codice è ripreso da questa pagina del Mozilla Developer Center che spiega nei dettagli i termini della questione e tutte le possibili alternative.
Categoria: CSS, Grafica | Permalink
Commenti
1
Ottimo, grazie, non lo sapevo: mi serviva proprio una soluzione del genere!
Cesare, a volte i tuoi post sono proprio come …”la manna”! :-D# - postato da Idrolitina - 09 Luglio 2010 - 11:08
2
Infatti spesso credo che lui ci spii, sto cercando di sistemare qualcosa, un bug o robe simili e me li ritrovo negli rss di edit. Scritti da lui.
Quale sarà il suo segreto?# - postato da Antonio Correnti - 09 Luglio 2010 - 11:27
3
Ho fatto un test prendendo una foto di una ragazza con sfondo una tinta unita e forzandola a dimensione pari al suo 45% (ho scelto di proposito per evitare percentuali come 12,5%, 25% e 50% che facilitano la qualità nel ridimensionamento).
Ho aggiunto delle linee bianche a 45° del testo e delle forme in Photoshop con molti particolari per evidenziare eventuale scarsa\buona qualità nel ridimensionamento.
Ho inserito le proprietà ed i valori nelle css ed ho provato con e senza.
Sono identiche, sia in Firefox 3.6.6 sia in IE 8 e 7. Praticamente non se le fila nessuno o per lo meno il risultato non è apprezzabile.
# - postato da TaTaC - 09 Luglio 2010 - 11:36
4
Ora ho provato anche in Chrome e IE 6 e nulla, ho affiancato le due immagini e sono identiche.
# - postato da tatac - 09 Luglio 2010 - 11:39
5
Piccola rettifica, sul 7 funziona, si vede leggermente meglio ma non sull’8 in motalità IE7 dovete aprirlo direttamente con il 7.
# - postato da tatac - 09 Luglio 2010 - 11:43
6
Ma la ragazza era gnocca almeno?
# - postato da Antonio Correnti - 09 Luglio 2010 - 12:19
7
@antonio
Aahahahahahah!
Grazie, ci volevano quattro risate in questi giorni di afa e pesantezza prevacanziera…
P.S. Carino il vostro sito e anche i vostri lavori
@tatac
Credo che questi metodi siano implementati di default a partire da firefox 3.6 e ie8# - postato da Elisa - 09 Luglio 2010 - 16:02
8
Antonio Correnti
ovvio ^_^’# - postato da tatac - 12 Luglio 2010 - 09:16
9
davvero una bella dritta, non ero a conoscenza di questa possibilità e a volte può essere molto utile..
# - postato da marco pini - 15 Luglio 2010 - 09:29