Afbeeldingen uit Lightroom exporteren voor je website
Wie herkent dit: dat je sommige dingen heel makkelijk onthoudt en andere dingen moet je keer op keer opzoeken. Ik heb dat laatste met bepaalde technische aspecten die cruciaal zijn bij het bouwen van een website. Ik weet precies wát ik moet doen, maar ik kan de precieze waarden niet onthouden.
In dit geval: wat zijn de ideale instellingen bij het exporteren van foto’s uit Lightroom, zodat de kwaliteit op de website zo goed mogelijk is, maar de website niet te zwaar wordt - en daardoor traag. Hoe je erachter komt of je website snel genoeg is, kun je trouwens lezen in deze blog.
Om het mezelf makkelijk te maken dacht ik, ik ga de perfecte instellingen voor eens en voor altijd in een blog zetten, dat scheelt mij ook elke keer weer uitzoekwerk. Je kunt je favoriete instellingen in een programma als Lightroom, waar het in deze blog over gaat, ook opslaan. Maar ik ben hier heel precies mee, elke situatie is anders en daar pas ik de instellingen ook op aan.
Bij elke website die ik voor klanten maak, check ik standaard de belangrijkste waarden die de pagespeed bepalen. Indien nodig maak ik aanpassingen, dat zit dan met name in de grootte van de afbeeldingen. Ik ga net zolang door tot het goed is. Je kunt zoveel winst behalen met het verkleinen van foto’s, uiteraard zonder teveel van de kwaliteit te verliezen. Ik hou uiteraard ook rekening met de afbeelding vereisten van Squarespace.
Tips van Squarespace voor het opmaken van afbeeldingen voor weergave op het web
Bestandstypes: je kunt .jpg, .gif of .png gebruiken.
Bestandsgrootte: er is een limiet van 20 MB, maar gebruik afbeeldingen van 500 KB of minder om je site snel te laten laden.
Bestandsnaam: gebruik alleen letters, cijfers, underscores en koppeltekens.
Afbeeldingsbreedte: 1500 - 2500 pixels. 2500 is in de meeste gevallen ideaal, maar hoe smaller, hoe sneller je pagina zal laden. De afbeeldingen die voor de verschillende apparaten gegenereerd worden (omdat Squarespace-websites responsive zijn), variëren in breedte van 100 tot 2500 pixels.
Resolutie: 120 MP (megapixel)-limiet. Om de resolutie van je afbeelding te vinden, gebruik je deze calculator of vermenigvuldig je de afmetingen en die deel je vervolgens door 1 miljoen. Een afbeelding van 1500px x 1650px is bijvoorbeeld 2,47 MP.
Kleurmodus: RGB (rood, groen, blauw)
Kleurprofiel: sRGB
Ik loop je hieronder door het proces van exporteren van foto’s in Lightroom met instellingen die bijna altijd goed uitpakken bij de bouw van websites, uiteraard zijn er wat variabelen.
Beste instellingen voor het exporteren van afbeeldingen uit Lightroom voor je website
Ga naar ‘Bestand’ > ‘Exporteren’.
Kies de locatie waar je de foto's wilt exporteren. Ik zet ze meestal in een submap in de oorspronkelijke map met de titel 'voor web'.
Kies hoe je de foto’s wilt noemen. Voor de zoekmachines is het belangrijk dat de zoekmachine weet wat er op de afbeelding staat zonder de afbeelding te zien. Als je op je pagina uitlegt dat jij met honden werkt bijvoorbeeld en je traint een hond op de foto, dan zou een goede bestandsnaam zijn: jouwnaam-traint-hond.jpg (bijvoorbeeld). Soms exporteer ik een hele reeks, dan kies ik: ‘Aangepaste naam - reeks’, ik verzin dan een naam die bij elke foto gepast is, die iets uitlegt over de foto’s en begin de reeks dan met ‘1’. (Ik pas die naam bij belangrijke pagina’s wel aan met het voorbeeld dat ik eerder noemde van de trainer met de hond.)
Bij ‘Bestandsinstellingen’ kies je het bestandstype, je kunt .jpg, .gif, of .png gebruiken. Ik gebruik meestal .jpg, maar soms wil ik een transparante achtergrond, dan kies ik .png. Kies bij kleurruimte sRGB. En dan de kwaliteit, die zet ik op 90. Ik moet wel zeggen, als ik een website maak waar enorm veel beeld wordt gebruikt, ga ik naar 80 of zelfs 70 om de pagina’s niet te zwaar te maken. Het ligt een beetje aan de grootte van de originele foto, maar bij grote websites met veel images beperk ik de bestandsgrootte tot 500K.
Bij ‘Afbeeldingsgrootte’ ligt het aan waar de afbeelding voor gebruikt wordt. Gaat het om een paginabreed beeld, ga ik af op het advies van Squarespace, dan zet ik de lange rand op 2500 pixels. De meest gebruikte resolutie (hoeveel pixels getoond kunnen worden) voor desktopcomputers en laptops is 1920 x 1080 - dat biedt een goede balans tussen schermruimte en beeldkwaliteit. Dat gebruik ik dus ook weleens, vooral als er veel afbeeldingen in het design gebruikt worden. Beslaat de foto maar een klein gedeelte van de pagina, ga ik zelfs naar 1600. Want ook al wordt de afbeelding klein weergegeven op het scherm, hij moet wel de hele afbeelding laden. Ik vink wel altijd ‘niet vergroten’ aan, omdat afbeeldingen korrelig kunnen worden als ze kleiner waren dan jouw instelling en je ze dan vergroot. Wijzig de resolutie in 72 pixels per inch (ppi).
Kies verscherpen voor 'scherm'.
Bij metagegevens kies ik voor ‘Alleen copyright’.
Klik op ‘Exporteren’.
Dat was het! Welke instellingen gebruik jij? Als jij het anders doet en dat werkt goed, deel het alsjeblieft hieronder, samen worden we slimmer :-).
Wil je dat jouw website meer klanten aantrekt zonder veel tijd of kosten? Download gratis mijn checklist "Trek Meer Klanten Aan: Supersnelle SEO met ChatGPT" en ontdek hoe je eenvoudig je SEO verbetert en je vindbaarheid vergroot.