Tutorial multimediali - Uso delle immagini sul web

Questo documento spiega in dettaglio in quali condizioni utilizzare immagini e testo, come accelerare il download delle immagini e scegliere il formato di immagine appropriato.

Quando utilizzare immagini

Per la maggior parte delle immagini, un'immagine può valere più di mille parole. Tuttavia, è importante notare che nessuno presta attenzione a quelli che parlano molto. Prima di tutto, e più importante, è necessario considerare i grafici del documento come strumenti visivi e non come decorazioni senza senso. Dovrebbero supportare il contenuto del testo e aiutare i lettori a navigare nel documento. L'uso di immagini può rendere il contenuto del documento più chiaro e può aggiungere annotazioni o esempi. Le foto, i grafici, le curve, le mappe e le illustrazioni che supportano il contenuto sono scelte naturali e appropriate. Ad esempio, le foto dei prodotti sono un componente chiave per i cataloghi online e le guide di acquisto. Inoltre, icone e simboli con funzione di link, inclusi immagini con animazioni, possono essere efficaci guide visive per il contenuto o risorse esterne. Se un'immagine non gioca alcun ruolo tra questi, dovrebbe essere messa da parte!

Quando si considera di aggiungere immagini ai documenti, un altro fattore importante da considerare è il ritardo di ricerca che si verifica durante la trasmissione del documento attraverso la rete, in particolare attraverso una connessione via modem. Un documento comune può contenere al massimo 10-15 kilobyte, mentre un'immagine può facilmente raggiungere dimensioni di centinaia di kilobyte. Inoltre, il tempo totale di download di un documento non è solo la somma di tutti i suoi componenti, ma deve anche considerare i ritardi causati dal carico della rete.

Secondo la velocità della connessione (ovvero la larghezza di banda,bandwidthDi solito si utilizza bps o b/s per rappresentare) e le condizioni di blocco della rete che potrebbero rallentare la velocità di connessione, per scaricare un documento singolo contenente un'immagine di 100 KB, potrebbe essere necessario fare questo tra le due e le tre del mattino, quando la maggior parte delle persone dorme, utilizzare un modem a 57.6 Kbps e impiegare circa 15 secondi per completare il download, o potrebbe essere necessario utilizzare un modem a 9600 bps e impiegare più di 10 minuti nel pomeriggio per scaricare. Avete ricevuto questa immagine?

Certo, l'uso di immagini e altri multimediali spinge i fornitori di servizi Internet a cercare di offrire contenuti Web più veloci, migliori e più robusti. Presto, le connessioni a 56 Kbps del modem saranno come carri e calessi ad uscire dalla storia (come il modem a 9600 bps), sostituite da nuove tecnologie come il modem via cavo e ADSL. In effetti, la maggior parte delle connessioni supererà presto la velocità di 1Mbps.

Con il calo dei costi, l'uso della rete continuerà a crescere, portando problemi di congestione. Se stai cercando di accedere a un server sovraccaricato, non importa quanto veloce sia la tua connessione di rete, non sarai in grado di accedere correttamente.

Quando utilizzare il testo

Il testo non è obsoleto. Per alcuni utenti, il testo è l'unico parte del documento che può essere acceduta. Consigliamo che, nella maggior parte dei casi, il documento debba essere accessibile a chiunque, inclusi coloro che non possono visualizzare immagini o che hanno disattivato la funzione di download automatico delle immagini del browser per migliorare le prestazioni della connessione di rete. Anche se l'aggiunta di immagini al documento potrebbe essere molto desiderata, a volte un documento di testo puro ha più senso.

I documenti convertiti da altri formati a pagine Web contengono raramente immagini incorate, mentre le referenze e altri contenuti seri sono spesso disponibili in forma di testo puro.

Quando la velocità di accesso è molto importante, è meglio creare documenti di testo puro. Se sai che gli utenti potrebbero lottare per ottenere il tuo documento, evita di utilizzare immagini nel documento per adattarti alle loro esigenze. In casi estremi, potresti fornire una pagina iniziale (pagina di guida) che permetta agli utenti di scegliere tra due copie del tuo lavoro: una che contiene immagini e una che le elimina (i browser popolari hanno icona speciale per immagini, che lascia spazio per le immagini da scaricare, e questi segnaposto potrebbero disordinare la disposizione del documento, rendendolo persino impossibile da leggere).

Se desideri che il tuo documento sia facilmente trovato dai numerosi servizi di indicizzazione su Web, il testo è la forma più adeguata - supporta solo immagini, non decorazioni e grafica non necessaria. Tuttavia, questi motori di ricerca spesso ignorano l'esistenza delle immagini. Se il contenuto principale della pagina è fornito tramite immagini, le informazioni sul tuo documento nella directory online Web saranno molto scarse.

Aumentare la velocità di download delle immagini

Oltre a scegliere attentamente il contenuto da includere nel documento, ci sono molti metodi per migliorare i problemi di carico e ritardo portati dalle immagini:

Mantieni semplicità

Un grafico a schermo intero a 24 bit a colori, anche se la dimensione è ridotta attraverso la compressione digitale standard (ad esempio GIF o JPEG), occupa ancora la maggior parte della larghezza di banda della rete. Pertanto, è meglio utilizzare vari strumenti di gestione delle immagini per ottimizzare le dimensioni delle immagini e ridurre il numero di pixel dei colori al minimo. Semplifica il tuo disegno, evita di utilizzare foto paesaggistiche e evita di includere grandi aree di sfondo bianco inimmagine, nonché bordi inutili e altri elementi spaziosi. Evita anche l'uso di effetti di tremolo (mescolando due colori simili per ottenere un terzo colore), poiché questa tecnica riduce enormemente la compressibilità dell'immagine. Al contrario, usa il maggior numero possibile di colori uniformi su vasta area, poiché è facile compressarle in formato GIF o JPEG.

Riutilizzare le immagini

Questo è particolarmente applicabile agli icone e agli animazioni GIF. La maggior parte dei browser memorizza componenti documenti introdotti nella cache locale, il che rende più veloce l'accesso ai dati e utilizza meno connessioni di rete. Per file GIF di piccole dimensioni, è necessario preparare ogni immagine consecutiva in modo che vengano aggiornati solo i segmenti che cambiano nell'animazione, piuttosto che aggiornare l'intera immagine (il che può anche accelerare la visualizzazione dell'animazione stessa).

Dividere i documenti grandi

Questo è un principio generale per includere immagini. Molti frammenti di documenti piccoli sono organizzati insieme con hyperlink (naturalmente, con essi!) e una directory efficace, il che rende più facile per gli utenti accettare. In generale, le persone preferiscono sfogliare tra più pagine piuttosto che perdere tempo aspettando il download di un grande documento (un po' come il sindrome di navigazione dei canali TV). Un'esperienza buona è mantenere ogni documento intorno a 50 KB, in modo che anche se il lettore utilizza la connessione più lenta non si sentirà stanco.

Isolare grafici grandi quando necessario

Fornire un collegamento specifico per immagini molto grandi, che potrebbe essere una versione ridotta dell'immagine, lasciando al lettore la decisione di scaricare l'intera immagine e quando farlo. Inoltre, poiché tali immagini non si mescolano con altri elementi del documento come le immagini inline, sono facili da identificare e memorizzare localmente per uso futuro.

Specificare le dimensioni dell'immagine

Infine, un altro metodo per migliorare le prestazioni è includere l'altezza e la larghezza del rettangolo di contorno dell'immagine nel suo etichetta. Specificando queste dimensioni, è possibile evitare alcuni passaggi aggiuntivi, in modo che i browser con funzionalità estese non debbano scaricare, verificare e calcolare le dimensioni dell'immagine nel documento. Tuttavia, questo metodo ha un difetto. Se l'utente disattiva la funzione di scaricamento automatico delle immagini, il browser comunque mostrerà lo spazio riservato all'immagine con le dimensioni specificate. Di solito, questo lascia un riquadro vuoto per il lettore, anche se non c'è ancora una soluzione per questo problema, ci auguriamo che tu continui a utilizzare queste proprietà di dimensione, poiché incoraggiamo qualsiasi comportamento che possa migliorare le prestazioni della rete.

JPEG o GIF?

Se la fonte dell'immagine o il software del tuo strumento preferisce un formato specifico, potresti dover utilizzare solo uno dei formati JPEG o GIF. Ora, entrambi questi formati sono ampiamente supportati dai browser, quindi non ci sono problemi di visualizzazione per gli utenti.

Tuttavia, raccomandiamo di utilizzare strumenti specifici per creare o convertire questi formati per sfruttare appieno le loro funzionalità. Ad esempio, le caratteristiche di trasparenza dei GIF possono essere applicate agli icone e agli elementi decorativi piccoli. Utilizzare JPEG per comprimere immagini di grandi dimensioni e ricche di colori per accelerare la velocità di download.

Etichetta <img>

L'etichetta <img> permette di riferire o inserire immagini grafiche nel flusso corrente del documento. Per ulteriori dettagli su questa etichetta, si prega di consultare: