fare il mio immagini di sfondo caricare più velocemente

http://www.leona-anderson.com fare il mio immagini di sfondo caricare più velocemente

body { 
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed; 
background-size:100% auto; 
}

Ho un diverso immagini di sfondo su ogni sito un dato che sono 1080p prendono un po 'a caricare.

Uso wordpress 4.0.5 con tema minamaze.

Ho scoperto che utilizzo una funzione JavaScript precaricata, ma nel mio caso in prima pagina non ho informazioni sull'immagine di sfondo degli altri siti, quindi spero che qualcuno possa fornirmi una soluzione diversa.

Le mie immagini sono in formato .pngs con circa 1mb, forse potrei provare a comprimerle ancora un po '?

Grazie in anticipo

fonte

2014-10-19 Jakob Abfalter

Non si deve utilizzare .png per tale immagine. Come regola generale, le fotografie dovrebbero essere .jpg e grafici (per esempio loghi) dovrebbero essere indicizzati .png

Ho ridotto le dimensioni del file di ~ 89% a 139 KB da 1,3 MB e la differenza visiva è appena visibile.

Ecco l'immagine ottimizzata: Optimized

Ed è tuo qui: Original

fonte

2014-10-19 16:16:25

Quale metodo hai utilizzato per comprimerlo? –

Ho usato Photoshop per esportare come jpg, qualità al 100%.Praticamente qualsiasi libreria, API o servizio online dovrebbe raggiungere lo stesso risultato. –

È possibile ridurre il tempo che il vostro sito web prende durante il caricamento con un margine enorme, se si utilizza CSS3 sfondo-pendenze al posto delle grandi priorità-immagini. Parlando del tuo background-image homepage per esempio, è possibile creare un background = gradiente come questo e utilizzare l'immagine della donna come immagine di sfondo e la posizione a destra:

#content { 
 
    display: block; 
 
    height: 1500px; 
 
} 
 
body { 
 
    background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -webkit-linear-gradient(left, #ba53a0, #fff); 
 
    background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -o-linear-gradient(right, #ba53a0, #fff); 
 
    background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -moz-linear-gradient(right, #ba53a0, #fff); 
 
    background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, linear-gradient(to right, #ba53a0, #fff); 
 
}

<body> 
 
    <div id="content"></div> 
 
</body>

fonte

2014-10-19 16:13:00

Penso che la strada da percorrere sia comprimere in file JPEG. Puoi scegliere il grado di compressione nella maggior parte dei software (io uso GIMP). 1 Mb è per tutti i mezzi pratici troppo grandi per un'immagine di sfondo.

fonte

2014-10-19 16:13:43 Memophysic

Hai preso in considerazione la memorizzazione nella cache dello sfondo del dispositivo dell'utente in modo che gli utenti ripetuti abbiano un tempo di caricamento più rapido link?

fonte

2014-10-19 16:15:56 Oliver

Dal momento che si usa solo una sfumatura e la donna, si potrebbe realizzare la sfumatura di colore con CSS3 e caricare solo la donna come immagine:

CSS:

body { 
    background: -webkit-linear-gradient(left, #B200FF , white); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, #B200FF, white); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, #B200FF, white); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, #B200FF , white); /* Standard syntax */ 
}

Fiddle: http://jsfiddle.net/n4anrzk8/1/

Oppure si tenta di utilizzare https://tinypng.com/ per ottenere file png più piccoli, se deve essere un'immagine.

Un altro, piuttosto cattivo metodo, sarebbe caricare TUTTE le immagini con larghezza 0 nella prima pagina. Non sono visibili, ma il browser li salverà nella cache (se il visitatore utilizza la cache del suo browser). Non consiglio questo metodo, è solo per completezza.

fonte

2014-10-19 16:24:44

fare il mio immagini di sfondo caricare più velocemente

risposta

Problemi correlati