Moderne pagina's en webonderdelen zijn ontworpen om volledig responsief te zijn op alle apparaten, wat betekent dat de schaal van afbeeldingen die in webonderdelen worden gebruikt, afhankelijk van waar ze worden weergegeven, de gebruikte indeling en het apparaat waarop ze worden weergegeven. Moderne pagina's zijn bijvoorbeeld ontworpen om er geweldig uit te zien op mobiele apparaten, en automatische schaal van afbeeldingen helpt bij het creëren van die aantrekkelijke ervaring.
Welke afbeeldingsformaten werken het beste?
Vanwege het responsieve pagina-ontwerp is er geen specifieke hoogte of breedte in pixels die ervoor zorgt dat een afbeelding een specifieke vorm behoudt op alle apparaten en in indelingen. Het formaat en de bijsnijding van afbeeldingen worden automatisch aangepast om het best mogelijke resultaat te laten zien op verschillende apparaten en indelingen. Er zijn echter enkele richtlijnen die u kunnen helpen ervoor te zorgen dat uw afbeeldingen er geweldig uitzien op uw pagina's.
Het vinden van de beste afbeeldingsformaten voor uw pagina is afhankelijk van de volgende factoren:
- Hoogte-breedteverhouding: de relatie tussen hoogte en breedte van afbeeldingen
- Kolomindeling: het type en het aantal kolommen op de pagina
- Webonderdeelindeling: de indeling die u kiest voor het webonderdeel waarin de afbeelding wordt gebruikt
Hoogte-breedteverhouding
Een hoogte-breedteverhouding is de verhouding tussen breedte en hoogte van afbeeldingen. Dit 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 1600 pixels breed en 900 pixels hoog zijn. Of het kan 1920 x 1080, 1280 x 720 of andere breedte/hoogte-combinaties zijn die kunnen worden berekend voor een uitkomst van 16:9. U kunt online en in sommige fotobewerkingsprogramma's beeldverhoudingcalculators vinden om u te helpen de hoogte-breedteverhoudingen van uw afbeeldingen te bepalen.
In de meeste gevallen werken afbeeldingen in moderne webonderdelen het beste op verschillende indelingen en apparaten wanneer deze een hoogte-breedteverhouding hebben van 16:9 of 4:3, afhankelijk van de indeling.
Kolomindelingen
Een pagina kan worden ingedeeld met secties die verschillende kolomtypen en indelingen bevatten, zoals kolommen over de volle breedte, één kolom, twee kolommen, drie kolommen, een derde linker- en een derde rechterkolommen. Een algemene regel is dat afbeeldingen die naar verwachting de breedte van een kolom vullen, 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 alle kolomindelingen:
| Indeling | Breedte in pixels |
|---|---|
| Kolom over volle breedte | 1920 |
| Eén kolom | 1204 |
| Twee kolommen | 586 per kolom |
| Drie kolommen | 380 per kolom |
| Een derde linkerkolom | 380 voor de linkerkolom; 792 voor rechterkolom |
| Een derde rechterkolom | 792 voor linkerkolom; 380 voor rechterkolom |
Omdat pagina's snel reageren, worden afbeeldingen in kolommen met volledige breedte altijd weergegeven op de volledige breedte van het scherm, met een automatische hoogte op basis van de schermgrootte.
De hoogte van afbeeldingen die in andere kolomindelingen worden geplaatst, is afhankelijk van uw hoogte-breedteverhouding. Hier volgen richtlijnen voor hoogte/breedte voor de hoogte-breedteverhoudingen 16:9 en 4:3 (afgerond omhoog/omlaag op de dichtstbijzijnde pixel). Dit is handig om de breedte en hoogte van uw afbeeldingen zodanig te beperken dat de schaal van de afbeeldingen op de juiste manier wordt aangepast voor mobiele apparaten, bijvoorbeeld:
| HOOGTE-BREEDTEVERHOUDING 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.
| Webonderdeel | Hoogte-breedteverhoudingen |
|---|---|
| Webonderdeel Hero | De volgende hoogte-breedteverhoudingen voor de indelingen Tegels en Lagen zijn:
|
| Webonderdeel Gemarkeerde inhoud | De hoogte-breedteverhouding 16:9 is voor de indelingen Carrousel, Filmstrip en Raster. Hier volgt een voorbeeld van een hoogte-breedteverhouding van 16:9. De eerste afbeelding toont de Filmstrip-lay-out en de tweede toont de Grid-lay-out: 
|
| Webonderdeel Afbeelding | Afbeeldingen worden vergroot naar de breedte van de sectie die het webonderdeel bevat. Hier volgt een voorbeeld van een afbeelding in het webonderdeel Afbeelding waarvoor de hoogte-breedteverhouding 16:9 wordt gebruikt. 
Je hebt ook de mogelijkheid om de hoogte-breedteverhouding te wijzigen of uit de vrije hand bij te snijden met het hulpprogramma voor beeldbewerking of gebruik de formaatgrepen om je afbeelding groter of kleiner te maken. 
|
| Webonderdeel Afbeeldingengalerie | De volgende hoogte-breedteverhoudingen kunnen in verschillende indelingen worden gebruikt:
|
| Webonderdeel Nieuws | Afhankelijk van de indeling kunnen afbeeldingen in het webonderdeel Nieuws de volgende afmetingen: 4:3, 16:9 of 21:9 hebben. Hier ziet u een voorbeeld van afbeeldingen in een Top story en een carrousellay-out: 
|
| Gebied met paginatitel | Afbeeldingen zien er het beste uit als ze liggend zijn, een hoogte-breedteverhouding hebben (16:9 of groter) en als ze ten minste 1 MB groot zijn. Zorg er ook voor dat u een aandachtspunt instelt om het belangrijkste deel van de afbeelding in beeld te houden, vooral wanneer de afbeelding wordt gebruikt in miniaturen, nieuwsindelingen en zoekresultaten. Voorbeeld (oorspronkelijke afbeelding 16:9) met het middelpunt op de spreker: 
|
| Miniatuur van pagina | Paginaminiaturen worden weergegeven in bijvoorbeeld zoekresultaten, resultaten van gemarkeerde inhoud, nieuwsberichten en meer. Standaard is de miniatuur afkomstig van het titelgebied van de pagina of van het webonderdeel dat zich in de eerste volgorde op de pagina bevindt (zoals de linkerbovenhoek van een pagina-indeling). U kunt de standaardwaarde overschrijven en de miniatuur van de pagina wijzigen. Wanneer je dit doet, kun je het beste een afbeelding gebruiken met een hoogte-breedteverhouding van 16:9. Voorbeeld (originele afbeelding 16:9): 
|
| Webonderdeel Snelkoppelingen | Het webonderdeel Snelle koppelingen heeft zes verschillende indelingen. Dit zijn de vooraf ingestelde hoogte-breedteverhoudingen:
|
Tip
Wanneer u een afbeelding toevoegt aan een paginatitelgebied of webonderdeel Hero, kunt u het middelpunt ook het beste instellen in het gebied van de afbeelding dat u altijd wilt weergeven. Zie Use the Hero web part and Create and Create and use modern pages on a SharePoint site (Het webonderdeel Hero gebruiken en moderne pagina's maken en gebruiken) voor meer informatie over het instellen van een aandachtspunt voor deze twee scenario's.
Aanbevelingen voor afbeeldingen van sitekopteksten
Naast pagina's kunt u aangepaste logo's of afbeeldingen toevoegen in een uitgebreide indeling. Hier vindt u aanbevelingen voor de grootte van die onderdelen.
| Element | Beschrijving | Aanbeveling Breedte x hoogte in pixels |
|---|---|---|
| Sitelogo | Een 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 aan een groep zijn verbonden) |
| Miniatuur van sitelogo | Een vierkante miniatuur van een logo die wordt gebruikt als er geen sitelogo is geüpload of als een vierkante indeling is vereist. Dit element is vereist. |
64 x 64 Indeling: PNG, JPEG, SVG (SVG is niet toegestaan op sites die aan een groep zijn verbonden) |
| Sitelogo met uitgebreide indeling | De uitgebreide koptekstindeling heeft een uitgebreide breedte van het sitelogo. | 300 x 64 Indeling: JPEG, PNG, SVG |
| Achtergrondafbeelding met uitgebreide indeling | Een nieuwe achtergrondafbeelding die kan worden gebruikt met de uitgebreide koptekst. | 2560 x 164 Indeling: JPEG, PNG |