Resa nel ridimensionamento delle immagini sui browser
Mercoledì 5 Dicembre, 2007In linea di principio quando si inserisce un’immagine in un documento HTML bisognerebbe utilizzare le sue dimensioni originali. Tuttavia il TAG IMG permette di forzare la larghezza (width) e l’altezza (height) di una qualsiasi immagine, indipendemente dalle dimensioni originali. Questa operazione di ridimensionamento viene svolta - ovviamente - dal browser.
Usare le dimensioni orginali di un’immagine è buona cosa, nonostante in alcuni casi comporta un doppio lavoro per il Web Designer e/o i motori dinamici (CMS ad esempio o librerie di manipolazione grafica) presenti sul Web Server. Un classico slide show, ad esempio, di norma mostra delle anteprime o thumbnail (immagini di dimensione ridotta) che se selezionate mostrano l’immagine originale più grande. Questo significa che bisogna avere a disposizione due formati della stessa immagine: uno piccolo per il thumbnail e uno più grande. Così capita che in alcune circostante si evita di creare un thumbnail e si lascia al browser il compito di mostrare l’immagine più piccola, forzando gli attributi width ed height nel TAG IMG.
L’uso dei thumbnail ha due immediati vantaggi: il caricamento dell’immagine ridotta è estremamente veloce e il rendering è buono, o comunque ha la resa che abbiamo scelto (se ad esempio abbiamo preparato i thumbnail con Photoshop). Di contro, come detto, dobbiamo preparare due immagini separate ed eventuali modifiche al sito dovranno tenere in considerazione questo fattore.
Forzando noi una dimensione inferiore, infatti, non si accelera il processo di downloading dell’immagine stessa: se ho un’immagine di 8000×8000 pixel e la mostro come thumbnail 100×100 pixel, il browser dovrà comuqnue scaricare un’immagine 8000×8000 e dopo effettuare un resize!
Ho fatto alcune prove con diversi browser su Windows Vista, usando 4 immagini da 1024×768 pixel ridimesionate a 100×90 pixel, ed ecco i risultati di resa su diversi broswer.
FireFox 2.0.0.11 
(scarso)
Microsoft Internet Explorer 7 (scarso)
Opera 9.24 
(buono)
Safari 3.0.4 (523.12.9) 
(ottimo)
Safari vince su tutti, con una resa davvero ottima anche in termini di tempo di download. FireFox e IE7,a sorpresa, sono praticamente identici, peccato per FireFox. Opera si pone a metà , con una resa decisamente migliore di IE7 e FireFox ma al di sotto di Safari che stravince!
Post correlati
Tags: browser, firefox, ie7, IMG, Internet, Opera, Rendering, Resize, Ridimensionamento, Safari, Tecnologia
Pubblicato in Internet, Tecnologia | 
5 commenti »
In realtà tu hai ragione, e non sei il primo a...
