2009-10-01 2 views
7

Ad esempio, un'immagine 1x1 si caricherà più velocemente di una 2x2? La dimensione sarebbe più piccola, ma il browser dovrebbe funzionare il doppio, giusto?Esiste una dimensione ideale per le immagini di sfondo?

Quindi, c'è una dimensione e una forma ideali (quadrato vs rettangolo) per le immagini di sfondo?

So che probabilmente non è troppo importante, ma mi interessa sapere.

Grazie

risposta

4

non credo che ci sia una dimensione 'ideale' per la vostra immagine.

Anche se la qualità dell'immagine avrà un ruolo nel tempo di download. Un'immagine con colori ricchi incorporati sarà di grandi dimensioni rispetto a un'altra con la stessa dimensione.

Infine, la scelta di un'immagine di sfondo del tutto dipende dal vostro bisogno. Se hai bisogno di un'immagine 2 * 2, devi includerla.

Se è necessario ottimizzare le prestazioni di un sito utilizzando un sacco di immagini di sfondo, allora si può dare un'occhiata a

CSS sprites

e alcuni strumenti per l'ottimizzazione delle immagini

12 Really Useful Image Optimization Tools For Web Designers

+0

CSS sprites è pulito ... Grazie per il collegamento – guerda

3

Ho notato che la piastrellatura di immagini molto piccole (come 1 × 1 o 2 × 2) è molto lenta in molti browser. Dato che con la maggior parte dei formati di immagine compressi non c'è quasi alcun svantaggio di essere più grandi con le ripetizioni, penso che almeno per le immagini di affiancamento si dovrebbe optare per immagini di almeno 50 × 50 pixel per ridurre la complessità del disegno nell'UA.

2

Interessante domanda. Dovresti chiedere a ciascuno dei fornitori di browser, poiché ognuno di loro ha diversi modi di rendering delle immagini.

Ma in realtà, ignorando il tempo di download, qualsiasi differenza nel tempo di rendering sarà trascurabile, quindi ha senso usare solo un'immagine più piccola se è possibile.

Indicheremo anche l'ovvio che se stai usando un'immagine 1x1 ripetuta, dovresti usare invece un colore di sfondo.

+0

In alcuni casi potrebbe essere necessario un'immagine anziché un colore di sfondo, poiché i colori non vengono sempre visualizzati esattamente nello stesso modo. – Guffa

+1

Guffa: lo stesso per le immagini, comunque. E idealmente gli algoritmi per determinare il colore visualizzato dovrebbero essere gli stessi sia per i colori a tinta unita che per le immagini. – Joey

+1

Si potrebbe desiderare un'immagine png semitrasparente – Eric

2

La dimensione ideale sarebbe diversa da un browser a un altro, da un sistema all'altro.

Evitare di renderlo troppo piccolo o troppo grande. Un'immagine di sfondo della dimensione 1x1 potrebbe presentare problemi di rendering in alcuni browser. Dovresti almeno renderlo di pochi pixel in ogni dimensione.

Mi ricordo che Netscape 4 ha rifiutato di ripetere le immagini se fossero inferiori a qualcosa come dieci pixel di larghezza. I browser oggi sono meno sensati, ma ha ancora senso non rendere le immagini troppo piccole.

La compressione delle immagini (almeno per le immagini GIF e PNG) si basa sulla ripetizione, quindi se ingrandisci l'immagine ripetendola, le dimensioni extra dell'immagine aggiungeranno molto poco alle dimensioni del file.

2

Solo per notare: se si sta tentando di velocizzare il download, l'overhead di scaricare l'immagine 1x1 vs., ad esempio, 10x10, è trascurabile, soprattutto per le immagini compresse decentemente, sia per il client che per il server.

Pertanto, poiché il rendering è decisamente più veloce/migliore con 10x10, scegliere un'immagine di dimensioni maggiori.