Resa nel ridimensionamento delle immagini sui browser

In 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 image  (scarso)
image

Microsoft Internet Explorer 7 image  (scarso)
image

Opera 9.24 image (buono)
image

Safari 3.0.4 (523.12.9) image (ottimo)
image

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!

5 commenti a: “Resa nel ridimensionamento delle immagini sui browser”

  1. 05 dic, 2007 Emanuele:

    Complimenti per il test… Safari è un browser che mi intriga sempre di più. Chissà che riuscirà a farmi abbandonare il mio adorato Firefox…
    Ciao,
    Emanuele

    RispondiQuota
  2. 05 dic, 2007 Giovambattista Fazioli:

    Mi è dispiaciuto che FireFox non è stato all’altezza del resize. Quantomeno non mi sarei aspettato che stava allo stesso livello di IE!! Safari ha un’ottima gestione delle immagini ed è estremamente veloce. Peccato che abbia ancora qualche bugs, a me – su Vista – mi ha crashato un paio di volte.

    RispondiQuota
  3. 06 dic, 2007 DnaX:

    Beh, Safari usa WebKit che è un motore di rendering molto performante. Firefox introdurrà nella nuova release, la 3.0 gecko 1.9, il quale migliorerà proprio il resize delle immagini. Quindi amanti di Firefox non vi preoccupate ;)

    Ciao!

    RispondiQuota
  4. 07 dic, 2007 Cristian:

    Interessante test. Bravo!

    RispondiQuota
  5. 09 dic, 2007 upnews.it:

    undolog » Blog Archive » Resa nel ridimensionamento delle immagini sui browser…

    In 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, indipendement…

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA