Onbewerkte foto’s rechtstreeks op websites publiceren is niet zo slim. Webpagina’s laden dan namelijk traag, waardoor bezoekers direct afhaken. Bovendien gaan andere internetgebruikers wellicht aan de haal met je werk. We geven je negen tips om je foto’s webvriendelijk te maken met Photoshop Elements 11.

Het gebruik van beeld op websites is cruciaal. Geen mens zit immers te wachten op lange lappen tekst zonder plaatjes. Als je veel bezoekers wilt trekken, zal je de website dan ook moeten voeden met relevant beeld. Eigen foto’s liggen natuurlijk voor de hand. Helaas kan je niet klakkeloos zelfgemaakte kiekjes uploaden naar de webserver. Het is namelijk eerst nodig om de bestanden webvriendelijk te maken met een fotobewerker.

Camera’s maken van foto’s behoorlijk zware bestanden. Een jpg-bestand van een moderne camera is bijvoorbeeld als snel enkele MB’s groot. En raw-materiaal afkomstig van spiegelreflexcamera’s eist nóg meer schijfruimte. Stel dat je een paar foto’s in originele staat op een website publiceert, dan hebben browsers al gauw tientallen seconden nodig om alle content op te halen. Het gevolg is dat het merendeel van de bezoekers je website links laat liggen. De kunst is om de bestandsgrootte van foto’s te verkleinen zonder dat te veel details verloren gaan.

Er zijn nog meer redenen denkbaar om zelfgemaakte kiekjes te optimaliseren voor internet. Een scheve horizon of lelijke randen zien er bijvoorbeeld niet uit! Verder beschermt een watermerk je tegen misbruik door derden. Aan de hand van Photoshop Elements 11 laten we zien hoe je foto’s voor internet bewerkt. De adviesprijs van deze fotobewerker is een kleine honderd euro.

Hoewel het auteursrecht je beschermt tegen onrechtmatig gebruik van je eigen foto’s, is het evengoed zinvol om een watermerk toe te voegen. Je weet dan haast zeker dat niemand je kiekjes steelt en ergens anders publiceert. De simpelste manier is om een watermerk als png-bestand met een transparante achtergrond te bewaren. De fotobewerker heeft allerlei gereedschappen in huis om een mooi logo te ontwerpen. Via Bestand en Plaatsen voeg je het watermerk toe aan de foto. Sleep de afbeelding daarna naar de gewenste plek. Merk op dat er een nieuwe laag aan het fotoproject is toegevoegd. Hier wijzig je eventueel de dekking van het watermerk. Photoshop Elements biedt helaas geen functie om een echt Digimarc-watermerk in te sluiten.


Het watermerk is een extra laag.

Wil je een heel fotoalbum op een website publiceren, dan kost het veel tijd om alle bestanden webvriendelijk te maken. Gelukkig heeft Photoshop Elements een functie om meerdere bestanden tegelijk te corrigeren. Navigeer naar Bestand en Meerdere bestanden verwerken. Je geeft bij Bron de map met de originele foto’s op. Bij Doel selecteer je een opslaglocatie voor de bewerkte bestanden. Stel bij het onderdeel Afbeeldingsgrootte de gewenste breedte en resolutie in. Bij Bestandstype kies je een afbeeldingsformaat. Nuttig is dat je onder Labels eenvoudig een watermerk toevoegt. Via Alt + 0169 gebruik je het copyright-symbool (©) in combinatie met je naam. Stel de positie, lettergrootte, dekking, kleur en het lettertype in. Klik op OK om alle foto’s te bewerken.


Photoshop Elements heeft een functie om meerdere bestanden tegelijk te corrigeren.

Als een deel van een foto niet relevant is voor de website, kan je er voor kiezen om dit deel weg te snijden. Wellicht is het dan niet meer nodig om de volledige afbeelding te verkleinen. Kies in het menu voor Afbeelding en Uitsnijden, waarna je aangeeft welk deel je van de foto wilt behouden. Verder maak je eenvoudig een scheve horizon weer recht. Druk op de P-toets en trek nauwkeurig een lijn over de scheve horizon. Zodra je de muisknop loslaat, wijzigt de fotobewerker direct de hoek van de afbeelding. Maak zo nodig een uitsnede om de witte randen te verwijderen.


Bij Afbeelding en Uitsnijden kan je aangeven welk deel van de foto je wilt behouden.


Met de P-toets maak je eenvoudig een scheve horizon weer recht.

Als je alleen een specifiek object van een foto wilt gebruiken voor de website, is het verstandig om de rest van het beeld transparant te maken. Je voorkomt daarmee dat er ongewenste witruimte zichtbaar is op de website. Klik op Expert en schakel het venster Lagen in. Gebruik de selectiegereedschappen om nauwkeurig het object van de foto te selecteren. Via de rechtermuisknop kies je voor de optie Laag via kopiëren. Het programma voegt een nieuwe laag met het object toe. Met behulp van het oogje schakel je daarna de achtergrondlaag uit. Het schaakbordraster laat het transparante deel van de foto zien. Als alternatief pas je via het tovergummetje ook eenvoudig transparantie toe. Je hoeft nu alleen nog maar de afbeelding op te slaan als png-bestand. Jpg-bestanden ondersteunen geen transparantie. Wil je dit formaat evengoed gebruiken, dan kies je een zogeheten mattekleur om de transparante pixels op te vullen. Gebruik hiervoor dezelfde kleurcode als de achtergrond van je website.


Het schaakbordraster laat het transparante deel van de foto zien.

Sla je een bewerkte foto als png-afbeelding op, dan heb je de gelegenheid om interliniëring toe te passen. Als je deze functie activeert, krijgen bezoekers van je website bij het ophalen van de website alvast een voorproefje van de foto te zien in een lage resolutie. Hoewel de foto’s in eerste instantie korrelig ogen, is de wachttijd iets aangenamer. De scherpe versie van de foto verschijnt even later vanzelf in beeld. De bestandsgrootte neemt door deze techniek wel iets toe. Wil je geen interliniëring toepassen, dan is het beeld pas zichtbaar voor bezoekers zodra de browser het volledige bestand heeft gedownload.


Bij opslaan als png-afbeelding heb je de gelegenheid om interliniëring toe te passen.

Photoshop Elements bevat ook voorinstellingen om foto’s voor het web te optimaliseren. Je navigeert hiervoor naar Bestand en Opslaan voor web. Bij foto’s met een heel hoge resolutie waarschuwt het programma mogelijk dat het systeem te traag wordt. In dat geval is het beter om de foto met voorgaande tips te verkleinen. Prettig is dat je de originele en bewerkte afbeelding naast elkaar kunt vergelijken. Je probeert vrijblijvend verschillende voorinstellingen uit. Voor foto’s geven JPEG hoog en PNG-24 het beste resultaat. Pas de afbeeldingsgrootte aan om de bestandsomvang nog verder in te perken. Bij een jpg-indeling stel je bij Kwaliteit ook het compressieniveau in. Merk op dat onder de afbeelding de geschatte downloadtijd bij verschillende internetsnelheden staat vermeld. Via Voorvertoning bekijk je het resultaat in je standaardbrowser.


Bij ‘Opslaan voor web’ kun je de originele en bewerkte afbeelding naast elkaar vergelijken.

Zodra alle correcties zijn toegepast, sla je de bewerkte foto op als nieuw bestand. Klik hiervoor op Bestand en Opslaan als. Voor websites kies je tussen een jpg- of png-indeling. Png-bestanden ondersteunen een transparante achtergrond. Dat is bijvoorbeeld handig voor het geval je alleen een bepaald object van een foto wilt gebruiken voor de website, zonder dat er lelijke witruimte zichtbaar is. De beeldkwaliteit van png- (24 bits) en jpg-bestanden zijn grofweg vergelijkbaar. Png-bestanden zijn overigens wel iets groter, omdat er bij de compressie geen beeldgegevens verloren gaan. Maak een keuze en selecteer de gewenste bestandslocatie. Als je hebt gekozen voor jpg, verschijnt er een extra dialoogvenster in beeld. Belangrijk is om het compressieniveau in te stellen. Stel dat je een hoge kwaliteit instelt, dan neemt de bestandsgrootte toe. Kies een waarde tussen 1 en 12, waarna je de foto bewaart.


Bij een hoge kwaliteit van het compressieniveau neemt de bestandsgrootte toe.

Je kunt foto’s verkleinen door de afmetingen te wijzigen. Belangrijk om te weten is in welke breedte je de foto beschikbaar wilt maken. Een vaste maat is hierbij moeilijk aan te geven, omdat bezoekers verschillende schermformaten gebruiken, zoals 1024 × 768 of 1920 × 1080. Je opent hiervoor hetzelfde dialoogvenster als in voorgaande tip. Naast Nieuwe beeldpixels berekenen vink je de optie Verhoudingen behouden aan. Wijzig bij het onderdeel Pixelafmetingen de breedte. Merk op dat de hoogte vanzelf mee verandert. Klik op OK om de wijzigingen toe te passen.


Bij het aanpassen van de afmetingen is de breedtemaat het belangrijkst!

Het gebruik van een hoge resolutie is op internet niet nodig. De weergave van een foto is namelijk beperkt tot de grootte van het beeldscherm. De enorme hoeveelheid pixels die camera’s tegenwoordig ondersteunen, zijn dan ook hoofdzakelijk bedoeld voor afdrukken op posterformaat. In Photoshop Elements maak je foto’s eenvoudig minder zwaar door de resolutie te verlagen. Een foto van 72 dpi is voor internetgebruik meestal voldoende. Klik achtereenvolgens op Afbeeldingen, Vergroten/verkleinen en Afbeeldingsgrootte. Zorg ervoor dat de optie Nieuwe beeldpixels berekenen is aangevinkt. Vervolgens wijzig je de waarde achter Resolutie in 72 pixels/inch.


Je kunt de resolutie van een foto eenvoudig verkleinen.

Deel dit artikel
Voeg toe aan favorieten