Tips voor het aanpassen van het formaat van afbeeldingen op je site.

Een beeldverhouding is een evenredige relatie tussen de breedte en hoogte van een afbeelding. In wezen beschrijft het het masker van een afbeelding.

Beeldverhoudingen worden geschreven als een formule van breedte tot hoogte, zoals deze: 3:2.

Een vierkante afbeelding heeft bijvoorbeeld een beeldverhouding van 1:1, omdat de hoogte en breedte gelijk zijn. De afbeelding kan 500px × 500px of 1500px × 1500px zijn, en de beeldverhouding blijft 1:1.

Een ander voorbeeld: een afbeelding in staand formaat kan een verhouding hebben van 2:3. Bij deze beeldverhouding is de hoogte 1,5 keer zo groot als de breedte. De afbeelding kan bijvoorbeeld 500px × 750px, 1500px × 2250px, enzovoort zijn.

Bekijk een video

Beeldverhoudingen en Squarespace

Met veel stijlopties kun je beeldverhoudingen kiezen voor verschillende soorten afbeeldingen, zoals uitgelichte afbeeldingen voor blogposts, galerie-afbeeldingen of producten.

• Als je bijvoorbeeld een beeldverhouding van 3:2 kiest voor uitgelichte afbeeldingen van blogposten, worden alle uitgelichte afbeeldingen op je blogpagina bijgesneden als dit Masker.
• Omdat afbeeldingen omhoog of omlaag worden geschaald om in verschillende browserbreedtes te passen, hebben ze geen exacte afmetingen (zoals 750px × 500px), maar behouden ze altijd hetzelfde Masker.
• Begin met afbeeldingen die de zelfde beeldverhouding hebben. Dit helpt je voorspellen hoe ze worden bijgesneden.
• Je kunt de hoogte van sommige afbeeldingblokken aanpassen met behulp van de bijsnijdgreep. Voor meer informatie over het bijsnijden van je afbeeldingen, bezoek Problemen oplossen met bijsnijden.

De exacte opties voor beeldverhouding hangen af van je versie en sjabloon. Hier is een voorbeeld van de blogpagina in de Brine-sjabloon:

Sommige stijlaanpassingen geven je de optie om beeldverhoudingen te negeren. In deze gevallen behouden je afbeeldingen de bijbehorende maskers. Bijvoorbeeld, in de Skye -sjabloonblogpagina kun je kiezen voor Afbeelding bijsnijden: Geen.

Je bijsnijden tot een beeldverhouding

Afgezien van het gebruik van ingebouwde stijlopties, wil je misschien een afbeelding handmatig bijsnijden tot een bepaalde beeldverhouding. Bijvoorbeeld, als je productafbeeldingen gebruikt met dezelfde beeldverhouding, worden ze allemaal op dezelfde manier bijgesneden op je site.

Optie 1 - Bijsnijden naar een vooraf ingesteld masker

Gebruik de ingebouwde afbeeldingseditor om afbeeldingen bij te snijden tot een specifiek masker. Na het openen van de editor, gebruik de Bijsnijden-tool om te kiezen uit vooraf ingestelde beeldverhoudingen.

Tip: Als je dit liever doet voordat je de afbeelding uploadt, bieden sommige derde tools vooraf ingestelde beeldverhoudingsopties.

Optie 2 - Aangepaste afmetingen

Om afbeeldingen bij te snijden naar een aangepaste beeldverhouding die niet door onze ingebouwde beeldeditor wordt aangeboden, gebruik je een derde-partij-editor.

Omdat afbeeldingen niet dezelfde afmetingen hoeven te hebben om dezelfde beeldverhouding te behouden, is het beter om ze bij te snijden tot een specifieke verhouding dan te proberen de exacte afmetingen aan te passen. Voor het beste resultaat snijd je de kortere kant bij op basis van de langere kant.

• Als uw afbeelding bijvoorbeeld 1500px × 1200px is en u een beeldverhouding van 3:1 wilt, snijdt u de kortere zijde bij zodat de afbeelding 1500px × 500px wordt.
• Vergroot de langere zijde niet; dit kan je afbeelding onscherp maken.

Om te bepalen hoe lang de kortere kant moet zijn, gebruik je een beeldverhoudingscalculator zoals deze. Merk op dat dit een toepassing van derden is die buiten het bereik van de Squarespace-ondersteuning valt.

1. Zoek de afmetingen van de afbeelding op je computer.
2. Voer in de beeldverhoudingscalculator W1 en H1 aan de linkerkant in om de huidige beeldverhouding te bepalen.
3. Pas de kortere zijde aan totdat je de gewenste verhouding hebt gevonden.

Banners op de pagina

Paginabanners hebben geen vooraf ingestelde beeldverhoudingen of afmetingen. Dat komt omdat ze zich uitrekken en van Masker veranderen, zodat ze geschikt zijn voor verschillende browsers. Houd er rekening mee:

• Voordat je afbeeldingen naar je banners uploadt, volg je onze tips voor het opmaken van bannerafbeeldingen.
• Misschien wil je onze ingebouwde afbeeldingseditor gebruiken om de afbeelding bij te snijden. Voor hulp bij het bijsnijden van banners, bezoek Problemen met bijsnijden oplossen.
• Bij de meeste sjablonen kun je de grootte van je banner aanpassen, inclusief de hoogte.
• Voor banners met een vaste hoogte, zoals in de Montauk- of Skye-sjablonen, zorg je ervoor dat al je bannerafbeeldingen dezelfde beeldverhouding hebben. Dit creëert een uniforme uitstraling.

Beeldverhoudingen voor je productafbeeldingen

Het is belangrijk om je productafbeeldingen aantrekkelijk te maken voor potentiële klanten. Om hierbij te helpen, kun je de beeldverhouding instellen voor je productafbeeldingen op winkelpagina's en productdetailpagina's. Zie productafbeeldingen voor meer informatie over hoe je je productafbeeldingen kunt stijlen.

Als je productafbeeldingen bijgesneden lijken, bezoek dan Problemen met bijsnijden oplossen.

Beeldverhoudingen voor video's

Video's die je direct naar je site uploadt worden meestal weergegeven in een speler met een 16:9-beeldverhouding, maar de video wordt niet bijgesneden om te passen, dus zwarte balken of lege ruimte kunnen aan de zijkant van video's met andere beeldverhoudingen verschijnen. Video's die zijn geüpload naar achtergronden van gedeelten worden bijgesneden en ingezoomd om de grootte van de achtergrond te vullen.

Voor ingebedde video's bepaalt de miniatuur van je videohostingdienst de beeldverhouding van je video. Als je videoblokken in rijen plaatst of rastergalerieën gebruikt, kunnen de rijen ongelijk zijn.

Als je galerieblokken en galeriepagina's gebruikt (alleen versie 7.0) en de video's niet correct worden weergegeven, wijzig dan de sitestijlen:

• Schakel voor galerieblokken Afbeeldingen bijsnijden in om video's een uniforme beeldverhouding te geven.
• Stel voor galeriepagina's de beeldverhouding in op een willekeurige instelling, behalve Auto.

Beeldverhoudingen als percentages

Voor Index-rastergalerieën in de Brine-sjabloonfamilie wordt de aanpassing van de beeldverhouding weergegeven als een percentage dat je met een diavoorstelling kunt wijzigen.

• De diavoorstelling toont waarden van 0 - 160.
• Als je de waarde op 100 instelt, krijg je vierkante afbeeldingen.
• Waarden onder de 100 geven een horizontale afbeelding.
• Waarden boven de 100 zijn staand georiënteerd.

Om een exacte beeldverhouding te krijgen, deel je de hoogte door de breedte. Bijvoorbeeld:

• Beeldverhouding 2:3: 3 ÷ 2 = 1,5, dus je zou de diavoorstelling naar 150 slepen.
• 3:2 beeldverhouding: 2 ÷ 3 = 0,667, Dus je zou 66,7 invoeren naast de diavoorstelling.

Voorbeelden van beeldverhoudingen

Hier zijn een paar veelvoorkomende beeldverhoudingen en hoe ze eruitzien.