opgelost Afbeeldingen combineren in CSS-sprites

Hallo allemaal,

Ik krijg het advies van Google Pagespeed om afbeeldingen te combineren in CSS-sprites als ik de laadsnelheid van de pagina´s wil verbeteren.
Ik begrijp echter niet hoe ik dat moet doen!

website

Ik hoop dat iemand mij dat kan uitleggen...

Bij voorbaat veel dank,

Frank

Hallo,

Daar zou ik mij niet zo druk over maken je moet ook wel een beetje expertise daar in hebben.
Sprites maken voor afbeeldingen kan je zelf wel doen, maar dat gaat je veel tijd kosten: je moet dan afbeeldingen gaan combineren en de CSS files aanpassen.
In de praktijk helpen al deze factoren wel iets maar bij een trage server bijvoorbeeld zal dit dan alles weinig meer uitmaken.
De winst is gering met oog op het vele werk.
En je site is nu eigenlijk niet traag.

zeevogel schreef :
Ik krijg het advies van Google Pagespeed om afbeeldingen te combineren in CSS-sprites als ik de laadsnelheid van de pagina´s wil verbeteren.

Alle beetjes helpen inderdaad, zo ook het combineren van afbeeldingen in een css-sprite.

Wat je eigenlijk doet, is het maken van één afbeelding, waarin al jouw achtergrondafbeeldingen staan, waarbij je vooral moet denken aan de kleine afbeeldingen, zoals iconen, logo's, opsommingstekens.

Voorbeeld:
Maak een afbeelding van zo'n 20 pixels breed en 40 pixels lang. Plaats hierin twee buttons van 18x18 px, bijvoorbeeld een pijl naar links en een paar pixels daaronder een afbeelding met een pijl naar rechts. Sla op als png (of jpg, als je dat liever gebruikt).

Nu moet je in je css zorgen dat de elementen de juiste achtergrond krijgen. In dit voorbeeld pakt de 'prev-button' de bovenste pijl en de 'next-button' de onderste. Dit regel je in de background-position, waarbij het eerste getal over de horizontale positie gaat en het tweede getal over de verticale positie. Je moet er maar een beetje mee spelen.

Ik hoop dat dit je wat op weg helpt. Succes!

Hartelijke groet,
Sebas

Hallo zeevogel,

Ik heb de topic weer geopend.
Let wel: We vragen even om terug te koppelen. Als je alleen op de knop "opgelost" klikt zonder een terugkoppeling te geven hebben andere leden er niets aan.
Dus kan je bevestigen dat dit de oplossing was, dat zou ook leuk zijn voor Sebas voor een bevestiging.