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.

9 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

davvero una bella dritta, non ero a conoscenza di questa possibilità  e a volte può essere molto utile..

marco pini
marco pini

Antonio Correnti ovvio ^_^'

tatac
tatac

@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

Elisa
Elisa

Ma la ragazza era gnocca almeno?

Antonio Correnti
Antonio Correnti

Piccola rettifica, sul 7 funziona, si vede leggermente meglio ma non sull'8 in motalità  IE7 dovete aprirlo direttamente con il 7.

tatac
tatac

Ora ho provato anche in Chrome e IE 6 e nulla, ho affiancato le due immagini e sono identiche.

tatac
tatac

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.

TaTaC
TaTaC

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?

Antonio Correnti
Antonio Correnti

Ottimo, grazie, non lo sapevo: mi serviva proprio una soluzione del genere! Cesare, a volte i tuoi post sono proprio come ..."la manna"! :-D

Idrolitina
Idrolitina