Immagine di sfondo del sito Web ripetuta: dimensioni e velocità

Question

Mi chiedevo se qualcuno ha fatto qualche prova con le immagini di sfondo.Normalmente creiamo uno sfondo che si ripete almeno in una direzione (xo y o entrambe).

Esempio
Diciamo che abbiamo uno sfondo sfumato che si ripete nella direzione X.L'altezza del gradiente è 400 px.Abbiamo diverse possibilità.Possiamo creare l'immagine più piccola possibile (1 pixel di larghezza e 400 pixel di altezza) oppure possiamo creare un'immagine più grande con 400 pixel di altezza.

Osservazione
Dato che il gradiente è alto 400 pixel, probabilmente non sceglieremo il formato GIF, perché può memorizzare solo 256 colori adattivi.Forse è sufficiente se il nostro gradiente è sottile, poiché non ne ha molti, ma altrimenti probabilmente preferiremo archiviare l'immagine come immagine PNG a 24 bit per preservare i dettagli completi del gradiente.

Dilemma
Dovremmo creare un'immagine di dimensione 1×400 px che verrà ripetuta N volte in orizzontale oppure dovremmo creare un'immagine di dimensioni 100×400 px per velocizzare il rendering nel browser e avere una dimensione del file immagine maggiore.

COSÌ. Dimensioni dell'immagine rispetto avelocità di rendering? Quale vince?Qualcuno ha voglia di testarlo?Per quanto riguarda la velocità di rendering del browser e il possibile sfarfallio nel ridisegno di piccole immagini...

Answer 1

La velocità di rendering è il collo di bottiglia qui, dal momento che le piastrelle più grandi possono essere messi in cache del browser.

In realtà ho provato questo per i principali browser, e almeno alcuni di essi resi notevolmente lento su piccole piastrelle.

Quindi, se l'aumento delle dimensioni bitmap non si traduca in ridicolmente di grandi dimensioni dei file, senza dubbio andare con quella. Metti alla prova voi stessi e vedere. (Ricordati di includere IE6, come ancora molte persone sono bloccati con esso).

Potreste essere in grado di trovare un buon equilibrio tra la dimensione del bitmap e dimensione del file, ma in generale mi piacerebbe provare 50x400, 100x400, 200x400 e 400x400 pixel persino.

Answer 2

ho scoperto che ci può essere una grande differenza nelle prestazioni di rendering del browser, se si ha un background-image con una larghezza di 1px e di ripeterlo. E 'meglio avere un background-image con dimensioni leggermente più grandi. Quindi un'immagine con una larghezza di 100px rende molto di più nel browser. Questo avviene soprattutto in gioco quando si utilizza uno sfondo-immagine ripetuta in uno strato trascinabile sul tuo sito web. Il drag-performance è piuttosto male con un background-image spesso ripetuta.

Answer 3

Vorrei sottolineare che per il costo di inviare alcune righe in più (1-2 solo esempio qui) .8k - 1,6kb (se riesci a farla franca con 8 bit) più come 2,4kb - 4,0kb per 24 bit

2 colonne di pixel in più significano che le iterazioni richieste per illuminare lo sfondo vengono ridotte a 1/3 fino a 1,6 kb (8 bit) o ​​4 kb (24 bit)

anche 1 colonna in più dimezza il blitting richiesto fino alla metà della larghezza dell'elemento.

Se lo sfondo viene eseguito in meno di un secondo per un modem da 56,6k, ritengo che sia abbastanza snello.

Answer 4

Se di piccole dimensioni di un'immagine hanno un impatto negativo sul rendering, sono sicuro che qualsiasi browser decente avrebbe blit l'immagine all'interno un paio di volte prima della posa.

Ciò detto, non tendono ad usare 1 pixel dimensioni dell'immagine, così posso vedere chiaramente l'immagine senza ridimensionarlo. compressione PNG è sufficiente per gestire questa situazione a costi molto poco alla dimensione del file, nella maggior parte delle situazioni.

Answer 5

avevo messo i soldi sul collo di bottiglia essendo il download dell'immagine piuttosto che il motore di rendering facendo la piastrellatura, in modo da andare per l'opzione di larghezza di 1 pixel.

Anche il PNG a 24 bit è ridondante in quanto si sta ancora ottenendo soltanto 8 bit per canale (rosso, verde e blu).

Answer 6

Io generalmente preferisco andare in mezzo, 1 pixel di larghezza renderà probabilmente il gradiente sembrare un po 'poco chiaro, ma si può fare qualcosa di simile larghezza 5pixel che dà spazio sufficiente per il gradiente di mantenere la coerenza e la chiarezza attraverso la pagina .. ma vorrei suggerisco è possibile aggiungere ulteriori modelli e immagini in una singola immagine e quindi utilizzare il posizionamento di sfondo ( css sprite ) in posizione perché scaricare una singola immagine di dire 50kb sarebbe voluto meno tempo comapared a 5 40kb immagini dal momento che il browser effettua un minor numero di richieste al server ...

Answer 7

Non ho benchmark questo, ma mi piacerebbe scommettere che sulla maggior parte dei computer moderni del rendering non sarà un problema, mentre si vuole sempre di risparmiare sulle sul tempo di scaricare l'immagine. Vado spesso per il tipo 1px di grafica.