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 Visma-pictogrammen.

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 afbeelding 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

• Met deze Siteimprove policy kun je zien welke pagina's afbeeldingen groter dan 400 kb bevatten
• Er zijn ook policy's voor afbeeldingen groter dan 200 kb en afbeeldingen groter dan 100 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 Visma-Space

Free photo editing software Gimp

Zelfde functionaliteit als Photoshop met betrekking tot optimale afbeeldingskwaliteit.

Bron: Visma doc / Visma-Space kanaal

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.