2012-01-23 12 views
5

sto usando il seguente CSS per visualizzare un'immagine di 661px x 343px:Fare una grande immagine più piccola con i CSS (downscaling) si traduce in immagini sfocate in IE9, FF, ma bene in Chrome

width: 95px; height:auto; 

ho ha scoperto che utilizzando la seguente CSS darà lo stesso effetto sfocato nelle Chrome:

image-rendering:-webkit-optimize-contrast; 

Quindi l'eliminazione del sopra rende l'immagine molto più chiara in cromo, qualsiasi idea di come risolvere il problema per gli altri browser?

risposta

5

Generalmente non si dovrebbe fare questo, motivo per cui l'utente scaricherà l'immagine più grande.

Immaginate di avere un'immagine da 2Mb che volete mostrare su un sito Web, l'utente dovrebbe scaricare il file 2Mb solo per visualizzare l'immagine più piccola. È consigliabile ridimensionare l'immagine e creare un collegamento di anteprima.

Per quanto riguarda il problema è il rendering del browser che è il problema, per quanto ne so non c'è alternativa a questo.

+0

Le immagini sono già visualizzate nel formato più grande sulla stessa pagina, come le miniature, così ho pensato sarebbe meglio evitare immagini extra usando css. Ma credo che sia l'unica soluzione al problema per aggiungere le immagini ridimensionate. –

+1

Purtroppo Lawrence, ma sarebbe più facile mostrare la miniatura e risparmiare larghezza di banda e rendere il sito più veloce di quanto sarebbe per mostrare l'immagine grande, sito più veloce = migliori ranghi dei motori di ricerca = miglior supporto per i cellulari = felice amministratore di sistema :) – Neo

+1

Eccetto che ci sono molte volte quando questo è desiderabile (per ridimensionare un'immagine in un'area più piccola), e quella stil non risponde alla domanda: come ottenere immagini sottocampionate per visualizzare correttamente l'anti-aliasing e non essere jaggy o sfocato. E dal momento che sta già visualizzando l'immagine più grande sulla pagina, quindi la tua risposta è peggio per le prestazioni della pagina di avere anche pollici d/l, dal momento che questo comporta il doppio del numero di richieste HTTP che il browser deve gestire. – Steve

0

ridimensionare l'immagine di origine per la larghezza e l'altezza corretta, allora non avrete problemi di visualizzazione che tutti i browser

Problemi correlati