Zo exporteer je foto's voor een webportfolio

Een fotoportfolio moet vlot laden én het werk goed tonen. Textiel, bladeren, egale luchten en huidtinten verdienen meer aandacht dan een kleine illustratie. Een goede miniatuur kan groot tegenvallen.

Het doel is bestanden met relevante details op de echte weergavematen. Deze gids helpt exportkeuzes testen, ook na herverwerking door het platform.

Plan de galerij, niet alleen de miniatuur

Inventariseer raster, projectpagina, lightbox en brede openingsfoto. Hetzelfde beeld kan vierkant uitgesneden in het raster en volledig geopend verschijnen. Een miniatuurexport levert geen extra details voor groot gebruik.

Lees platforminstructies vóór presets. Sommige maken meerdere maten, andere tonen de upload direct. Adobe Portfolio bewaart de volle resolutie en maakt kleinere versies. Onderzoek uploadbron en bezoekersbestand afzonderlijk.

Controleer downloads op originele grootte. Upload geen drukmaster omdat meestal een kleinere variant wordt getoond. Een webexport moet geschikt zijn om via de site beschikbaar te komen.

Bepaal de werkelijk geopende weergave

1. Begin in de sitebouwer. Lees galerijhulp en indelingsinstellingen. Zoek maximale weergavebreedte of -hoogte. De uploadlimiet is iets anders.
2. Open een gepubliceerde testgalerij. Gebruik het breedste beoogde venster en open de foto als bezoeker, inclusief lightbox. Probeer ook een portret dat door de vensterhoogte wordt begrensd.
3. Meet alleen zonder bruikbare platformmaten. Rechtsklik op de foto en kies Inspecteren. Elementmarkering of indelingsvak toont CSS-afmetingen. Meet de foto zelf. De bron in een nieuw tabblad toont bestandsafmetingen, niet de weergave.

Blijft de weergavemaat onzeker, begin met de actuele platformaanbeveling en test vóór een collectiebrede preset. Een onderbouwd begin is beter dan gokken op cameraresolutie.

Kies pixelafmetingen vanuit de indeling

Begin bij de grootste weergavemaat en beoordeel extra pixels. 1.200 CSS-pixels breed kan een bron van 2.400 voor 2× detail gebruiken, als die werkelijk wordt geleverd. Niet elke portfoliofoto moet dus 2.400 breed zijn.

6.000 × 4.000 geschaald naar 2.400 breed wordt 2.400 × 1.600. Bij 1.200 × 800 CSS zijn dat per richting twee beeldpixels per CSS-pixel. Een portret van 4.000 × 6.000 met lange zijde 2.400 wordt 1.600 × 2.400. Dezelfde lange zijde geeft niet dezelfde breedte.

Beide maten verdubbelen verviervoudigt de pixels: 960.000 bij 1.200 × 800 versus 3.840.000 bij 2.400 × 1.600. De bytes hoeven niet te verviervoudigen, maar transport en decoderen kosten meer. Vergelijk klein en 2× in de galerij. Behoud extra detail bij zichtbaar nut en lever kleine versies aan kleine weergaven.

Gebruik Afbeelding schalen met vergrendelde verhouding voor kleinere webkopieën. Snijd eerst bij als de compositie moet veranderen. Rek een portret niet uit tot liggend formaat.

Een klein scherm hoort niet voor elke miniatuur het grootste bestand op te halen. Een bouwer kan dat regelen; een eigen site vraagt mogelijk responsieve beeldcode. De gids over responsieve afbeeldingen legt bronkeuze en weergave uit.

Op gewone schermen tellen pixels meer dan PPI-metadata. Een bestand blijft 2.400 pixels breed als alleen het resolutielabel verandert. Voor drukwerk ligt dat anders; lees DPI, PPI en pixels.

Kies formaat en kleurbeheer bewust

Begin met een ondersteund formaat

JPG is praktisch voor gewone foto's. PNG kan passen bij transparantie of grafiek maar is vaak te groot voor fotografie. WebP en AVIF kunnen met platformondersteuning of eigen beeldlevering. De MDN-formaatreferentie beschrijft eigenschappen en compatibiliteit.

Converteer niet alles vóór een publicatietest. Het platform kan het formaat weigeren of hercoderen. Beoordeel de geleverde galerijfoto, niet alleen je upload.

Exporteer met kleurbeheer

Voor een gebruikelijk portfolio met standaard dynamisch bereik, SDR, is sRGB een praktisch startpunt. Exporteer met kleurbeheer en neem het profiel op als de editor dat aanbiedt. Kleuren naar sRGB converteren is iets anders dan alleen een sRGB-profiel toewijzen aan kleurwaarden uit een andere kleurruimte. Adobe's vragen en antwoorden over kleur lichten de kleurverwerking van Lightroom toe.

Een breed kleurbereik en HDR vragen een compatibele export- en publicatieketen. Gebruik ze doelbewust met platformondersteuning. De bewerkingspreview voorspelt niet automatisch de bezoekersweergave.

Vergelijk export en publicatie op hetzelfde apparaat met herkenbare huidtinten of neutrale vlakken. Schermen blijven verschillen. Verandert de publicatie daar onverwacht, onderzoek platformbewerking en profielen vóór de creatieve aanpassing. De kleurengids helpt.

Zoek compressie-instellingen met een kleine testset

Een kwaliteitspercentage werkt niet in elke exporttool hetzelfde. Het stuurt de encoder, niet het percentage artistieke of technische kwaliteit.

Kies foto's waarin verschillende fouten opvallen. In een egale lucht zie je kleurbanden; haar, gras en stof tonen verlies van fijne structuur. Donkere delen kunnen blokken of uitgesmeerde ruis krijgen. Architectuur laat beschadigingen langs dunne contrastrijke randen zien. Gebruik beelden die representatief zijn voor je eigen werk.

1. Gebruik steeds dezelfde bewerkte bron. Houd afmetingen en kleuren gelijk zodat alleen compressie varieert.
2. Maak twee of drie kandidaten. Op een JPG-schaal 0–100 kun je 75, 85 en 95 testen. Dat zijn testpunten, geen vaste aanbevelingen.
3. Controleer de foto in twee weergaven. Beoordeel hem eerst op de grootte waarop bezoekers hem zien. Bekijk daarna 100% of 1:1 om textuurverlies, blokken en halo's te herkennen. 100% is niet hetzelfde als passend maken in het venster en betekent niet noodzakelijk vergroten. Adobe beschrijft Lightrooms 1:1-weergave als de weergave van de werkelijke beeldpixels.
4. Vergelijk daarna de bytes. Behoud de kleinere versie alleen met de belangrijke details. Veel verlies voor weinig besparing helpt zelden.
5. Publiceer een test en vergelijk opnieuw. Platformbewerking kan het resultaat veranderen. Controleer raster, geopende foto en mobiel vóór de serie.

Er is geen algemeen doel in kilobytes voor portfoliofoto's. Een gedetailleerde bosfoto kan bij dezelfde afmetingen meer data vragen dan een eenvoudige studio-opname. Kies het kleinste bestand dat je visueel goedkeurt en beoordeel daarna het laden van de hele pagina.

Gemeten voorbeeld: één foto, drie JPG-exports

We testten een foto van Alpen en Middellandse Zee van NASA Earth Observatory. Bron: NASA/JSC, ISS Crew Earth Observations Facility, ISS073-E-3320. Het origineel was al JPG. We verkleinden eenmaal naar 2.400 × 1.348 en maakten een PNG-werkkopie voor identieke startpixels. PNG herstelt geen eerdere verliezen.

Op 17 oktober 2026 converteerden we dezelfde PNG via Pixilo's PNG-naar-JPG-tool met 75, 85 en 95 in Microsoft Edge 155.0.4283.45. Afmetingen bleven gelijk. Dit zijn browserencoderwaarden, geen equivalente Lightroom-instellingen of garanties voor andere foto's.

Elk detailbestand toont dezelfde 240 × 160 pixels zonder extra schaling. De pagina kan de previews aanpassen aan je scherm. Open volledige downloads op 100% voor pixelvergelijking. Lagere kwaliteit spaart bytes maar kan fijne bergkammen en textuur gladmaken. 95 is bijna tweemaal zo groot als 85; dat bepaalt niet of het verschil in jouw galerij nuttig is.

Je kunt de PNG-werkkopie downloaden (6.464.084 bytes) om te testen. Eén luchtfoto bepaalt niet de juiste instelling voor portretten, kunst en alle landschappen. Gebruik representatief eigen werk.

Voorbeeld: een Lightroom Classic-exportpreset

Stel dat de grootste ongesneden weergave 1.200 × 800 CSS is en het bewerkte origineel 6.000 × 4.000. Vergelijk 2.400 × 1.600 JPG met kleiner. Selecteer de foto en open File → Export. Adobe's exportdocumentatie verklaart de panelen; namen verschillen per taal en versie.

• File Settings: kies JPEG en sRGB voor dit SDR-voorbeeld. Vergelijk kwaliteit in Lightroom zonder browsercijfers over te nemen.
• Image Sizing: activeer Resize to Fit en Width & Height. Stel 2.400 × 1.600 als kader in voor deze liggende foto. Hij past proportioneel, zonder een portret in die vorm te dwingen. Houd Don't Enlarge aan voor hergebruik op kleine bronnen.
• Output Sharpening: vergelijk uitgeschakelde verscherping met Sharpen For: Screen, Amount: Standard. Bekijk randen en structuur op eindmaat. Verminder of schakel uit bij halo's of harde randen.
• Metadata: behoud nodige beschrijvings- en copyrightvelden en controleer verwijdering van locatie- en persoonsgegevens.
• Export Location: sla op in een aparte webmap. Geef varianten verschillende namen om de gecontroleerde versie te uploaden.

Upload een kandidaat, beoordeel de grote weergave en telefoon en sla daarna pas een preset op. Portretten en miniaturen vragen mogelijk andere kaders. Controleer opnieuw na een layoutwijziging.

Gebruik Pixilo voor zinvolle extra stappen

Kan de foto-editor maat, formaat en kwaliteit in één export leveren, begin daar. Pixilo helpt bij een reeds gerenderd beeld dat kleiner moet, een uitsnede vraagt of compressietests nodig heeft.

De beeldcompressor maakt een lichtere kopie, Afbeelding schalen vermindert overtollige pixels. Die tool neemt JPG, PNG en WebP tot 25 MB per bestand. Maak bij grotere bronnen een werkkopie in de foto-editor. RAW, profielconversie en uitvoerverscherping vragen passende software.

Vermijd herhaalde JPG-exports. Voer meerdere wijzigingen vóór één eindexport uit en vergelijk vanaf dezelfde voorbereide bron in plaats van vorige downloads opnieuw te comprimeren.

Controleer metadata, namen en watermerken

Controleer GPS en persoonsgegevens apart; zie de metadatagids. Voeg je met de watermerktool een markering toe, controleer plaatsing in raster en groot beeld. Laat het werk centraal staan. Een watermerk voorkomt kopiëren niet.

Zoek waar de kwaliteit verandert

1. Controleer de bewerkte bron. Ontbrekend detail komt niet terug door exportinstellingen.
2. Controleer de lokale export. Onderzoek maat, compressie en verscherping apart bij textuurverlies of halo's.
3. Controleer het geleverde galerijbestand. Is lokaal goed maar online slecht, bekijk gekozen versie, uitsnede en weergavegrootte. Een uitgerekte miniatuur vraagt een andere oplossing dan te sterke compressie.

Verander één stap tegelijk. Veel grote bestanden tegelijk ophalen kan ook vertragen. Test een verse pagina en de eerste geopende foto, niet alleen al geladen beelden.

Controleer de gepubliceerde galerij

• Miniatuuruitsnedes en geopende beelden tonen de bedoelde compositie.
• Belangrijke textuur blijft zichtbaar zonder storende artefacten in lucht of schaduw.
• De grote foto is geen te kleine opgeblazen miniatuur.
• Kleuren zijn redelijk bij lokale en gepubliceerde vergelijking op hetzelfde apparaat.
• De mobiele pagina laadt vlot zonder voor elke miniatuur het grootste bestand op te halen.
• Publieke bestanden en links bevatten alleen beoogde versies en metadata.

Veelgestelde vragen

Altijd maximale JPG-kwaliteit gebruiken?

Nee. Het bestand kan fors groeien zonder nuttig verschil op eindmaat. Test lastige foto's en beoordeel uiterlijk én besparing.

Moeten alle foto's dezelfde afmetingen hebben?

Niet noodzakelijk. Consistente presentatie vraagt geen vervorming. De indeling bepaalt waar uitsnedes gelijk moeten zijn en waar originele verhoudingen passen.

Kan de webexport ook naar de drukker?

Ga daar niet van uit. Druk- of klantlevering kan andere maten, verscherping, kleuren en metadata vragen. Maak die vanuit het bewerkingsorigineel volgens de levereisen.