[HTML]Herhalende achtergrond afbeelding, wat is efficienter?

[Zoefff]

Het is absoluut geen vraag van levensbelang, maar wel iets wat ik me steeds weer afvraag als ik er mee bezig ben.

Bij veel sites die ik maak, gebruik ik als achtergrond in plaats van een kleurtje een streepje, ruitje, vierkantje, stipje, whatever. Het is in ieder geval vrij gebruikelijk om dit toe te passen, op de plaats waar de achtergrond van GoT dus beige/grijs is een rustig motiefje.

Wat ik altijd doe is een plaatje van zo'n 20*20 pixels steeds herhalen. Wat ik me nou af vraag, is het voordeliger om een plaatje van 2*2 pixels te gebruiken? Immers, dat levert minder dataverkeer op. Maar aan de andere kant kan ik me voorstellen dat het CPU intensiever is om dat plaatje van 2*2 pixels steeds te kopieren, in plaats van het 20*20 plaatje. Dat scheelt immers per 20 pixels 100 plaatjes!

Of maakt het helemaal geen drol uit?

[Willem]

Zolang het geen animated gif is lijkt me me geen drol uitmaken

[Bram77]

Het is effectiever om een zo klein mogelijk plaatje te gebruiken. Hoeveel computer-kracht het kost om het plaatje te herhalen is te verwaarlozen. Zelfs op een 486 is dat niet merkbaar.

[André]

willem169 schreef op maandag 21 februari 2005 @ 12:55:
Zolang het geen animated gif is lijkt me me geen drol uitmaken

2*2 is meer belasting voor de pc omdat het plaatje vaak herhaald moet worden, 20*20 is dan al veel beter. Eventueel 100*100 want vaak is zo'n plaatje qua kb's te verwaarlozen.

Bram77 schreef op maandag 21 februari 2005 @ 12:56:
Het is effectiever om een zo klein mogelijk plaatje te gebruiken. Hoeveel computer-kracht het kost om het plaatje te herhalen is te verwaarlozen. Zelfs op een 486 is dat niet merkbaar.

Dat zal je dus vies tegenvallen, jij spreekt uit ervaring of denk je dat gewoon?

3 dagen geleden nog dit topic:
[rml][ IE] transparante GIFs vertragen hele pagina...[/rml]

[ Voor 46% gewijzigd door André op 21-02-2005 13:01 ]

[X-Lars]

Ik heb ook eens gelezen dat je de size in kb's van het plaatje zelf nog kunt optimaliseren door een grootte van bijvoorbeeld 16x16 of 32x32 te gebruiken (ipv 20x20). In de trant van "bij 20x20 is er wat overhead".

[ Voor 6% gewijzigd door X-Lars op 21-02-2005 13:00 ]

[Bram77]

André schreef op maandag 21 februari 2005 @ 12:56:
[...]

2*2 is meer belasting voor de pc omdat het plaatje vaak herhaald moet worden, 20*20 is dan al veel beter. Eventueel 100*100 want vaak is zo'n plaatje qua kb's te verwaarlozen.


[...]

Dat zal je dus vies tegenvallen, jij spreekt uit ervaring of denk je dat gewoon?

3 dagen geleden nog dit topic:
[rml][ IE] transparante GIFs vertragen hele pagina...[/rml]

We hebben het hier toch niet over transparante gifs.
Als ik een inbelmodem zou gebruiken i.c.m. een 486 dan zou k toch echt liever hebben dat het plaatje 2*2 pixels is. Dan telt elke KB. Ik heb nog nooit verschil gemerkt tussen de opbouw van een pagina met een achtergrond-plaatje van 2*2 en een plaatje van 20*20. Laadtijd voor het binnenhalen van het plaatje van internet niet meegerekent. Op geen enkele computer.

Bovendien, als je effecient een webagina wilt bouwen wil je zowiezo elk plaatje zo klein mogelijk houden (in KB's).

[BtM909]

Bram77 schreef op maandag 21 februari 2005 @ 14:09:
[...]

Als ik een inbelmodem zou gebruiken i.c.m. een 486 dan zou k toch echt liever hebben dat het plaatje 2*2 pixels is. Dan telt elke KB. Ik heb nog nooit verschil gemerkt tussen de opbouw van een pagina met een achtergrond-plaatje van 2*2 en een plaatje van 20*20. Laadtijd voor het binnenhalen van het plaatje van internet niet meegerekent. Op geen enkele computer.

Bovendien, als je effecient een webagina wilt bouwen wil je zowiezo elk plaatje zo klein mogelijk houden (in KB's).

Yep, maar IE heeft de 'vervelende' neiging om background plaatjes te mappen naar bitmap, dus doet IE het bij 800x600 zichtbaar:

20x20: 120 keer
2x2: 120.000 keer


Zal ff opzoeken in welke versies van IE dit van toepassing is

[JHS]

Bram77 schreef op maandag 21 februari 2005 @ 14:09:
[...] Ik heb nog nooit verschil gemerkt tussen de opbouw van een pagina met een achtergrond-plaatje van 2*2 en een plaatje van 20*20.

Dat is er wel degelijk. Ik heb zelfs meegemaakt dat het je browser deed crashen, of iig een stuk vertraagd, zie ook het eerdergenoemde topic .

[djluc]

Vooral bij een achtergrond met bijvoorbeeld horizontale lijnen van een pixeltje hoog zie je wel degelijk verschil. De browser kan bij snel scrollen het dan niet meer geheel bijhouden waardoor de achtergrond lijkt te knipperen.

[Reinier]

djluc schreef op maandag 21 februari 2005 @ 15:15:
Vooral bij een achtergrond met bijvoorbeeld horizontale lijnen van een pixeltje hoog zie je wel degelijk verschil. De browser kan bij snel scrollen het dan niet meer geheel bijhouden waardoor de achtergrond lijkt te knipperen.

Dat wordt volgens mij gewoon door interferentie veroorzaakt, dus meer door het patroon van het plaatje dan het formaat.
Probeer maar uit: een plaatje van 2px hoog (2 lijnen van verschillende kleur) en 1px breed danwel eentje van 100px breed veroorzaakt hetzelfde interferentiepatroon/geknipper.

[Matias]

djluc schreef op maandag 21 februari 2005 @ 15:15:
Vooral bij een achtergrond met bijvoorbeeld horizontale lijnen van een pixeltje hoog zie je wel degelijk verschil. De browser kan bij snel scrollen het dan niet meer geheel bijhouden waardoor de achtergrond lijkt te knipperen.

Dat is een combinatie van je beeldscherm en het refreshrate van je ogen

Verder heb ik nog nooit problemen gehad met het gebruik van 2 x 2 "jpg" plaatjes als bg

[ibizadesire]

ik denk niet dat het veel uitmaakt. Zelf gebruik ik het ook en dan liefst zo klein mogelijk.

[s3mt3x]

Wat hierboven al gezegd is: te klein is te veel renderwerk voor de browser. Daar wordt je client/browser sloom van, en dat wil je niet.

[crisp]

Een plaatje van 20 bytes of van 400 bytes maakt qua laadtijd ook niet uit; het past allebei in 1 TCP/IP-pakketje

[Rowanov]

[b][message=22833612,noline]Reinier schreef op maandag 21 februari 2005 @
Dat wordt volgens mij gewoon door interferentie veroorzaakt, dus meer door het patroon van het plaatje dan het formaat.
Probeer maar uit: een plaatje van 2px hoog (2 lijnen van verschillende kleur) en 1px breed danwel eentje van 100px breed veroorzaakt hetzelfde interferentiepatroon/geknipper.

Dat geknipper kan je tegengaan door je background op fixed te zetten.

[SuperRembo]

crisp schreef op maandag 21 februari 2005 @ 18:12:
Een plaatje van 20 bytes of van 400 bytes maakt qua laadtijd ook niet uit; het past allebei in 1 TCP/IP-pakketje

Er past zelfs zo'n prachtig 2-kleurig horizontaal streepje van 1024x186 px (!) in 1 TCP/IP-pakketje.

[ibizadesire]

crisp schreef op maandag 21 februari 2005 @ 18:12:
Een plaatje van 20 bytes of van 400 bytes maakt qua laadtijd ook niet uit; het past allebei in 1 TCP/IP-pakketje

zo heb ik het inderdaad nog nooit bekeken. Misschien toch eens proberen dan.

[Sabbi]

SuperRembo schreef op maandag 21 februari 2005 @ 20:51:
[...]


Er past zelfs zo'n prachtig 2-kleurig horizontaal streepje van 1024x186 px (!) in 1 TCP/IP-pakketje.

Ik zeg, toon mij dan dat grootste plaatje wat er in 400 bytes gaat, en ook nog in een browser te zien valt...

[SuperRembo]

Sabbi schreef op dinsdag 22 februari 2005 @ 16:57:
[...]


Ik zeg, toon mij dan dat grootste plaatje wat er in 400 bytes gaat, en ook nog in een browser te zien valt...

Er passen toch 1160 bytes in 1 zo'n pakketje?

[Sabbi]

Hum, daar heb je wel gelijk in jah,
maar toch is het wel humor om uit te zoeken. (vooral voor 400 bytes is het vrij loos)

[André]

1122 bytes:

[crisp]

André schreef op dinsdag 22 februari 2005 @ 17:28:
1122 bytes:

[afbeelding]

Als .png nog maar 212 bytes

[SuperRembo]

Met een egaal plaatje schiet je niet veel op.

1157 bytes, 1024x186x2


1158 bytes, 238x1024x2



Verticale streepjes nemen minder ruimte in beslag dan horizontale
Alleen vind m'n monitor de verticale minder leuk dan de horizontale.

[ibizadesire]

als ik langer dan 1min naar jou verticale streepjes moet kijken word ik gewoon gek

[T-MOB]

Als PNG krijg je zo'n stripe in 1600x1200 nog in 1037 bytes:

[BtM909]

T-MOB schreef op woensdag 23 februari 2005 @ 11:36:
Als PNG krijg je zo'n stripe in 1600x1200 nog in 1037 bytes:
[afbeelding]

Het gaat niet om hoeveel lijntjes je in zo min mogelijk bytes kan proppen hoor

crisp gaf al voortreffelijk aan, wat voor consequenties het voor de download heeft (geen dus, zolang het in 1 TCP/IP packet past)

Ik vraag me dus even af, wat voor consequenties het voor de browsers heeft. Het daadwerkelijk renderen van het plaatje dus

[ Voor 3% gewijzigd door BtM909 op 23-02-2005 11:40 ]

[T-MOB]

BtM909 schreef op woensdag 23 februari 2005 @ 11:39:
[...]
Het gaat niet om hoeveel lijntjes je in zo min mogelijk bytes kan proppen hoor

Dat is waar, maar Sabbi daagde ons uit

crisp gaf al voortreffelijk aan, wat voor consequenties het voor de download heeft (geen dus, zolang het in 1 TCP/IP packet past)

Ik vraag me dus even af, wat voor consequenties het voor de browsers heeft. Het daadwerkelijk renderen van het plaatje dus

Mijn ervaring met IE6 op een oude bak (PII300, 128mb) is dat een gradientje van 1px hoog en een paar honderd px breed als table row achtergrond *niet* fijn browst. Elke keer dat je pagina opvroeg duurde het een seconde of 2 voordat de achtergrondjes waren gevuld. Streven naar de maximale hoogte en breedte die in 1 of 2 pakketjes passen lijkt mij dan de weg om te bewandelen.
Vaststellen van een best practice lijkt me verder vrijwel ondoenlijk omdat het niet in te schatten is of iemand een trage verbinding heeft of juist een trage PC. Je zult daar imho altijd een balans in moeten zien te vinden.

[André]

Ik heb een test gemaakt met een pagina en een tabel van 500000px hoog en daar 3 achtergrondjes geprobeerd: 2*1, 40*20, 100*50 en in alle gevallen kwamen er qua rendertijd maar 5 waarden uit: 0, 15, 16, 31, 32 ms. Dus daar zal het verschil niet inzitten.

Wel ging het scrollen niet helemaal perfect maar aangezien ik een snelle pc heb kan ik dat verder niet testen.

Ik zou dus nu eigenlijk zeggen dat het niet uitmaakt.

[JHS]

André schreef op woensdag 23 februari 2005 @ 12:16:
Ik heb een test gemaakt met een pagina en een tabel van 500000px hoog en daar 3 achtergrondjes geprobeerd: 2*1, 40*20, 100*50 en in alle gevallen kwamen er qua rendertijd maar 5 waarden uit: 0, 15, 16, 31, 32 ms. Dus daar zal het verschil niet inzitten.

Hoe bedoelje dat met die 5 waarden

Wel ging het scrollen niet helemaal perfect maar aangezien ik een snelle pc heb kan ik dat verder niet testen.

Dat geld natuurlijk ook voor het renderen van die achtergronden lijkt me .

[André]

JHS schreef op woensdag 23 februari 2005 @ 12:34:
[...]
Hoe bedoelje dat met die 5 waarden

Dat zijn het aantal ms die de pagina nodig had om te renderen.

[T-MOB]

André schreef op woensdag 23 februari 2005 @ 12:16:
Ik heb een test gemaakt met een pagina en een tabel van 500000px hoog en daar 3 achtergrondjes geprobeerd: 2*1, 40*20, 100*50 en in alle gevallen kwamen er qua rendertijd maar 5 waarden uit: 0, 15, 16, 31, 32 ms. Dus daar zal het verschil niet inzitten.

Wel ging het scrollen niet helemaal perfect maar aangezien ik een snelle pc heb kan ik dat verder niet testen.

Ik zou dus nu eigenlijk zeggen dat het niet uitmaakt.

Kun je die test online zetten? Ik ga zo namelijk naar mijn stageplek alwaar ik de beschikking heb over een stukje antiek op hardwaregebied.

[André]

Die test is niets meer als dit:

HTML:

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
      function doe()
      {
        alert((new Date().getTime()) - begin);
      }
      begin = new Date().getTime(); 
    </script>
 </head>
  <body onload="doe()">

    <table style="width: 900px; height: 500000px; background-image: url('klein.gif');">
      <tr>
        <td>Test</td>
      </tr>
    </table>

  </body>
</html>

En zo kun je het ook voor de body doen.

[JHS]

André schreef op woensdag 23 februari 2005 @ 12:47:
[...]
Dat zijn het aantal ms die de pagina nodig had om te renderen.

Maar je hebt dus één enorme tabel, met één achtergrond, hoe kunnen daar dan vijf waarden uit komen?

[André]

Ik heb de test heel vaak gerund en niet elke keer is de rendertijd hetzelfde, zo kom ik op die waardes uit. Alleen zijn volgens mij deze tijden niet helemaal representatief omdat browsers niet zo goed met millisecondes omgaan. Het komt er iig op neer dat er geen (lees: bijna geen) verschil was tussen de diverse achtergrondplaatjes.

[ Voor 3% gewijzigd door André op 23-02-2005 13:18 ]

[JHS]

Ok, maar dan nog, problemen met de rendertijd zullen zich toch voornamelijk op (nogal) langzame bakken voordoen .

[T-MOB]

Ik heb vanmiddag op een trage bak wat met het testscriptje gedaan. De eerste keer was het 160ms daarna alleen nog maar 0. Echter ook dan zag je de plaatjes nog 1 voor 1 erbij komen op het scherm. Wat totaal toch zeker een seconde of 1,5 duurde voordat een 1024x768 scherm was gevuld met plaatjes van 80x80.