Skriv ut siden

Afbeeldingen

Afbeeldingen moeten qua bestandsgrootte zo klein mogelijk zijn: zo is de laadtijd van een pagina kort, wat goed is voor de gebruikservaring en voor seo. Hier wat tips.

Welk formaat?

JPG - het meest flexibel wat betreft aanpassingen van (bestands)grootte.
PNG - alleen gebruiken als transparantie cruciaal is.
GIF - alleen gebruiken voor korte animaties en afbeeldingen met een beperkt aantal kleuren, zoals logo's en schema's.
SVG - voor Vismapictogrammen.

Bestandsgrootte

Onder bestandsgrootte verstaan we het aantal kilobytes van de afbeelding. Dit is niet hetzelfde als de grootte van de afbeelding, die je meet in pixels.

Het eerste wat je moet bedenken is dat de afbeeldingsgrootte (in pixels) hetzelfde moet zijn als de ruimte (in pixels) die de afbeelding in moet nemen op de webpagina. Dat zorgt er al voor de de bestandsgrootte niet onnodig groot is. Wat je dus niet moet doen is bijvoorbeeld een afbeeling van 1000x666 pixels inladen in Episerver en deze op de pagina handmatig verkleinen tot, zeg, 500 pixels breed. Vooraf op maat maken.

Banner voor homepage en top banner block, 750x500 px

Normale bestandsgrootte: 90 - 300 kb
Niet groter maken dan: 400 kb

Blogafbeelding 1024x768 px

Normaal: 110 - 350 kb
Niet groter maken dan: 450 kb

Pictogrammen met .svg

Svg-bestanden zijn vectorbestanden; hiermee kun je een afbeelding zo groot/klein maken als je wilt, zonder verlies van scherpte. De bestandsgrootte is voor alle pixelgroottes hetzelfde.
Je vindt ze in episerver in: Media > For all sites > Global > Visma Icons SVG

Werken-bij pagina's

Handleiding werken-bij afbeeldingen aanpassen voor communicatie-afdeling (doc)

Manieren om bestandsgrootte te beperken

Content hub

Ingebouwde functie bij Advanced download. Reduce detail rate (0-100)(100 is top quality).

Photoshop

Save for web maakt het mogelijk om de kwaliteit van de afbeelding te verminderen en laat een inschatting van de bestandsgrootte zien voordat je de afbeelding opslaat.

Google PageSpeed Insights

Google PageSpeed Insights geeft tips over hoe paginasnelheid te verbeteren. Daarin zie je niet alleen welke bestaande afbeeldingen op de pagina geoptimaliseerd kunnen worden, maar Google biedt de geoptimaliseerde afbeeldingen ook aan in een zipfile:
"Download geoptimaliseerde afbeeldings-, JavaScript- en CSS-bronnen voor deze pagina."
Lees meer hierover op Unity.

Free photo editing software Gimp

Zelfde functionaliteit als Photoshop mbt optimale afbeeldingskwaliteit.

Bron: Visma doc / Unity

Bestandsnamen en opslag

xxx

Apple retina displays

Apple retina displays zijn extra scherp, waardoor webafbeeldingen wat korrelig lijken.

Wij maken onze afbeeldingen hiervoor niet groter, want dat betekent meer last voor andere bezoekers die een langere laadtijd ervaren. 

gdprsymbol

We gebruiken cookies om informatie te verzamelen over uw bezoek aan onze website. Dit combineren we met data die u via formulieren naar ons stuurt om een profiel te maken zodat we u relevantere informatie kunnen tonen. Door op JA te klikken staat u ons toe om uw persoonlijke informatie te verzamelen en te verwerken zoals hier omschreven.