Cosa fare con una grande immagine che rallenta notevolmente il caricamento del sito web

Question

Sto lavorando a un sito Web che è già stato progettato da qualcun altro. Il designer ha utilizzato una grande immagine (900x700 100KB) che contiene un grande logo in alto, quindi lo sfondo per due colonne.

Questa immagine viene caricata ogni volta che viene caricata una pagina poiché costituisce la base per il sito Web. Cosa devo fare per migliorare il tempo di caricamento?

Sto pensando di dividerlo in due o più immagini, in particolare il logo in alto. La suddivisione di immagini del genere riduce il tempo di caricamento in modo significativo?

Grazie

-edit: Inoltre, tutte le immagini sono .jpg, sarebbe cambiare questo a .gif o .png aiutare qualcosa?

Answer 1

Cose da provare:

sfondi

1. Ripetizione: Se una parte di esso può essere interrotto in un'immagine a ripetere, è possibile ridurre le dimensioni del file molto in questo modo (dividere l'immagine in parti che non ripetere, ad esempio un logo, e le parti che fanno, e quindi utilizzare CSS per ripeterlo come sfondo).

2. Caching: È necessario verificare se l'immagine viene memorizzata correttamente nella cache o meno. Non c'è motivo che dovrebbe ricaricare su ogni richiesta di pagina. Se le intestazioni HTTP consentono correttamente la memorizzazione nella cache, il browser non lo richiederà nuovamente finché l'immagine non viene cancellata dalla sua cache.

   Vedere http://www.mnot.net/cache_docs/ per alcune informazioni sul controllo della cache con intestazioni HTTP.

   Utilizzare la Web Developer toolbar per Firefox per controllare le intestazioni per l'immagine (ha colpito l'URL dell'immagine, quindi fare clic su Informazioni>Visualizza risposta intestazioni)

3. qualità del file o digitare: Inoltre, si può essere in grado di utilizzare Photoshop per salvare nuovamente l'immagine in un formato diverso o con una qualità inferiore. Le immagini GIF e JPG possono avere dimensioni di file molto diverse per la stessa immagine a seconda del contenuto dell'immagine (GIF è molto buono per la grafica con colori limitati e/o ripetitivi, specialmente quando grandi porzioni dello stesso colore vengono eseguite con pixel orizzontali consecutivi) . Se l'immagine è simile a una foto, JPG può essere molto buona perché l'alta compressione può essere nascosta in immagini molto dettagliate.

Answer 2

Le due cose che vuoi fare sono:

1. convertirlo in formato PNG (10-30% più piccolo di GIF in media); e
2. Cache efficacemente.

Il modo per memorizzarlo nella cache è la versione e utilizzare un'intestazione Expires di gran lunga futura. Per il controllo delle versioni Io generalmente basta usare il mtime (tempo di ultima modifica) del file come stringa di query:

body { background-image: url(/images/background.png?1232343455); } 

Vedi Speed Tips: Add Future Expires Headers per aggiungere l'intestazione di scadenza. Puoi farlo con uno script o con la configurazione del server Web.Il motivo per cui hai bisogno della versione è che puoi cambiarlo per forzare un ricaricamento del file altrimenti devi rinominarlo ogni volta che vuoi cambiarlo.

In questo modo lo sfondo verrà scaricato solo una volta. La suddivisione del file in diversi peggiorerà la situazione in quanto i browser tendono a limitare il numero di download simultanei e si scaricheranno più dati in generale (più intestazioni HTTP più il sovraccarico del file immagine).

Answer 3

Inserire l'immagine su un CDN può anche aiutare (insieme con le altre cose citate), perché le persone possono caricare le immagini dal CDN più velocemente del server.

Answer 4

Scricchiolio (rimozione dei metadati non necessari e ricerca di un algoritmo di compressione più efficiente) l'immagine con un compressore di immagine decente è un buon inizio. Ridurre il numero di colori, modificando il formato (GIF o PNG24 in PNG8) quando possibile.

Questo può essere totalmente ovvio, ma ... differirlo fino a quando la pagina non è completamente caricata (se il contrasto di colori nell'immagine di sfondo non è necessario per rendere leggibile il testo in primo piano).

Un modo semplice per farlo è quello di rendere il selettore CSS per l'immagine di sfondo dipende una classe nel corpo come:

... 
    <style type="text/css"> 
    /*<![CDATA[*/ 
     body.page-loaded{background:url(/path/to/image.jpg)} 
    /*]]>*/ 
    </style> 
</head> 

<body class="page-loaded" onload="document.body.className+=' page-loaded';"> 
... 

Naturalmente, l'attributo "onload" nel tag body dovrebbe essere migrato all'esterno (a un tag SCRIPT nella parte inferiore della pagina o in un file JavaScript esterno). Anche questo codice non richiede l'esecuzione di alcuna libreria JS; dovrebbe probabilmente fare uso di un osservatore di eventi.