Elke keer als je een afbeelding uploadt, maakt de Websitemaker maximaal 5 verkleinde kopieën van de afbeelding. En voegt vervolgens automatisch de afbeelding met de juiste grootte in op de desktop-, tablet- en mobiele websites. Zo zien jouw website bezoekers altijd de afbeelding met de juiste grootte voor hun apparaat.
Geoptimaliseerde beeldformaten per apparaat:
| Beeldtype | Afbeeldingsbreedte |
| Achtergrond | 1980px |
| Desktop | 1660px |
| Tablet | 1440px |
| Mobiel | 600 px |
| Thumbnail | 150 px |
De Websitemaker vergroot de grootte van een geüploade afbeelding niet en maakt alleen afbeeldingen die kleiner zijn dan de originele geüploade afbeelding.
Als er bijvoorbeeld een afbeelding met een breedte van 2000 px wordt geüpload, worden er 5 nieuwe geoptimaliseerde kopieën gemaakt. Als een afbeelding met een breedte van 100 px wordt geüpload, worden er geen nieuwe afbeeldingen gemaakt.
Richtlijnen voor afbeeldingsgrootte per widget
Carrousel weergave
De carrousel weergave widget wordt normaal gesproken gebruikt met grotere afbeeldingen voor een dramatisch effect. Carrousels strekken zich gewoonlijk van begin tot eind uit, dus het is goed om afbeeldingen met meer breedte te gebruiken die binnen de carrousel passen. Gebruik voor "vierkante" carrousels een even hoog als breedteverhouding zoals 1:1.
Het is het beste om afbeeldingen met een goede opvulling te kiezen, zodat de hoofdinhoud van de afbeelding niet wordt afgesneden wanneer de grootte wordt gewijzigd. De beeldverhoudingen van de verschillende afbeeldingen moeten hetzelfde zijn in de carrousel voor consistentie in het ontwerp
- Veelgebruikte beeldverhoudingen: 16:9, 3:4
- Veelgebruikte resolutie formaten (px): 1600x900, 1280x720, 1280x960
Apparaatspecifieke opmerkingen: mobiele apparaten hebben vaak de tegenovergestelde beeldverhouding in vergelijking tot desktop apparaten. Mogelijk kun je hiervoor dan het beste de functie "verbergen op apparaat" gebruiken en apparaatspecifieke inhoud maken voor een betere mobiele weergave. Meer informatie vind je hier.
Galerij
De galerij widget is de meest flexibele widget om met afbeeldingen te gebruiken, alleen al omdat er zoveel lay-out opties zijn. Je kunt bijvoorbeeld een galerij maken waarbij alle afbeeldingen hetzelfde formaat hebben , of een mozaïek met een andere grootte per afbeelding .
De beeldverhouding van afbeeldingen in de galerij moet weerspiegelen hoe je deze wilt weergeven.
- Galerijen in vierkante stijl moeten bijvoorbeeld een verhouding van 1:1 hebben.
- Galerijen met hoge (verticale) afbeeldingen zouden langere hoogteverhoudingen moeten hebben, zoals bijvoorbeeld 2:5 of 200 bij 500 pixels.
De beeldverhoudingen van alle afbeeldingen in de galerij moeten hetzelfde zijn voor consistentie in het ontwerp. Laat wat opvulling achter in de afbeelding als je het "zweefeffect" wilt gebruiken, zodat jouw afbeeldingen niet worden afgesneden.
- Algemene beeldverhoudingen: elke beeldverhouding.
- Algemene resolutieformaten (px): elke resolutie, maar niet groter dan 1500px voor paginasnelheid.
Iconen
Pictogrammen zijn een zeer belangrijk onderdeel van elke site. Het zijn visuele markeringen voor informatie en kunnen een moderne uitstraling aan uw site toevoegen. Je kunt transparante PNG's, JPEG's of SVG's gebruiken.
- Algemene beeldverhoudingen: Over het algemeen 1:1, maar elke beeldverhouding werkt.
- Gangbare resolutieformaten (px): 200x200, 80x80 of elke resolutie. SVG's kunnen elke resolutie zijn.
Favicons
Favicons worden niet gebruikt op je daadwerkelijke site, maar het is wat wordt weergegeven op het tabblad wanneer gebruikers je website openen.
- Vereiste beeldverhouding: 1: 1
- Toegestane resolutiegroottes (px): 24x24, 36x36, 48x48
Beeldverhouding versus resolutie
Aspectverhouding is de "verhouding" van het breedte- en hoogtekenmerk van een afbeelding. Een beeldverhouding van 16:9 kan een afbeelding van 16x19 px zijn of een afbeelding van 1600x900 px. Het is eigenlijk elke maat afbeelding met een verhouding van 16:9.
Verschillende beeldverhoudingen per apparaat
Terwijl de Websitemaker beelden optimaliseert op jouw site, is het niet echt een resize van het ontwerp van de afbeeldingen op jouw site. Als je een afbeelding op de desktop versie gebruikt met een beeldverhouding van 16:9, ziet deze er perfect uit op de desktop versie, aangezien een desktopapparaat breed is. Een mobiel apparaat is echter veel kleiner en daarom zal een beeldverhouding van 16:9 er soms klein uitzien.Om dit te compenseren, kun je gebruik maken van de opties om specifieke versies te maken voor die apparaten of je kunt het formaat van de afbeeldingen aanpassen - veranderingen in grootte zijn apparaat onafhankelijk.
Overwegingen
groter is niet altijd beter
Het uploaden van de grootste resolutie voor jouw website garandeert dat de afbeeldingen van je site een hoge resolutie hebben, maar het is goed om in gedachten te houden dat grote afbeeldingen ook een drastisch effect hebben op de paginasnelheid. Omdat afbeeldingen met een hoge resolutie automatisch worden verkleind, merken gebruikers normaal gesproken het verschil in resolutie niet op. Het is beter om afbeeldingen te uploaden die al de grootte hebben zoals ze bedoeld zijn om te worden gebruikt. Als je bijvoorbeeld een afbeelding van 300 bij 300 pixels op je site hebt, wil je deze niet uploaden als een afbeelding van 4000 bij 4000 pixels.