Tips

Laad afbeeldingen sneller in (met css)

Bevat je website veel plaatjes (zoals knoppen en pictogrammen) dan vergt het heel wat 'overhead' om die een voor een in te laden. Dat kan efficiënter: Cyotek Spriter stopt alle plaatjes in één grote afbeelding en laat je via CSS toe het juiste plaatje te adresseren.

Laad afbeeldingen sneller in (met css)

Beschik je over je eigen website en zijn je webpagina’s stevig doorlucht met plaatjes (zoals knoppen en pictogrammen), dan kan het wel even duren voor die allemaal zijn ingeladen: er dienen namelijk heel wat http-verzoeken afgehandeld te worden. Dat kan anders: Cyotek Spriter laat je toe alle plaatjes in een enkele afbeelding te stoppen.

Het achterliggende idee van Cyotek Spriter is eigenlijk zeer eenvoudig. Het inladen van één (grotere) afbeelding gebeurt sneller dan het inladen van vele kleinere plaatjes: er moet immers maar één verzoek worden afgehandeld door de webserver, waarna de afbeelding in de browsercache wordt opgenomen. Als je dan op een of andere manier kan aangeven welk plaatje je precies nodig hebt uit die grote afbeelding, dan zit je gebeiteld.

[download_file]

Dat kan dus met Cyotek Spriter. De bedoeling is dat je eerst alle gewenste plaatjes ophaalt in het programma. Als je dat verkiest, kan je op een of meer van deze plaatjes – sprites, eigenlijk – verschillende effecten loslaten. Spriter voorziet onder meer in de volgende gimmicks: Color Blend, Emboss, Resize en Rotate. Verder steek er nog een module (OptiPNG) in het programma, waarmee je (uitvoer van de) png-plaatjes kan optimaliseren.

Het handige is nu dat Spriter niet alleen de afbeelding creëert met daarin de verschillende ‘sprites’, maar ook het bijhorende css-stijlblad en de html-code kan exporteren. Door de (juiste locatie binnen de grote afbeelding) van de sprites vanuit je css-code te adresseren – het volstaat de juiste coördinaten in te geven – , kan je dus het gewenste plaatje in je webpagina oproepen.

csscyotek spriterdownloadssoftwarespritewebdesignwebpagina

Gerelateerde artikelen

Volg ons

Gebruik je ecocheques bij Coolblue

Gebruik je ecocheques bij Coolblue

Producten bekijken