Afbeeldingsgrootte en schaalaanpassing in moderne SharePoint-pagina's
Applies ToSharePoint in Microsoft 365

Moderne pagina's en webonderdelen zijn ontworpen om volledig responsief te zijn op verschillende apparaten, wat betekent dat afbeeldingen die in webonderdelen worden gebruikt, anders worden geschaald, afhankelijk van waar ze worden weergegeven, welke indeling wordt gebruikt en het apparaat waarop ze worden bekeken. Moderne pagina's zijn bijvoorbeeld ontworpen om er geweldig uit te zien op mobiele apparaten en het automatisch schalen van afbeeldingen helpt die aantrekkelijke ervaring te creëren.

Voorbeelden van pagina's op verschillende apparaten

Welke afbeeldingsgrootten werken het beste?

Vanwege het responsieve paginaontwerp is er geen specifieke hoogte of breedte in pixels die ervoor zorgt dat een afbeelding een specifieke vorm behoudt op verschillende apparaten en indelingen. Afbeeldingen worden automatisch verkleind en bijgesneden om het best mogelijke resultaat weer te geven op verschillende apparaten en indelingen. Er zijn echter enkele richtlijnen die u kunnen helpen ervoor te zorgen dat uw afbeeldingen er goed uitzien op uw pagina's.

Het vinden van de beste afbeeldingsgrootten voor uw pagina is afhankelijk van deze factoren:

  • Hoogte-breedteverhouding: de relatie tussen hoogte en breedte van afbeeldingen

  • Kolomindeling: het type en het aantal kolommen op uw pagina

  • Indeling van webonderdelen: de indeling die u kiest voor het webonderdeel waarin de afbeelding wordt gebruikt

Hoogte-breedteverhouding

Een hoogte-breedteverhouding is de relatie tussen breedte en hoogte van afbeeldingen. Dit wordt meestal uitgedrukt in twee getallen, zoals 3:2, 4:3 of 16:9. De breedte is altijd het eerste getal. Een verhouding van 16:9 kan bijvoorbeeld 1600 pixels breed en 900 pixels hoog zijn. Of het kan 1920 x 1080, 1280 x 720 of een andere combinatie van breedte en hoogte zijn die kan worden berekend op basis van 16:9. U vindt hoogte-breedteverhoudingcalculators online en in sommige hulpprogramma's voor het bewerken van foto's om u te helpen de hoogte-breedteverhoudingen van uw afbeeldingen te bepalen. 

Voorbeelden van hoogte-breedteverhoudingen van 16:9 en 4:3.

In de meeste gevallen werken afbeeldingen in moderne webonderdelen het beste in indelingen en apparaten wanneer ze een hoogte-breedteverhouding van 16:9 of 4:3 hebben, afhankelijk van de indeling.

Kolomindelingen

Een pagina kan worden ingedeeld met secties met verschillende kolomtypen en indelingen, zoals kolommen met volledige breedte, één kolom, twee kolommen, drie kolommen, een derde links en een derde rechts. Een algemene regel voor afbeeldingen die de breedte van een kolom moeten vullen, is dat ze ten minste zo breed zijn als de kolom waarin ze worden geplaatst. Een afbeelding in een webonderdeel afbeelding in één kolom moet bijvoorbeeld ten minste 1204 pixels breed zijn.

Hier volgen de richtlijnen voor de breedte voor elk van de kolomindelingen:

Indeling

Breedte in pixels

Kolom met volledige breedte

1920

Eén kolom

1204

Twee kolommen

586 per kolom

Drie kolommen

380 per kolom

Een derde linkerkolom

380 voor linkerkolom; 792 voor rechterkolom

Een derde rechterkolom

792 voor linkerkolom; 380 voor rechterkolom

Vanwege de responsieve aard van pagina's worden afbeeldingen in kolommen met volledige breedte altijd weergegeven op volledige breedte van uw scherm met een automatische hoogte op basis van de schermgrootte.

De hoogte van afbeeldingen in andere kolomindelingen is afhankelijk van uw hoogte-breedteverhouding. Hier volgen richtlijnen voor hoogte/breedte voor hoogte-breedteverhoudingen van 16:9 en 4:3 (naar boven/omlaag afgerond op de dichtstbijzijnde pixel). Dit is handig om uw afbeeldingen op een breedte en hoogte te houden die geschikt is voor mobiele apparaten, bijvoorbeeld:

ASPECTVERHOUDING

INDELING

16 x 9

Breedte x hoogte in pixels

4 x 3

Breedte x hoogte in pixels

Eén kolom

1204 x 677

1204 x 903

Twee kolommen

586 x 330

586 x 439

Drie kolommen

380 x 214

380 x 285

Een derde linkerkolom

380 x 446 voor linkerkolom; 792 x 446 voor rechterkolom

380 x 594 voor linkerkolom; 792 x 594 voor rechterkolom

Een derde rechterkolom

792 x 446 voor linkerkolom; 380 x 446 voor rechterkolom

792 x 594 voor linkerkolom; 380 x 594 voor rechterkolom

Indelingen van webonderdelen

De indelingen in de webonderdelen die u gebruikt, zijn ook van invloed op de schaal van uw afbeeldingen. In de volgende voorbeelden ziet u verschillende webonderdelen en enkele opties en hoogte-breedteverhoudingen die u kunt gebruiken.

Hero-webonderdeel

De volgende hoogte-breedteverhoudingen voor tegels en lagenindelingen zijn:

  • Tegels: de hoogte van het webonderdeel wordt geschaald volgens een hoogte-breedteverhouding van 8:3 en afbeeldingen in het webonderdeel worden geschaald naar een hoogte-breedteverhouding van 4:3.

  • Lagen: Een afzonderlijke laag wordt geschaald naar een hoogte-breedteverhouding van 8:3 en afbeeldingen in elke laag worden geschaald naar een hoogte-breedteverhouding van 16:9.

  • Op mobiele apparaten wordt een carrouselindeling om 16:9 gebruikt.

Hier volgt een voorbeeld van een afbeelding die wordt weergegeven in de indeling Lagen (boven) en Tegels (onder):

Voorbeeld van afbeeldingen van hero-webonderdelen in indelingen voor lagen en tegels

Webonderdeel Gemarkeerde inhoud

16:9 is de hoogte-breedteverhouding voor de indelingen Carrousel, Filmstrip en Raster.

Hier volgt een voorbeeld van een hoogte-breedteverhouding van 16:9. In de eerste afbeelding ziet u de indeling Filmstrip en in de tweede de indeling Raster:

Het webonderdeel Gemarkeerde inhoud met de indeling Filmstrip.

De indeling Gemarkeerd inhoudsraster met uitgevouwen foto's weergegeven.

Webonderdeel Afbeelding

Afbeeldingen worden uitgebreid tot de breedte van de sectie met het webonderdeel. 

Hier volgt een voorbeeld van een afbeelding in het webonderdeel Afbeelding die gebruikmaakt van de hoogte-breedteverhouding van 16:9.

Een afbeelding in het webonderdeel Afbeelding met de verhouding carrousel 16:9.

U hebt ook de mogelijkheid om de hoogte-breedteverhouding of het bijsnijden met vrije hand te wijzigen met behulp van het bewerkingsprogramma Afbeelding of de formaatgrepen te gebruiken om uw afbeelding groter of kleiner te maken.

Er wordt een foto geopend in het bewerkingsprogramma van SharePoint.

Webonderdeel Afbeeldingengalerie

De volgende hoogte-breedteverhoudingen kunnen in verschillende indelingen worden gebruikt:

  • De indelingen Baksteen en Carrousel respecteren de hoogte-breedteverhoudingen van alle afbeeldingen: 16:9, 1:1, 4:3, enzovoort. 

  • De indeling Raster biedt drie hoogte-breedteverhoudingen: 1:1 vierkant, 16:9 breed en standaard 4:3.

In de eerste afbeelding ziet u de indeling Baksteen in hetwebonderdeel Afbeeldingengalerie (met behoud van de hoogte-breedteverhoudingen 16:9 en 1:1). In de tweede afbeelding ziet u de rasterindeling (met de hoogte-breedteverhouding van 1:1).

Het webonderdeel Afbeeldingengalerie met behulp van de optie voor de indeling van stenen.

Het webonderdeel Afbeeldingengalerie met behulp van de optie rasterindeling.

Webonderdeel Nieuws

Afhankelijk van de indeling kunnen afbeeldingen in het webonderdeel Nieuws 4:3, 16:9 of 21:9 zijn.

Hier volgt een voorbeeld van afbeeldingen in een hoofdverhaal en een carrouselindeling:

Voorbeelden van afbeeldingen voor nieuwsindelingen

Paginatitelgebied

Afbeeldingen zien er het beste uit wanneer ze liggend of 16:9 of hoger zijn in hoogte-breedteverhouding en wanneer ze ten minste 1 MB groot zijn. Zorg er ook voor dat u een focuspunt instelt om het belangrijkste deel van de afbeelding in beeld te houden, met name wanneer de afbeelding wordt gebruikt in miniaturen, nieuwsindelingen en zoekresultaten.

Voorbeeld (oorspronkelijke afbeelding 16:9) met brandpunt ingesteld op de luidspreker:

Voorbeeld van een afbeelding van 16:9 in het paginatitelgebied.

Paginaminiatuur

Paginaminiaturen worden weergegeven op plaatsen zoals zoekresultaten, gemarkeerde inhoudsresultaten, nieuwsberichten en meer. De miniatuur is standaard afkomstig van het paginatitelgebied of van het webonderdeel in de eerste volgorde op de pagina (zoals linksboven in een pagina-indeling). U kunt de standaardinstelling overschrijven en de miniatuur van de pagina wijzigen. Wanneer u dit doet, kunt u het beste een afbeelding met een hoogte-breedteverhouding van 16:9 gebruiken.

Voorbeeld (oorspronkelijke afbeelding 16:9):

Voorbeeld van paginaminiatuurafbeelding in het webonderdeel Gemarkeerde inhoud

Webonderdeel Snelle koppelingen

Het webonderdeel Snelle koppelingen heeft zes verschillende indelingen. Dit zijn de vooraf ingestelde hoogte-breedteverhoudingen:

  • Compact, Lijst, Tegels: 1:1, 4:3

  • Filmstrip, raster, knop: 16:9

In de eerste afbeelding ziet u de indeling Compact in hetwebonderdeel Snelle koppelingen. In de tweede afbeelding ziet u hetzelfde webonderdeel Snelle koppelingen met de indeling Filmstrip.

Het webonderdeel Snelle koppelingen met miniatuurafbeeldingen voor koppelingen.

Het webonderdeel Snelle koppelingen met de verhouding 16:9 voor afbeeldingen.

Tips: 

Aanbevelingen voor sitekoptekstafbeeldingen

Naast pagina's kunt u aangepaste logo's of afbeeldingen toevoegen in een uitgebreide indeling. Hier volgen aanbevelingen voor de grootte van deze elementen.

Element

Beschrijving

Aanbeveling

Breedte x hoogte in pixels

Sitelogo

Groter logo dat niet-vierkant en transparant kan zijn, afhankelijk van het geüploade ontwerp.

192 x 64 

Indeling: PNG, JPEG, SVG (SVG is niet toegestaan op sites die zijn verbonden met groepen)

Miniatuur van sitelogo

Een miniatuur van een vierkant logo die wordt gebruikt als er geen sitelogo wordt geüpload of op plaatsen waarvoor een vierkante indeling is vereist.

Dit element is vereist.

64 x 64 

Indeling: PNG, JPEG, SVG (SVG is niet toegestaan op sites die zijn verbonden met groepen)

Sitelogo voor uitgebreide indeling

De uitgebreide koptekstindeling heeft een uitgebreide breedte van het sitelogo.

300 x 64

Indeling: JPEG, PNG, SVG

Achtergrondafbeelding uitgebreide indeling

Een nieuwe achtergrondafbeelding die kan worden gebruikt met de uitgebreide header.

2560 x 164

Indeling: JPEG, PNG

Meer hulp nodig?

Meer opties?

Verken abonnementsvoordelen, blader door trainingscursussen, leer hoe u uw apparaat kunt beveiligen en meer.

Community's helpen u vragen te stellen en te beantwoorden, feedback te geven en te leren van experts met uitgebreide kennis.