Visualizzare le immagini in XHTML Mobile Profile

I browser WAP visualizzeranno il testo scritto nel tag "alt" se non è possibile vedere l' immagine per diversi motivi, quali: file grafico non trovato o formato dell' immagine non supportata.

Gli attributi "width" ed "height" del tag <img>, come il nome suggerisce, specificano larghezza ed altezza di una immagine, rispettivamente. È possibile usare questi 2 attributi per scalare o aumentare la dimensione di una immagine sullo schermo.

Oltre al vecchio formato immagine WBMP, i dispositivi senza fili WAP 2.0 dovrebbero poter supportare i formati comunemente usati come GIF, GIF animate, JPG e PNG. Tuttavia questo dipende dalla specificità del dispositivo stesso.

Un modo molto semplice per vedere se un particolare tipo di immagine è supportato da un browser è quello di controllare l' intestazione HTTP, come è stato visto nell' apposita spiegazione sui MIME type dinamici.

Per esempio se "image/gif", "image/jpg" e "image/png" sono disponibili nell' intestazione HTTP, vuol dire che il dispositivo supporta questi tre formati immagine.

Il codice seguente mostra come visualizzare una immagine in un documento XHTML MP:

Se il browser del dispositivo accetta il formato immagine che abbiamo scritto, il tutto dovrebbe andare a buon fine. Infatti, con gli emulatori online, attraverso i quali ho effettuato le prove, ho ottenuto il risultato mostrato dall' immagine successiva:

Consigli per quanto riguarda le immagini grandi in XHTML MP

Alcuni browser WAP non hanno la barra di scroll orizzontale tra le loro funzioni. In questi casi, se la larghezza di una immagine è più larga del monitor, la stessa immagine verrà "tagliata"; questo significa che alcune pagine non saranno visualizzate in maniera corretta e professionale dagli utenti.

Poniamo il caso che si volesse includere una immagine, come quella raffigurata di seguito, in un browser WAP:

La suddetta immagine ha dimensioni di 214 X 214 pixel.

Ecco come verrebbe visualizzata in uno dei simulatori online:

Si vedrebbe appena una parte dell' occhio sinistro, ma non si capirebbe bene cosa quella immagine volesse mostrare. Questo esempio ho voluto riportarlo perchè, credo, si debba cercare un compromesso con le immamgini che si vogliono visualizzare attraverso un display di dimensioni ridotte, ripetto al monitor di un computer.

Un' altra cosa di cui ci si deve interessare è il "peso" (inteso come bytes) dell' immagine che potrebbe incidere sulle prestazioni del dispositivo mobile. Usando gli attributi <height> e <width> del tag <img>, non contribuisce a migliorare le prestazioni perchè il peso del file rimarrebbe uguale.

Inoltre, un' immagine molto pesante costerebbe molto denaro per coloro che visitano il sito internet con un GPRS, poichè gli operatori di reti cellulari potrebbero ricaricare i costi ai loro abbonati in base alla quantità di dati trasmessi attraverso la rete.

È importante ottimizzare le immagini in modo da mantenere il formato delle stesse, abbastanza contenuto. Come?

• Usando un programma grafico per scalare le immagini, invece di trasmettere una immagine grande al dispositivo senza fili in modo tale da ridurre il rendering dell' immagine con gli attributi "height" e "widht" del tag <img>;
• Se le immagini sono files GIF, si dovrebbe usare una gamma di colori non molto grande. Una piccola gamma di colori può significare qualità minore dell' immagine, ma assenza di problemi in fase di visualizzazione.
• Se le immagini sono files JPG, le si dovrebbe salvare con un rapporto di compressione "giusto". Una alta compressione potrebbe restituire una immagine leggera ma una cattiva qualità. Bisogna bilanciare un pò le due cose.

Un'altra cosa che potrebbe contribuire a migliorare le prestazioni del sito Internet mobile, è usare i multipart messages.

Normalmente, quando un utente richiede una pagina XHTML MP che contiene delle immagini, il browser WAP prima scarica il documento e poi le immagini in separate richieste. Questo significa scaricare tutta la pagina, effettuando molte richieste.

I multipart messages permettono di disporre il documento XHTML e le immagini nella stessa risposta, questo significa che tutta la pagina può essere caricata con una sola richiesta, riducendo, di molto, il numero di richieste al server.