Formaat en schaal van afbeeldingen in moderne SharePoint-pagina's

Formaat en schaal van afbeeldingen in moderne SharePoint-pagina's

Moderne pagina's en webonderdelen zijn ontworpen om volledig te reageren op verschillende apparaten. Dat betekent dat afbeeldingen die in webonderdelen worden gebruikt, verschillend 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 mooi uit te zien op mobiele apparaten, en automatische schaal van afbeeldingen zorgt voor een aantrekkelijke ervaring.

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 shape onderhoudt op verschillende apparaten en in verschillende indelingen. Afbeeldingen worden automatisch bijgesneden 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 mooi uitzien op uw pagina's.

De beste afbeeldingsgrootte voor uw pagina hangt af van de volgende factoren:

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

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

  • Indeling webonderdeel: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. Deze wordt meestal uitgedrukt als twee getallen, zoals 3:2, 4:3 of 16:9. De breedte is altijd het eerste getal. Een verhouding van 16:9 kan bijvoorbeeld een breedte van 1600 pixels en 900 pixels hoog hebben. Het kan ook gaan om combinaties van 1920 x 1080, 1280 x 720 of een andere combinatie van breedte en hoogte die kunnen worden berekend voor een waarde van 16:9. U kunt online berekeningen voor de verhouding van de breedteverhouding vinden en in enkele hulpprogramma's voor fotobewerking om de verhouding van de afbeeldingen te bepalen. 

Voorbeelden van de verhouding 16:9 en 4:3.

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

Kolomindelingen

Een pagina kan worden ingedeeld met secties die verschillende kolomtypen en indelingen bevatten, zoals kolommen met volledige breedte, één kolom, twee kolommen, drie kolommen, een derde van de linkerkolom en een derde rechterkolom. Een algemene regel voor afbeeldingen die naar verwachting de breedte van een kolom vullen, is dat ze ten minste even breed zijn als de kolom waarin ze zijn 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 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 over de volle breedte van het scherm weergegeven, met een automatische hoogte op basis van de schermgrootte.

De hoogte van afbeeldingen die binnen andere kolomindelingen worden geplaatst, is afhankelijk van de hoogte-breedteverhouding. Hier volgen richtlijnen voor hoogte/breedte voor de hoogte-/breedteverhouding 16:9 en 4:3 (afgerond op de dichtstbijzijnde pixel). Dit is bijvoorbeeld handig om uw afbeeldingen op een juiste schaal te houden voor mobiele apparaten.

ASPECT RATIO

INDELING

16 x 9

Width x Height in pixels

4 x 3

Width x Height 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 voor webonderdeel

De indelingen in de webonderdelen die u gebruikt, zijn ook van invloed op de schaal van uw afbeeldingen. In de volgende voorbeelden worden verschillende webonderdelen en hun indelingen in één kolom en de in elke kolom gebruikte aspect-breedteverhoudingen gegeven.

Kijk eens naar deze afbeelding met een oorspronkelijke verhouding van 16:9:

Voorbeeld van 16_9-afbeelding

Hieronder volgen voorbeelden van deze afbeelding die wordt weergegeven in een pagina-indeling met één kolom, in verschillende webonderdelen en indelingen.

Webonderdeel Hero

De volgende aspectverhoudingen voor de indelingen Tegels en Lagen zijn:

  • Tegels: de hoogte van het webonderdeel wordt geschaald naar een hoogte-breedteverhouding van 8:3 en afbeeldingen binnen de schaal van het webonderdeel met een hoogte-breedteverhouding van 4:3.

  • Lagen: een afzonderlijke laag wordt geschaald naar een hoogte-breedteverhouding van 8:3 en afbeeldingen binnen elke laagschaal met een hoogte-breedteverhouding van bijna 16:9.

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

Hier is een voorbeeld van een afbeelding in de indeling Lagen (boven) en Tegels (onder)

Voorbeeld van afbeeldingen van hero-webonderdeel in lagen- en tegelindelingen

Webonderdeel Gemarkeerde inhoud

16:9 is de verhouding tussen carrousel, Filmstrip en Kaarten.

Hier is een voorbeeld van een afbeelding die wordt weergegeven in de indeling Filmstrip (boven) en kaarten (onder).

Voorbeelden van gemarkeerde webonderdeelinhoud

Webonderdeel Afbeelding

Afbeeldingen worden uitgebreid naar de breedte van de sectie met het webonderdeel. U kunt de aspect-breedteverhouding of het vrije bijsnijden wijzigen met de werkbalk Afbeelding of de grepen voor het wijzigen van de afbeelding gebruiken om de afbeelding groter of kleiner te maken.

Hier is een voorbeeld van bijsnijdmarkeringen (blauwe lijnen) bij 4:3

Afbeelding met bijsnijdmarkeringen bij 4:3

Webonderdeel Afbeeldingengalerie

De volgende aspect-breedteverhoudingen worden in verschillende indelingen gebruikt:

  • De indeling Metsers respecteert de verhouding van alle weergegeven afbeeldingen: 16:9, 1:1, 4:3, en meer. 

  • Tegels, kaarten: 4:3

Hier is een voorbeeld van een afbeelding die wordt weergegeven in de indeling Tegels (boven) en Metsers (onder)

Voorbeeld van de indelingen Tegels en Metselen voor het webonderdeel Afbeeldingengalerie

Webonderdeel Nieuws -

Afhankelijk van de indeling kunnen afbeeldingen in het webonderdeel Nieuws 4:3, 16:9 of 21:9 zijn. Hier is een voorbeeld van afbeeldingen in een belangrijk verhaal en een indeling met carrousel.

Voorbeelden van nieuwsindelingen

Gebied voor paginatitel

Afbeeldingen zien er het beste uit wanneer ze liggend of 16:9 of groter zijn in de beeldverhouding en ten minste 1 MB groot zijn. Zorg er ook voor dat u een focus hebt op het houden van het belangrijkste deel van de afbeelding in beeld, met name wanneer de afbeelding wordt gebruikt in miniaturen, nieuwsindelingen en zoekresultaten.

Voorbeeld (oorspronkelijke afbeelding 16:9) met een focus op de luidspreker.

Voorbeeld van een 16:9-afbeelding in het gebied voor de paginatitel.

Miniatuur van pagina

Paginaminiaturen worden weergegeven op plaatsen zoals zoekresultaten, gemarkeerde inhoudsresultaten, nieuwsberichten en meer. De miniatuur is standaard afkomstig van het gebied met de paginatitel of van het webonderdeel dat in de eerste volgorde op de pagina staat (zoals de linkerbovenhoek van een pagina-indeling). U kunt de standaardwaarde overschrijven en de paginaminiatuur wijzigen. Als u dit doet, kunt u het beste een afbeelding met een beeldverhouding van 16:9 gebruiken.

Voorbeeld (oorspronkelijke afbeelding 16:9)

Voorbeeld van een miniatuurafbeelding van een pagina in het webonderdeel Gemarkeerde inhoud

Webonderdeel Snelle koppelingen 

Het webonderdeel Snelkoppelingen heeft zes verschillende indelingen. Hier zijn de aanbevolen verhoudingsverhoudingen:

  • Filmstrip, Raster, Knop: 16:9

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

Hier is een voorbeeld van een afbeelding in een Compacte indeling (boven) en een indeling met Filmstrip (onder)

Voorbeelden van afbeeldingen in indelingen voor Snelkoppelingen

Tips: 

  • Wanneer u een afbeelding toevoegt aan het gebied voor de paginatitel of het webonderdeel Hero, kunt u het focuspunt het beste in het gebied van de afbeelding plaatsen dat u altijd wilt weergeven. Zie Het focuspunt van een afbeelding wijzigen in het webonderdeel Hero en het titelgebied op een pagina aanpassen voor meer informatie over het instellen van een focus op deze twee scenario's.

  • Focuspunt

Aanbevelingen voor sitekopafbeeldingen

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

Element

Beschrijving

Aanbeveling

Width x Height in pixels

Sitelogo

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

192 x 64 

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

Miniatuur van sitelogo

Een vierkant logominiatuur die wordt gebruikt als er geen sitelogo wordt geüpload of op plaatsen waar een vierkant moet worden opgemaakt

Dit element is vereist.

64 x 64 

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

Sitelogo uitgebreide indeling

De uitgebreide koptekstindeling heeft een uitgebreide breedte van het sitelogo.

300 x 64p

Indeling: JPEG, PNG, SVG

Achtergrondafbeelding uitgebreide indeling

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

2560 x 164

Indeling: JPEG, PNG

Meer hulp nodig?

Uw Office-vaardigheden uitbreiden
Training verkennen
Als eerste nieuwe functies krijgen
Deelnemen aan Office Insiders

Was deze informatie nuttig?

Bedankt voor uw feedback.

Hartelijk dank voor uw feedback! Het lijkt ons een goed idee om u in contact te brengen met een van onze Office-ondersteuningsagenten.

×