background image achter gehele pagina
Beste mensen,
Afgelopen tijd zie je steeds meer een opkomst (zover ik surf op het internet) van foto's die het hele beeldscherm bestrijken als achtergrond van een website.
Echter is mij opgevallen dat veel van deze websites niet snel laden door die grote foto.
Nu ben ik benieuwd, hoe kun je zo'n background image gebruiken waarbij de snelheid gewaarborgt blijft (in redelijke mate natuurlijk)
Welk soort imagetype is hiervoor geschikt? en wat zijn misschien nog wel kleine dingen om op te letten.
Bedankt in iedergeval!
Afgelopen tijd zie je steeds meer een opkomst (zover ik surf op het internet) van foto's die het hele beeldscherm bestrijken als achtergrond van een website.
Echter is mij opgevallen dat veel van deze websites niet snel laden door die grote foto.
Nu ben ik benieuwd, hoe kun je zo'n background image gebruiken waarbij de snelheid gewaarborgt blijft (in redelijke mate natuurlijk)
Welk soort imagetype is hiervoor geschikt? en wat zijn misschien nog wel kleine dingen om op te letten.
Bedankt in iedergeval!
Gebruik kleine afbeeldingen die je kan repeaten met css.
Waardoor de achtergrond gelijkmatig loopt en lijkt op 1 afbeelding, dit persoonlijk vind ik de beste manier.
Je kan dan ook zo instellen dat de background in breedte of lengte wordt herhaald.
backround-repeat
Waardoor de achtergrond gelijkmatig loopt en lijkt op 1 afbeelding, dit persoonlijk vind ik de beste manier.
Je kan dan ook zo instellen dat de background in breedte of lengte wordt herhaald.
backround-repeat
Gewijzigd op 04/10/2010 05:17:09 door Karizma Yusuf
Vaak zie je bij gradient achtige achtergronden dat ze een top en een bottom hebben, en daar tussen in een gewone kleur.
Of zoals Karizma al zei, een background-repeat gebruiken, maar dat kan ook niet altijd.
Of zoals Karizma al zei, een background-repeat gebruiken, maar dat kan ook niet altijd.
Beste mensen,
ik denk dat ik wat onduidelijk ben geweest. Ik ken de hier boven genoemde principes, echter gaat het mij om 1 foto. Stel iemand heeft een foto van een koe, wordt deze als achtergrond van de website gebruikt, waarover content heen staat.
Ik was meer benieuwd naar dit principe en hoe je hier de preformance van kunt behouden. En welk bestandstype is hier meest geschikt voor? (jpg, png, etc.)
ik denk dat ik wat onduidelijk ben geweest. Ik ken de hier boven genoemde principes, echter gaat het mij om 1 foto. Stel iemand heeft een foto van een koe, wordt deze als achtergrond van de website gebruikt, waarover content heen staat.
Ik was meer benieuwd naar dit principe en hoe je hier de preformance van kunt behouden. En welk bestandstype is hier meest geschikt voor? (jpg, png, etc.)
Als je geen scherpe resoluties nodig hebt, kan je beter kiezen voor PNG's of GIF's inplaats van JPG/JPEG's, want PNG's en GIF's laden in het algemeen sneller. JPG's zijn in het algemeen veel beter voor foto's.
Er is niet echt veel wat je kan doen, als bezoekers via een andere pagina bij de pagina met datgene achtergrond komen, kan je proberen het afbeelding stiekem in het achtergrond te laden, want opgeslagen afbeeldingen laden veel sneller. Maar dan worden de gebruikers er niet echt blij van.
Er is niet echt veel wat je kan doen, als bezoekers via een andere pagina bij de pagina met datgene achtergrond komen, kan je proberen het afbeelding stiekem in het achtergrond te laden, want opgeslagen afbeeldingen laden veel sneller. Maar dan worden de gebruikers er niet echt blij van.
De meeste fotos die gemaakt zijn met een fototoestel zijn tegenwoordig al gauw een 10 a 12 mb groot, een goeide telefoon heeft al een 5 mb, deze converteer ik meestal handmatig naar +/_ 100 kb, misschien nog wel erg groot maar we werken tegenwoordig bijna allemaal met adsl etc, zelfs telefoons gaan algauw naar een 300kb download,
Je zou ook de kleuren kunnen verminderen naar bijvoorbeeld 256 kleuren dat scheelt meestal een heel eind, wil je nog verder gaan dan zou je bijvoorbeeld maar 1 kleur kunnen gebruiken,
Wat ook een mogelijkheid is om de achtergrondfoto niet groter maar juist kleiner te laten zijn dan de gewilde grootte van je foto?
Er van uit gaande dat we een achtergrondfoto van 400X400 pixels willen,
Als je bijvoorbeeld een foto van 100 X 100 pixels op je scherm met height en width laat zien als 400X400 dan zou deze qua kb kleiner moeten zijn?
Andersom moet je niet doen, dus geen foto van 1024X780 (hd) op je scherm met height en width als 400X400 laten zien maar deze eerst zelf gaan verkleienen zoals hierboven aangegeven naar je gewenste grootte,
Grtx,
Je zou ook de kleuren kunnen verminderen naar bijvoorbeeld 256 kleuren dat scheelt meestal een heel eind, wil je nog verder gaan dan zou je bijvoorbeeld maar 1 kleur kunnen gebruiken,
Wat ook een mogelijkheid is om de achtergrondfoto niet groter maar juist kleiner te laten zijn dan de gewilde grootte van je foto?
Er van uit gaande dat we een achtergrondfoto van 400X400 pixels willen,
Als je bijvoorbeeld een foto van 100 X 100 pixels op je scherm met height en width laat zien als 400X400 dan zou deze qua kb kleiner moeten zijn?
Andersom moet je niet doen, dus geen foto van 1024X780 (hd) op je scherm met height en width als 400X400 laten zien maar deze eerst zelf gaan verkleienen zoals hierboven aangegeven naar je gewenste grootte,
Grtx,
Gewijzigd op 10/10/2010 12:14:16 door Rinus o
Als ik naar zo'n site ga met een image die als background ingesteld is, dan heb ik eigenlijk nooit zo'n last van traagheid.
Maar goed, je moet dus inderdaad kijken naar optimalisatie. Er zijn bepaalde technieken om de kwaliteit van de foto te behouden, maar toch ze kleiner te krijgen.
Ook kan je kijken naar dat nieuwe formaat van google: webp, misschien werkt dat ook wel goed (zo veel heb ik mij er nog niet in verdiept).
Maar goed, je moet dus inderdaad kijken naar optimalisatie. Er zijn bepaalde technieken om de kwaliteit van de foto te behouden, maar toch ze kleiner te krijgen.
Ook kan je kijken naar dat nieuwe formaat van google: webp, misschien werkt dat ook wel goed (zo veel heb ik mij er nog niet in verdiept).




