Afbeeldingen combineren voor je website

Afbeeldingen combineren of apart houden?

Een collage brengt meerdere beelden samen in één afbeeldingsbestand. Op een projectpagina kan ze een compact overzicht geven of een onderwerp naast een nuttig detail tonen. De beelden moeten samen een vraag beantwoorden, bijvoorbeeld hoe een afgewerkte keuken eruitziet en hoe de opbergruimte werkt.

Houd afbeeldingen apart als ze elk een eigen uitleg, link of nauwkeurige inspectie nodig hebben. In een productgalerij kunnen bezoekers iedere weergave afzonderlijk bekijken in plaats van in een klein raster.

Een collage behoudt haar indeling als ze kleiner wordt weergegeven. Losse afbeeldingen in je website-editor kunnen op een telefoon onder elkaar komen te staan; beelden in één bestand blijven op hun plek. Dat maakt de indeling voorspelbaar, maar geeft de pagina minder vrijheid om elke foto op een bruikbaar formaat te tonen.

Kies beelden die verschillende informatie toevoegen

Twee tot vier afbeeldingen zijn een praktisch uitgangspunt voor een projectoverzicht. Geef elk beeld een taak: een overzicht toont de situatie, terwijl een close-up een eigenschap laat zien die anders moeilijk zichtbaar is. Twee bijna identieke overzichtsfoto’s vertellen meestal minder dan een overzicht met een nuttig detail.

Zoek belichting en kleuren die bij elkaar passen. Gebruik bij een voor-en-na-vergelijking vergelijkbare camerahoeken, kadrering en schaal, zodat de verandering goed te beoordelen is. Vermijd uitsneden die een belangrijk verschil verbergen. Onze gids voor het kiezen van website-afbeeldingen legt uit wat elk beeld moet overbrengen.

Kies een indeling die bij je beelden past

In Pixilo’s indeling voor drie afbeeldingen staat de eerste groot links en staan de volgende twee rechts onder elkaar. Verander de volgorde om te bepalen welke foto de meeste ruimte krijgt. Een gewoon raster wordt van links naar rechts en vervolgens van boven naar beneden gevuld. Ongevulde vakken tonen de gekozen achtergrond.

Stem de vorm van de collage af op de beeldvakken

De breedte en hoogte van de collage bepalen de vorm van de vakken erin. Een vierkante collage heeft niet altijd vierkante vakken: bij twee beelden naast elkaar is elk vak staand. Een raster met twee rijen en twee kolommen geeft ongeveer vierkante vakken als de tussenruimte en marges klein zijn.

Probeer voor twee staande foto’s naast elkaar een hogere collage, zodat de vakken staand blijven. Een brede, lage collage snijdt bij het vullen van de vakken meer van de boven- en onderkant af. Voor twee liggende foto’s op één rij kan een bredere collage meer van elke scène behouden.

Begin bij de beschikbare ruimte op de pagina en probeer een passende indeling en vorm. Vereist je website een vaste vorm, houd die dan aan en verander de indeling of beeldkeuze. Ontgrendel in Pixilo de beeldverhouding om de vorm te wijzigen. Vergrendel de verhouding weer als je alleen de grootte wilt aanpassen zonder de verhoudingen te veranderen.

De hele afbeelding tonen of het vak vullen?

Hele afbeelding tonen behoudt alle randen, maar kan ruimte rondom het beeld overlaten. Dat is handig voor logo’s, diagrammen of productfoto’s waarbij bijsnijden belangrijke informatie zou verwijderen.

Vak vullen snijdt het beeld passend bij zonder het te vervormen. Zo krijgt het fotoraster gelijkmatige randen, maar controleer wat wegvalt. Selecteer elke miniatuur en verplaats de uitsnede om het belangrijkste onderwerp zichtbaar te houden.

Passen een gezicht en de handeling ernaast niet samen in het vak, probeer dan een andere collagevorm of indeling, toon de hele afbeelding of kies een andere foto. Een uitsnede verschuiven kan niet alle delen van een brede scène in een smal vak laten passen. Gebruik eerst het bijsnijdgereedschap als je een preciezere uitsnede van het origineel wilt, en controleer daarna hoe die in de collage past.

Gebruik tussenruimte om de beelden te scheiden

Een kleine tussenruimte maakt aangrenzende foto’s makkelijker te onderscheiden. Een buitenmarge geeft de collage een rand, maar neemt ook ruimte van de beelden in. Houd beide bescheiden als de collage in een smalle kolom staat. Ze worden samen met de afbeelding kleiner weergegeven.

Kies een achtergrond die bij de foto’s en de pagina past. Die is zichtbaar in tussenruimtes, marges en vrije ruimte bij beelden die hun vak niet vullen. Een andere kleur of transparantie verwijdert geen achtergrond die al onderdeel is van een foto.

Afbeeldingen combineren met Pixilo

1. Open het gereedschap om afbeeldingen te combineren en kies je JPG-, PNG- of WebP-bestanden.
2. Kies de indeling en stel de volgorde in met de pijlen onder de miniaturen.
3. Stel de breedte en hoogte van de hele collage in, inclusief tussenruimtes en buitenmarge.
4. Toon elke afbeelding volledig of vul het vak. Selecteer bij bijsnijden elke miniatuur en pas de positie aan. Schuifregelaars zijn alleen beschikbaar in richtingen waarin het beeld wordt bijgesneden.
5. Stel de tussenruimtes, buitenmarge en achtergrondkleur of transparantie in.
6. Download de PNG, controleer de kwaliteit en maak de versie voor je website klaar.

Met Afbeeldingen toevoegen voeg je beelden toe zonder de bestaande volgorde, uitsneden of instellingen te verliezen. Afbeeldingen vervangen vervangt de selectie. De indeling met één groot en twee kleine beelden vereist precies drie afbeeldingen; een vierde toevoegen schakelt over naar een raster.

Voorbeeld: vier foto’s van een afgewerkte keuken

Een renovatiebedrijf wil een compact overzicht op een projectpagina. Het kiest een overzicht van de ruimte, de binnenkant van een opbergkast, een detail van het werkblad en de verlichting boven het aanrecht. Elke foto toont iets anders van hetzelfde afgeronde werk.

Het bedrijf begint met een raster van 2 × 2 om alle vier de aspecten te laten zien. Is het overzicht van de ruimte het belangrijkste verkoopargument, dan kan de indeling voor drie beelden dat meer ruimte geven, met twee details ernaast en de vierde foto elders op de pagina.

De pagina toont de collage maximaal 600 pixels breed. Exporteer voor dit voorbeeld op 1200 × 800 pixels, met 16 pixels tussenruimte, 24 pixels buitenmarge en een witte achtergrond. Het bestand is twee keer zo breed als de weergave, voor extra detail op schermen met een hogere pixeldichtheid. Dit zijn voorbeeldinstellingen, geen verplichte maat voor elke website. Onze gids voor de afmetingen van website-afbeeldingen legt uit hoe je afmetingen voor je pagina kiest.

Vul de vakken en plaats eerst het overzicht, daarna de kast, het werkblad en de verlichting. Pas de uitsneden aan zodat elke foto de bedoelde eigenschap duidelijk toont.

Bij 360 pixels weergavebreedte op een telefoon is elke foto hier slechts ongeveer 170 pixels breed. De kast en verlichting blijven herkenbaar, maar stel dat de naad in het werkblad te klein is om te beoordelen. Haal die foto uit de collage en toon die apart op een groter formaat. Geef in de nieuwe indeling met drie foto’s het overzicht de meeste ruimte. Hogere exportafmetingen alleen zouden de naad niet meer ruimte op de pagina geven.

Controleer de collage in de mobiele pagina

Bekijk de pagina op desktop- en telefoonbreedte zonder in te zoomen. Controleer wat bezoekers echt kunnen begrijpen: kunnen ze twee afwerkingen vergelijken, de opbergruimte zien of de reeks volgen? Het algemene onderwerp herkennen is niet genoeg als het nuttige detail verdwenen is.

Controleer de afbeelding in de pagina, niet alleen het gedownloade bestand. Je websitethema kan extra bijsnijden om het beeld in een vaste ruimte te laten passen. Pas die ruimte of de weergave-instellingen aan als delen van de collage wegvallen.

Wordt de indeling te vol, maak die dan eenvoudiger of houd de beelden apart. Ondersteunt je websitebouwer een andere afbeelding voor mobiel, maak dan een versie met minder foto’s of een verticale indeling. Onze gids voor responsive afbeeldingen legt die aanpak uit.

Houd koppen en belangrijke aanduidingen als tekst op de pagina. Tekst in een afbeelding krimpt mee en is lastiger te wijzigen. Voeg toelichtende bijschriften toe in je website-editor.

Voeg een bijschrift en nuttige alternatieve tekst toe

Een bijschrift kan het project benoemen en de volgorde uitleggen. Voor het keukenraster met vier foto’s bijvoorbeeld: “Afgeronde keukenrenovatie. Vanaf linksboven, met de klok mee: overzicht, uittrekbare opbergruimte, aanrechtverlichting en werkbladdetail.” Pas de beschrijving aan als je foto’s verplaatst of verwijdert.

Een informatieve collage die als één bestand wordt geëxporteerd heeft alternatieve tekst voor het geheel nodig. Hier kan dat zijn: “Gerenoveerde keuken met uittrekbare opbergruimte, een vlakke werkbladnaad en lampen boven het aanrecht.” Beschrijf wat ertoe doet in plaats van alleen “Collage van vier foto’s” te schrijven.

Leg bij een uitgebreide vergelijking de belangrijkste verschillen uit in de tekst naast de afbeelding, in plaats van alles in de alt-tekst te proppen. De W3C-richtlijnen voor complexe afbeeldingen leggen uit hoe je korte alternatieve tekst met een uitgebreidere beschrijving combineert. Onze gids voor alt-tekst en bestandsnamen helpt bij beschrijvingen die bij de pagina passen.

Maak het bestand klaar voor je website

Pixilo slaat de collage op als PNG, behoudt transparantie en voegt bij export geen compressie met verlies toe. Dat herstelt geen details die in de bronfoto’s ontbreken. Een kleine afbeelding kan onscherp worden als je haar vergroot om het vak te vullen, vooral na een krappe uitsnede. Bekijk elke foto in de gedownloade collage. Is één beeld duidelijk onscherper, gebruik dan een groter origineel of een kleiner vak.

Een collage die vooral uit foto’s bestaat kan een groot PNG-bestand opleveren. Gebruik PNG naar WebP of, als je geen transparantie nodig hebt, PNG naar JPG om een kopie voor je website te maken. Vergelijk de bestandsgrootte en zichtbare kwaliteit met de PNG. Let bij het aanpassen van de kwaliteit op fijne details en randen: het kleinste bestand helpt niet als het de belangrijke eigenschap onduidelijk maakt.

Moet de pagina-achtergrond door het beeld heen zichtbaar zijn, houd dan een versie met transparantie. JPG ondersteunt dat niet. Onze gids voor afbeeldingsformaten op websites behandelt de keuzes uitgebreider.

Upload de gekozen versie en controleer of de pagina het juiste bestand en de bedoelde afmetingen gebruikt. Bewaar de originele foto’s voor toekomstige wijzigingen: je kunt de foto’s in de gedownloade PNG niet opnieuw rangschikken.