Un’immagine di sfondo aggiunge molto all’attrattiva visiva di una pagina Web. Tuttavia, il download di un’immagine di grandi dimensioni può richiedere molto tempo con una connessione lenta e, se inserisci il codice dell’immagine di sfondo nella sezione di un documento HTML, può ritardare il caricamento del contenuto principale della pagina. Selezionare una tecnica per ridurre le dimensioni dell’immagine e ottimizzare il codice sorgente della pagina Web per consentire al browser del visitatore di scaricare il contenuto principale della pagina durante il caricamento dell’immagine di sfondo. Quindi, apporta una regolazione sul tuo server Web per memorizzare nella cache l’immagine sul computer del visitatore.
1
Converti l’immagine di sfondo nel formato JPG e comprimila per ridurne le dimensioni. La conversione di un’immagine di sfondo PNG in JPG può produrre un’immagine notevolmente più piccola che appare praticamente identica. Molti programmi gratuiti di modifica delle immagini come GIMP e Paint.net possono convertire un file PNG in JPG consentendo al contempo di selezionare un rapporto di compressione che bilancia la dimensione del file e la qualità dell’immagine.
2
Utilizzare la piastrellatura per ripetere una piccola immagine in tutte le direzioni anziché utilizzare uno sfondo costituito da un’unica grande immagine. Aggiungi il seguente codice dopo il tag del documento HTML:
.both {background-image: url (http://www.website.com/background.jpg); background-repeat: repeat;}
In alternativa, usa il codice seguente per visualizzare un’immagine più grande senza affiancamento:
BODY {background-image: url (http://www.website.com/background.jpg); }
Sostituisci “www.website.com/background.jpg” con l’URL dell’immagine di sfondo desiderata. Se si desidera utilizzare un’immagine di sfondo impossibile da affiancare, è meglio utilizzare CSS per posizionare il codice per generare l’immagine nella sezione del documento perché consente a un browser di iniziare a scaricare il testo nella sezione anche se il il download dell’immagine di sfondo non è ancora terminato.
3
Usa un colore a tinta unita invece di un’immagine per lo sfondo della pagina. I browser possono eseguire il rendering di colori a tinta unita senza scaricare dati, contribuendo notevolmente a ridurre i tempi di caricamento. Aggiungi il seguente codice dopo il tag:
BODY {background-color: #FFFFFF;}
Sostituisci “#FFFFFF” con il codice esadecimale del colore desiderato.
4
Connettiti direttamente al tuo server Web utilizzando un client FTP come FileZilla. Nella directory root HTML, di solito “wwwroot” o “public_html”, individua e scarica il file “.HTACCESS”. Se non vedi un file con questo nome, crealo con Blocco note. Aggiungi il seguente codice all’inizio del file prima di caricarlo di nuovo sul server:
Il set di intestazioni scade “Sun, 1 Jan 2017 20:00:00 GMT”
Questo dice al browser Web di un visitatore di memorizzare nella cache l’immagine di sfondo del tuo sito web sulla macchina locale e di visualizzarla direttamente dal disco rigido dopo averla scaricata una volta dal tuo server. Modificare la data come desiderato.