Vereisten en best practices voor het uploaden van afbeeldingen.

Squarespace neemt het giswerk weg bij het formatteren van je afbeeldingen voor weergave op het web. We maken zeven varianten van elke geüploade afbeelding om optimale weergave op elk schermformaat te garanderen.

Gebruik deze handleiding om te begrijpen hoe afbeeldingen op het web worden weergegeven, meer te leren over de vereisten voor afbeeldingen in Squarespace en de opmaakrichtlijnen voor je afbeeldingen te vinden. Ga voor het oplossen van problemen naar Problemen met het uploaden en formatteren van afbeeldingen.

Na het uploaden van afbeeldingen naar je site, bewaar je alle afbeeldingsbestanden op je computer om het risico te verkleinen dat je de originele bestanden verliest.

Tip: Laat je site opvallen met afbeeldingen van hoge kwaliteit die goed geplaatst zijn. Zie onze gids over het kiezen van overtuigende afbeeldingen voor meer informatie.

Bekijk een video

Hoe je afbeeldingen op het web ziet

Verschillende factoren beïnvloeden hoe je afbeeldingen op websites worden weergegeven:

• Specificaties voor afbeeldingsbestanden - Bekijk onze vereisten voor afbeeldingen om er zeker van te zijn dat je afbeeldingen naar je site kunt uploaden. Standaard worden alle afbeeldingen die naar je site worden geüpload omgezet naar WebP-formaat.
• Beeldbreedte – Afbeeldingen met een kleine breedte zien er misschien geweldig uit op mobiele apparaten, maar wazig op computers, omdat computerschermen breder zijn dan mobiele apparaten.
• Beeldmasker - Ook bekend als beeldverhouding, dit is de verhouding tussen de hoogte en breedte van je afbeelding. Afbeeldingen die aan galerijen worden toegevoegd, worden meestal het beste weergegeven als alle afbeeldingen een vergelijkbaar Masker hebben. Ga voor meer informatie naar Beeldverhoudingen begrijpen. We hebben ook voorbeelden van gebruikelijke beeldverhoudingen.
• Beeldverpakkingen en bijsnijden - Elke afbeelding op je site bevindt zich in een verpakking, een onzichtbaar vak dat bepaalt hoe de afbeelding wordt weergegeven in relatie tot andere inhoud op de pagina. Banners hebben bijvoorbeeld een rechthoekige verpakking. Om bijsnijden te beperken, zorg je ervoor dat de vorm van je afbeelding past bij de vorm van de verpakking. Voor meer informatie, bezoek Problemen oplossen met bijsnijden.
• Responsive design – Elke Squarespace-site heeft responsive design, dat automatisch de grootte van je afbeeldingen aanpast, afhankelijk van het apparaat van je bezoeker.

Vereisten voor afbeeldingen

Controleer voordat je afbeeldingen uploadt naar je site of je afbeeldingen voldoen aan onze afbeeldingsvereisten. Je kunt het afbeeldingsbestand zelf niet meer wijzigen nadat je het hebt geüpload, je kunt alleen het uiterlijk ervan aanpassen met onze ingebouwde afbeeldingseditor. Om de afbeeldingseigenschappen te wijzigen, formatteer je de afbeelding op je computer en upload je deze opnieuw.

Afbeeldingsattribuut	Specificatie	Opmerking
Bestandstype	Alleen .jpg, .gif, .png, of .webp	.pdf, .psd, en .doc De bestanden zijn niet compatibel. Email Campaigns van Squarespace bieden geen ondersteuning voor .webp formaat.
Bestandsgrootte	20 MB limiet	Om je site snel te laten laden, raden we aan afbeeldingen van 500 KB of minder te uploaden.
Bestandsnaam	Gebruik alleen letters, cijfers, laag streepjes en koppeltekens.	Geaccentueerde letters, vraagtekens, percentagetekens en ampersands kunnen misschien niet worden geüpload of kunnen onverwachte problemen veroorzaken.
Afbeeldingsbreedte	Een breedte van 2500 pixels is ideaal voor de meeste afbeeldingen.	Door afbeeldingen met een breedte van 2500px te uploaden, krijgt u toegang tot het volledige assortiment verkleinde afbeeldingen dat wij maken, terwijl de uploadtijd tot een minimum wordt beperkt. Je kunt afbeeldingen met een kleinere breedte uploaden om de maximale resolutie te beperken die op je site wordt weergegeven. Dit kan helpen om de laadtijd van de site op sommige apparaten te verkorten, of om de kwaliteit van de afbeelding die bezoekers kunnen downloaden te beperken, maar afbeeldingen smaller dan 1500px breed kunnen er wazig uitzien. We raden verschillende breedtes aan voor sitelogo's, browserpictogrammen en e-mailcampagnes.
Oplossing	120 MP (megapixel) limiet	Om de resolutie van je afbeelding te vinden, gebruik je deze calculator of vermenigvuldig je de afmetingen en deel je door 1.000.000. Een afbeelding van bijvoorbeeld 1500px × 1650px heeft een resolutie van 2,47 MP.
Kleurmodus	RGB (rood, groen, blauw)	CMYK-kleurmodus is alleen bedoeld voor drukwerk en wordt in de meeste browsers niet correct weergegeven. Op Macs kan dit kenmerk Kleurprofiel of Kleurruimte heten.
Kleurprofiel	sRGB	Als afbeeldingen er niet goed uitzien op mobiele apparaten, hebben ze mogelijk geen sRGB-kleurprofiel.
DPI en PPI	n.v.t.	Je hoeft je geen zorgen te maken over DPI en PPI, want die waarden beïnvloeden alleen de afdrukkwaliteit van een afbeelding, niet de weergave ervan op het web.

Deze vereisten en aanbevelingen zorgen ervoor dat je afbeeldingen goed op je site worden weergegeven. Als je veel grote afbeeldingen op je site hebt en merkt dat deze langzaam laadt, bezoek dan De grootte van je pagina verkleinen voor sneller laden.

Tip: Optimaliseer afbeeldingsgroottes door de TinyIMG-extensie te verbinden. TinyIMG vervangt te grote afbeeldingen door gecomprimeerde versies, waardoor pagina's sneller laden met behoud van afbeeldingskwaliteit. Hoewel we samenwerken met derde diensten om ervoor te zorgen dat Squarespace Extensions goed werken, vallen extensies buiten de ondersteuning. We kunnen je helpen met het aansluiten of loskoppelen van je extensies. Neem voor alle andere vragen rechtstreeks contact op met de aanbieder van de extensies.

WebP-bestandstype

Om de prestaties van je site te optimaliseren, worden alle afbeeldingen op je Squarespace-site automatisch weergegeven in het WebP-formaat. Het WebP-afbeeldingsformaat verbetert de laadtijd met behoud van kwaliteit. Vergeleken met .jpg en .png Bestanden van vergelijkbare kwaliteit zijn WebP-bestanden kleiner, waardoor ze handig zijn voor het weergeven van veel afbeeldingen. 

Wanneer je een afbeelding uploadt naar Squarespace, converteren we deze naar het WebP-formaat en tonen we die versie in de inhoud van je site. Het originele bestand blijft in je assetbibliotheek, en alle bewerkingen aan het bestand worden toegepast op alle WebP-versies op je site. Je kunt WebP-bestanden ook rechtstreeks naar je site uploaden.

Als je niet wilt dat je afbeeldingen worden geconverteerd naar WebP-bestanden, kun je deze instelling uitschakelen:

1. Open het paneel afbeeldingsinstellingen.
2. Schakel de optie WebP-afbeeldingstype uit.

Alle afbeeldingen op je site keren binnen 24 uur terug naar hun oorspronkelijke formaat.

Zoek de details van je afbeelding

Om te bepalen of jouw afbeelding aan onze eisen voldoet, controleer je de informatie van het afbeeldingsbestand.

Mac

Zoek als volgt de bestandsinformatie van een afbeelding:

1. Selecteer het afbeeldingsbestand op je computer.
2. Druk op Command + I.
3. Klik in het geopende venster op Meer Info.

Windows

Zoek als volgt de bestandsinformatie van een afbeelding:

1. Selecteer het afbeeldingsbestand op je computer.
2. Druk op Alt + Enter.
3. Klik in het geopende venster op Details.

Mobiele apparaten

De stappen om beeldinformatie weer te geven variëren per app, apparaat en besturingssysteem. Bekijk de documentatie voor de applicatie die je gebruikt om foto's te bekijken of te bewerken op je mobiel apparaat.

Opmerking: iPhones en iPads met iOS 11 en later maken afbeeldingen in een hoogefficiënt formaat (HEIF) dat .heic produceert. bestanden. Deze afbeeldingen worden automatisch omgezet naar .jpg wanneer ze worden geïmporteerd of gedeeld op veel platforms, waaronder de Squarespace-app, maar je kunt de instellingen van je telefoon aanpassen om afbeeldingen standaard als .jpg vast te leggen. standaard. Ga voor meer informatie naar de documentatie van Apple.

Transparante achtergronden

Als je een afbeelding zonder achtergrond of achtergrondkleur nodig hebt, bijvoorbeeld voor een logo, gebruik dan een .png. of .webp bestand met een transparante achtergrond. Je kunt hiervoor software van derden gebruiken, of Squarespace-logo gebruiken om er automatisch een te maken met een transparante achtergrond.

Tekst op afbeeldingen

Om tekst toe te voegen aan je afbeelding, raden we aan om de tekst als een overlay toe te voegen in plaats van deze in je afbeelding in te sluiten. Hierdoor is de tekst doorzoekbaar en blijft hij zichtbaar als de afbeelding wordt uitgesneden op kleinere apparaten. Bekijk onze tips voor het toevoegen van overlaytekst aan afbeeldingblokken, banners, galeriepagina's en galerieblokken.

Als je afbeelding tekst bevat, sla deze dan op als een .png-bestand. bestand. Tekst in een .jpg Een bestand wordt vaak onscherp wanneer de afbeelding wordt gecomprimeerd. Een .png-bestand behoudt doorgaans zijn scherpte, vooral als de afbeelding op de oorspronkelijke grootte wordt weergegeven.

Alt-tekst

Houd bij het maken van je afbeeldingen rekening met onze richtlijnen voor alt-tekst. Alt-tekst is belangrijk om toe te voegen aan je afbeeldingen, omdat het je content toegankelijker maakt voor bezoekers die schermlezers gebruiken. Alt-tekst vertelt zoekmachines ook waar de afbeelding over gaat, waardoor de kans groter is dat je site in afbeeldingen zoeken verschijnt.

Als je geen alt-tekst toevoegt aan je afbeeldingen, wordt de bestandsnaam als alt-tekst gebruikt, behalve voor afbeeldingblokken en automatische lay-outs. Je kunt de bestandsnaam wijzigen voor een afbeelding die je al hebt geüpload in de assetbibliotheek.

Hoe worden mijn afbeeldingen aangepast aan verschillende apparaten?

Wanneer je een afbeelding uploadt, maakt Squarespace tot zeven versies van die afbeelding, elk met een andere breedte. De hoogte verandert ten opzichte van de breedte om het Masker van de afbeelding te behouden. Het ingebouwde responsive design van Squarespace kiest automatisch de juiste afbeeldingsgrootte op basis van het scherm van de bezoeker. De breedtes die we creëren zijn:

• 100 pixels
• 300 pixels
• 500 pixels
• 750 pixels
• 1000 pixels
• 1500 pixels
• 2.500 pixels

Om te bekijken hoe je site eruitziet op mobiele apparaten, gebruik je Apparaatweergave.

Moeten je afbeeldingen exacte afmetingen hebben?

Nee. Ons systeem past automatisch de grootte van je afbeeldingen aan, zodat ze groter of kleiner worden voor verschillende apparaatbreedtes. Je hoeft je afbeeldingen dus niet op te maken tot exacte afmetingen, zoals 750px × 500px. Er is bijvoorbeeld geen specifieke eis voor beeldhoogte en -breedte voor afbeeldingblokken, en een andere eis voor afbeeldingen in galeriegedeelten. Volg onze tips over afbeeldingsbreedte om ervoor te zorgen dat je afbeeldingen niet onscherp zijn.

Als je afbeeldingen niet worden weergegeven zoals je wilt:

• Zorg ervoor dat je onze afbeeldingseisen volgt
• Geef je afbeeldingen een stijlvolle uitstraling.
• Problemen met beeldopmaak oplossen

Meer hulp

Zie deze gidsen voor meer informatie over het toevoegen van afbeeldingen op Squarespace:

• Videoserie: alles over afbeeldingen
• Afbeeldingen toevoegen en formaat wijzigen
• Problemen oplossen bij het uploaden van afbeeldingen en het aanpassen van de indeling
• Een site-logo toevoegen
• Afbeeldingen bewerken op je site
• Audio, afbeeldingen en video's toegankelijker maken
• Stock-afbeeldingen zoeken en toevoegen
• Beste praktijken voor stock-afbeeldingen
• Afbeeldingmetagegevens importeren

Naast de bovenstaande handleidingen bieden we ook andere hulpmiddelen aan om je te helpen bij het formatteren van afbeeldingen:

• Vraag advies aan de community in het Squarespace forum.
• Huur een Squarespace-expert in om te helpen.