Voeg aantrekkelijke visuals toe aan je site en pas ze aan om ze groter of kleiner weer te geven.

Het gebruik van afbeeldingen is een geweldige manier om tekst op te splitsen, je producten of portfolio te benadrukken en de persoonlijkheid van je merk te laten zien. Je kunt de afbeeldingen die je hebt toegevoegd aan pagina's op je site in grootte aanpassen.

Elke Squarespace-site heeft ook responsive design. Dit betekent dat de afmetingen van je afbeeldingen automatisch veranderen, afhankelijk van het apparaat dat elke bezoeker gebruikt om je site te bezoeken. In deze gids laten we verschillende manieren zien om je afbeeldingen toe te voegen, te vergroten en aan te passen.

Bekijk je een video

Hoe voeg je afbeeldingen toe

Je kunt afbeeldingen aan je site toevoegen door afbeeldingen te uploaden, afbeeldingen die je eerder hebt geüpload te hergebruiken of stock-afbeeldingen toe te voegen. Op de meeste plaatsen op je site waar je afbeeldingen kunt toevoegen, kun je elk van deze opties gebruiken.

Afbeeldingen uploaden

Voeg direct vanaf je apparaat een afbeelding toe aan je site. Zorg ervoor dat je onze opmaakrichtlijnen volgt voordat je uploadt.

Je kunt afbeeldingen uploaden naar specifieke elementen op je site, zoals afbeeldingblokken of galeriegedeelten, of eerst uploaden naar je assetbibliotheek en ze vervolgens toevoegen aan andere delen van je site. Voor meer informatie over waar je afbeeldingen kunt uploaden en links naar gedetailleerde stappen, bekijk onze onderstaande tabel.

Als een geüploade afbeelding niet wordt weergegeven zoals je wilt, bekijk dan onze stappen voor het oplossen van problemen bij het opmaken van afbeeldingen. Als het uploaden van een afbeelding niet lukt, volg dan onze stappen voor het oplossen van browserproblemen en probeer het opnieuw.

Afbeeldingen hergebruiken

Hergebruik elke afbeelding die je al naar je site hebt geüpload. Gebruik de assetbibliotheek om alle geüploade afbeeldingen te bekijken en te beheren. Voor meer informatie, bezoek Afbeeldingen en video's beheren en hergebruiken.

Stock-afbeeldingen

Voeg stock-afbeeldingen toe via onze samenwerkingen met Unsplash en Getty Images. Je kunt ook stock-afbeeldingen hergebruiken op andere plekken op je site.

Afbeeldingen toevoegen in de Squarespace-app

In de Squarespace-app kun je afbeeldingen toevoegen aan elk deel van je site dat ze ondersteunt, zoals galerijgedeelten en afbeeldingblokken. Let op dat sommige pagina's op je site die het toevoegen van afbeeldingen ondersteunen, op andere manieren beperkt kunnen zijn tijdens het bewerken in de app.

Om een afbeelding toe te voegen:

1. Tik op + of Afbeelding toevoegen.
2. Afhankelijk van het afbeeldingsgebied en of je een iOS- of Android-apparaat gebruikt, kun je:
   • Maak een nieuwe foto
   • Een afbeelding uploaden uit je fotobibliotheek
   • Upload een afbeelding uit je bestanden.
   • Kun je een afbeelding hergebruiken?
3. Tik op afbeeldingen om titels, beschrijvingen en doorklik-URL's toe te voegen.

Afhankelijk van het apparaat dat je gebruikt, kun je ook deze tips volgen:

• Op iOS kun je, als je een afbeelding uploadt naar een afbeeldingblok, zoeken naar en stock-afbeeldingen toevoegen.
• Op een iPad kun je afbeeldingen met Split View vanuit je foto's naar de Squarespace-app verslepen.
• Je kunt afbeeldingen toevoegen aan Mijn bibliotheek om opnieuw te gebruiken op een computer. Op iOS kun je afbeeldingen ook hergebruiken in de producteditor. Voor meer informatie, bezoek Afbeeldingen beheren en hergebruiken.

Waar kun je je afbeeldingen toevoegen en stylen.

Er zijn veel plekken waar je afbeeldingen aan je site kunt toevoegen, en deze plekken tonen afbeeldingen op verschillende manieren voor verschillende doeleinden. Na het toevoegen van je afbeeldingen kun je sitestijlen, ontwerppanelen en instellingen voor blokken of paginagedeelten gebruiken om stijlwijzigingen aan te brengen en de weergave aan te passen.

Waar je afbeeldingen toevoegt hangt af van de versie van je site. Bekijk de onderstaande lijst voor meer informatie over verschillende manieren om afbeeldingen toe te voegen en klik op de links voor meer informatie over het toevoegen en aanpassen van afbeeldingen met specifieke functies:

Je kunt niet direct afbeeldingen toevoegen aan sommige blokken, zoals samenvattingsblokken, Instagram-blokken, en productblokken. In plaats daarvan tonen deze blokken afbeeldingen die je elders aan je site hebt toegevoegd.

Afbeeldingen aanpassen

Nadat je afbeeldingen hebt toegevoegd, wil je ze misschien groter of kleiner maken op de pagina. Een afbeelding kan bijvoorbeeld te groot zijn, waardoor deze de rest van de pagina-inhoud overheerst. Of je logo is misschien te klein, waardoor het moeilijk te lezen is. Hoe je een afbeelding aanpast, hangt af van hoe je deze aan je site hebt toegevoegd.

Blokken

Hoe je blokken aanpast, hangt af van de editor:

• Fluid Engine - Pas blokken direct op de pagina aan door te klikken en te slepen.
• klassieke editor - Verminder de breedte van elk blok door andere blokken ernaast toe te voegen. Bijvoorbeeld, als je een afstandsblok naast een afbeeldingblok plaatst, vermindert dit de grootte en breedte van het afbeeldingblok met de helft. Je kunt dan de breedte van het afstandsblok wijzigen om het afbeeldingblok groter of kleiner te maken.

Veel blokken hebben ​​andere opties om de afbeeldingsgrootte en -vorm verder aan te passen:

• Afbeeldingsblokken - Gebruik in de klassieke editor de cropping-handle om de hoogte van in-line- en posterafbeeldingsblokken te wijzigen.
• Galerieblokken – Afhankelijk van de lay-out kun je afbeeldingen bijsnijden of het formaat ervan aanpassen.
• samenvattingsblokken - Gebruik ontwerpinstellingen om te wijzigen hoe je afbeeldingen worden weergegeven.
• Instagram-blokken - Gebruik instellingen om een ontwerp te kiezen en de beeldverhouding te wijzigen.

Pagina's en gedeelten

• Automatische lay-outs - Pas de automatische lay-out aan om te wijzigen hoe afbeeldingen worden weergegeven.
• Galeriegedeelten - Pas de galerie aan om te wijzigen hoe afbeeldingen worden weergegeven. Je zou ook kunnen proberen een andere lay-out te gebruiken.
• Portfoliopagina's - Stijl het portfoliogedeelte om te veranderen hoe afbeeldingen worden weergegeven.
• Storepagina's - Stijl je winkelpagina's om de beeldverhouding en productafbeeldingsbreedte te veranderen.
• Als je voor je site versie 7.0 gebruikt, kun je ook afbeeldingen toevoegen aan galeriepagina's en voorpagina's. Sommige sjablonen van versie 7.0 ondersteunen achtergrondafbeeldingen voor de hele site. Raadpleeg de gids van je sjabloon voor hulp bij het aanpassen van de afbeeldingsgrootte.

Andere delen van je site

• Bannerafbeeldingen - Verander de hoogte of breedte van het pagina gedeelte met de achtergrondafbeelding. Deze afbeeldingen worden altijd enigszins bijgesneden op mobiele apparaten.
• Site-logo - Verander de positie en grootte van je logo.

Geavanceerde afbeeldingsopties

Ga verder dan de basis met interactieve afbeeldingen, animaties en beeldmaskers.

• Voeg alt-tekst toe aan je afbeeldingen om ze in zoekopdrachten te laten verschijnen en je site toegankelijker te maken voor bezoekers met schermlezers.
• Voeg opvallende animaties en beeldeffecten toe aan afbeeldingsblokken om je site uniek en dynamisch te maken.
• Bewerk je afbeeldingen met de ingebouwde afbeeldingseditor om de perfecte uitstraling te bereiken. Je wilt bijvoorbeeld afbeeldingen bijsnijden, roteren of filters toepassen.
• Stel afbeeldingen in om te openen in een lichtbak zodat ze opvallen tussen je andere content.
• Verander afbeeldingen in links met doorklik-URL's.
• Gebruik zweefeffecten om meer informatie weer te geven wanneer bezoekers hun cursor over een afbeelding bewegen.
• Gebruik afbeeldingsmaskers om variatie en unieke visuele effecten aan je afbeeldingen toe te voegen.

Tip: Om de afmetingen van je originele afbeeldingsbestand te wijzigen, raden we aan om beeldbewerkingssoftware van derden te gebruiken. Bijvoorbeeld, als je een afbeelding hebt geüpload die 600px x 600px is, maar je wilt dat deze 400px x 400px wordt, pas je de afbeelding aan op je apparaat en upload je deze opnieuw naar je site.

Afbeeldingsgrootte aanpassen voor sociale media

Om afbeeldingen te verkleinen en bij te snijden naar specifieke afmetingen voor gebruik buiten Squarespace of op socialmediaplatforms, gebruik de gratis Image Resizer van Squarespace.

Je kunt meerdere .jpg-bestanden uploaden. of .png Bestanden, en selecteer vervolgens de gewenste groottes. Selecteer vooraf ingestelde formaten voor gebruik op Instagram, Facebook, YouTube, X (voorheen Twitter), en Snapchat, en uit andere standaard beeldverhoudingen.

Nadat je de afbeeldingen hebt verkleind, klik je op het downloadpictogram in de rechterbovenhoek om de afbeeldingen als .zip-bestand te downloaden. bestand. De nieuwe afbeeldingen behouden het bestandsformaat van de originele versie.

Opmerking: De Image Resizer is bedoeld om afbeeldingen direct vanaf je apparaat te uploaden en te verkleinen voor gebruik op sociale media. Het is niet mogelijk om afbeeldingen te gebruiken die eerder zijn geüpload naar je Squarespace-site. Om afbeeldingen aan je site toe te voegen na het gebruik van de resizer, download je ze en upload je ze vervolgens naar je site.

Volgende stappen

• Bekijk de All About Images-videoserie voor tutorials over het gebruik van afbeeldingen in Squarespace.
• Gebruik geanimeerde .gif's om bewegingsaccenten aan je afbeeldingsgalerieën toe te voegen.
• Om bezoekers een nog dynamischere ervaring te geven, kun je ook video's aan je site toevoegen.
• Zie Audio, afbeeldingen en video's toegankelijker maken voor meer informatie over hoe je je afbeeldingen toegankelijker kunt maken.