Foto’s bewerken voor je website

Tijdens het maken van je website of een pagina, wil je natuurlijk foto’s gebruiken. Maar hoe zorg je er nou voor dat ze optimaal geschikt zijn voor gebruik.

Foto’s verfraaien de pagina en maken de pagina aangenamer om te lezen. Je kunt foto’s of afbeeldingen ook gebruiken om je verhaal beter uit te leggen.

Voor je website kun je de originele foto’s direct vanuit je camera gebruiken. Het nadeel van deze foto’s is dat ze erg groot zijn van bestandsformaat. Ik schat in dat ze minimaal 2 tot 3 Mb groot zijn. Ook de afmetingen van deze foto’s zijn veel groter dan wat je uiteindelijk te zien krijgt op je pagina. Dit samen zorgt ervoor dat je website trager wordt. Het laden van de pagina duurt langer. Zeker als je meerdere foto’s op een pagina hebt gezet. Ook wordt er veel gevraagd van de datalimiet wanneer bezoekers je website bekijken via een mobiele telefoon of tablet.

Professionele fotobewerkingsprogramma’s zijn duur en ingewikkeld

Voor het aanpassen van je foto’s kun je een fotobewerkingsprogramma gebruiken. Bijvoorbeeld Adobe Lightroom, Adobe Photoshop of Corel Paint Shop Pro. Maar dit zijn professionele programma’s die veel te ingewikkeld zijn wanneer je alleen foto’s wilt verkleinen. Daarbij komt ook dat deze programma’s duur zijn in aanschaf.

Er zijn gratis alternatieven, zoals Gimp en Pixlr.com, maar ook deze zijn vrij ingewikkeld om mee te werken.

Gratis online fotobewerkingsprogramma’s

Gelukkig zijn er ook online programma’s waarmee je op een eenvoudige manier je foto’s kunt bewerken. De werking van één van deze programma’s wil ik graag aan je uitleggen.

Het bewerken van een foto

In het voorbeeld gebruik ik de originele foto die ik bovenaan deze pagina heb geplaatst. We lopen samen stap voor stap de bewerkingen door om hetzelfde eindresultaat te krijgen.

Voor het bewerken van de foto gebruiken we het programma Foto Verkleinen op fotoverkleinen.nl.
Wanneer je de link hebt geopend zie je een pagina met daarop een groot grijs vlak. Zie de onderstaande afbeelding.

Foto's bewerken - Canvas

Foto toevoegen

Allereerst voegen we de foto toe aan het grijze vlak. Dat kan op twee manieren:

  • Via de link ‘Open een afbeelding’.
  • Door het slepen van een bestand.

Via de link ‘Open een afbeelding’

  • Klik op de link ‘Open een afbeelding’ bovenaan het scherm om de foto op je computer te zoeken. Zie onderstaande afbeelding:

Afbeelding openen via een tekstlink

  • Wanneer het bestand is gevonden kan deze worden toegevoegd door op de knop ‘Kies’ te klikken. De foto wordt zichtbaar in het grote vlak op de webpagina. Zie onderstaande afbeelding:

Foto toegevoegd aan canvas

Via het  slepen van een bestand

  • Zoek de foto die aangepast moet worden op je computer op via de Windows verkenner of Apple Finder.
  • Plaats de muiscursor op de foto en druk op de linker muisknop.
  • Terwijl je de linker muisknop ingedrukt houdt, sleep je de foto naar het grijze vlak op de website.
  • Laat de muisknop los en de foto wordt zichtbaar in het grote vlak op de webpagina. Zie onderstaande afbeelding:

Foto toegevoegd aan canvas

Het bijsnijden van de foto

Voor websites wordt het formaat van foto’s aangegeven in pixels (px). Op mijn website hebben alle foto’s bovenaan de pagina’s de afmeting van 980 pixels breed en 450 pixels hoog. De originele foto heeft het formaat van 1440 x 1061 px. Nu kunnen we de foto eerst verkleinen zodat in dit geval de breedte van de foto 980 pixels is. Het nadeel hiervan is dat we geen mooie uitsnede meer kunnen maken, zoals ik gedaan heb bij mijn foto. De foto wordt uiteindelijk te smal of niet hoog genoeg. Daarom gaan we eerst dezelfde uitsnede maken die ik gedaan heb bij de foto bovenaan deze pagina.

  • Klik bovenin het menu op de tweede knop van links. Zie onderstaande afbeelding:

De foto bijsnijden

 

  • Selecteer de tweede optie in het uitklapmenu, ‘Op basis van aspect ratio…’.
    De aspect ratio is de beeldverhouding van bijvoorbeeld een foto of video. In ons geval de breedte van 980 pixels en de hoogte van 450 pixels.
  • Er verschijnt een popup scherm waarin de beeldverhouding ingevuld kan worden. Zie onderstaande afbeelding:

Scherm voor het invullen van de aspect ratio

  • Vul de waarde 980:450 in.
  • Klik op de knop ‘OK’.
  • Er verschijnt een kader met de juiste beeldverhouding over de foto. Zie onderstaande afbeelding:

Het kader over de foto in de juiste beeldverhouding

 

  • Plaats de muiscursor binnen het kader en sleep het kader naar het midden van de foto. Je kunt ook de pijltjestoetsen op je toetsenbord gebruiken.
  • Omdat het kader te breed is, plaats je de muiscursor op één van de hoeken van het kader.
  • Sleep de hoek naar het midden van de foto, zodat het kader kleiner wordt.
    Omdat we de beeldverhouding van het kader hebben opgegeven, blijft de uitsnede altijd in de juiste verhouding. Hoe groot of klein je het kader ook maakt.
  • Pas het kader aan totdat de juiste uitsnede is bepaald. Zie onderstaande afbeelding:
    Misschien moet je het kader nog naar de juiste positie op de foto verplaatsen.

Zichtbaar kader van uitsnede foto

 

  • Klik op de blauwe knop ‘Snijden’ bovenin het menu. Zie onderstaande afbeelding:

Tevreden? Klik op de knop 'snijden'

De foto wordt nu getoond in de uitsnede die je net hebt bepaald. Het formaat van mijn foto is nu 1306 pixels breed en 600 pixels hoog. Deze afmetingen kunnen bij jouw uitsnede iets afwijken. Geen probleem, dit heeft geen effect op de grote van de uiteindelijke foto. Bekijk de onderstaande afbeelding voor de nieuwe uitsnede van de foto:

Het resultaat van de uitgesneden foto

De foto kan nu worden verkleind.

Het verkleinen van de foto

De foto heeft nu de afmetingen van 1306 pixels breed en 600 pixels hoog. Dat moet worden aangepast naar het formaat 980 x 450 pixels.

  • Klik bovenin het menu op de derde knop van links (de knop met de pijltjes die naar binnen wijzen). Zie onderstaande afbeelding:

Menuknop voor het verkleinen van de foto

  • Er wordt een popup scherm geopend. Zie onderstaande afbeelding:

Het verkleinen van de foto

  • In het popup scherm worden de breedte en de hoogte van de gekozen foto getoond, 1306 x 600 px.
  • Pas de waarde in het linker invulveld aan naar 980.
    
Zorg ervoor dat het vinkje bij ‘Behoud originele verhouding’ aan staat. Hierdoor wordt de hoogte van de foto automatisch aangepast naar 450 pixels.
  • Klik op de knop ‘Toepassen’. De foto wordt verkleind en is zichtbaar in het grijze vlak. Zie onderstaande afbeelding:

Eindresultaat van de bewerkte foto

Foto’s verkleinen zonder vaste afmetingen

De foto’s op je website hoeven niet altijd vaste afmetingen te hebben. Vaak wil je dat een foto in ieder geval een bepaalde breedte heeft, zodat deze mooi tussen je tekst staat. In dat geval kun je de eerste stap over het bijsnijden van je foto overslaan. Je verkleint een foto naar een bepaalde breedte en automatisch wordt de hoogte aangepast.

Houd een maximale breedte aan

Zorg ervoor dat je een maximale breedte aanhoudt voor je foto’s. In de meeste gevallen zijn websites niet breder dan 1200 pixels. Met een maximale breedte zorg je ervoor dat het bestandsformaat van je foto’s klein blijft.

Het opslaan van de aangepaste foto

Zo, de foto is bewerkt. Gefeliciteerd! Nu is het tijd om de foto te bewaren.

  • Klik in het menu op de eerste knop ‘Bestand’. Zie onderstaande afbeelding:

Foto opslaan via de link 'Bestand'

  • Klik in het uitklapmenu op de optie ‘Opslaan als JPG…’.
  • Er verschijnt een popup scherm waarin de kwaliteit van de foto kan worden opgegeven. Zie onderstaande afbeelding.
    Standaard staat de JPG kwaliteit op 80. Dat is prima. Zelf gebruik ik altijd de kwaliteit van 60. Dat doe ik om de bestandsgrootte van de foto kleiner te maken. Het kwaliteitsverlies is minimaal en je zorgt ervoor dat je pagina sneller laadt in je browser. Wanneer de kwaliteit onder de 60 komt heb je kans dat de foto korrelig wordt en niet mooi meer is om te gebruiken.

Foto opslaan in jpeg formaat

  • Klik op de knop ‘Bewaar’.
  • De foto wordt opgeslagen op je computer.
    Waarschijnlijk in de map ‘Download’. Ik weet niet in welke map jij bestanden automatisch opslaat op je computer.
  • Vergeet niet om de bestandsnaam aan te passen voor je deze gebruikt op je pagina. Ik heb mijn foto de naam ‘fotos-bewerken-voor-je-website.jpg’ gegeven.
    Een goede bestandsnaam heeft alleen maar voordelen. Zo kun je de foto gemakkelijk terugvinden in bijvoorbeeld de media bibliotheek van WordPress of een ander onderhoudsprogramma. Het gebruiken van een goede bestandsnaam is ook goed voor zoekmachineoptimalisatie.
  • De aangepaste foto is klaar voor gebruik.

Nog een laatste woord

Ik begrijp dat het aanpassen van foto’s in het begin best wel ingewikkeld is. Je krijgt er vanzelf handigheid in als je een aantal foto’s hebt aangepast. Mocht je er toch niet helemaal uit komen, neem gerust contact op.

In ieder geval, succes met het aanpassen van je foto’s!

Lees ook:

Sluit Menu