Optimaliseer afbeeldingen voor het web met Photoshop

 

Iedereen wil dat zijn website zeer snel wordt geladen, zodat de wachttijd voor de bezoeker zo kort mogelijk wordt gehouden. Voor een korte laadtijd is het zeer belangrijk om alleen afbeeldingen op te nemen die niet groter zijn dan nodig. Dit bespaart vele kilobytes aan bestandsgrootte en maakt niet alleen de websitebezoekers maar ook Google gelukkig. Tutorials als deze zijn handig, maar wil je echt meer leren op het gebied van grafische kennis of van Photoshop in het bijzonder? Kijk dan eens op grafischecursussen.nl. Hier kun je een cursus Photoshop vinden en hiervoor inschrijven, zodat je alles kunt leren op het gebied van professioneel bewerken van foto's. 

 

Snelle pagina laadsnelheid voor betere posities in Google

 

De pagina laadsnelheid is een van de meer dan 200 ranking factoren die worden gebruikt voor de ranking van webpagina's in de Google-zoekresultaten. Met name smartphone-gebruikers met een trage internetverbinding of een beperkt datavolume zullen zeer dankbaar zijn als je website geen foto's laadt die, in het ergste geval, enkele megabytes groot zijn.

 

We gebruiken hier de nieuwste Photoshop-versie CC 2020, maar de genoemde instellingen kunnen ook naar vele andere beeldbewerkingsprogramma's worden overgezet.

Exportfunctie Photoshop: Opslaan voor Web

Om de afbeelding te exporteren, kies je in Photoshop het commando:

 

Bestand > Exporteren > Opslaan voor web

De juiste instellingen voor exportfunctie voor het web

De exportfunctie voor het web biedt je nu enkele instellingen. De belangrijkste staan hieronder vermeld:

 

  1. Bestandsformaat: Voor de foto in ons voorbeeld is JPEG het juiste bestandsformaat. Voor beelden die transparante gebieden moeten bevatten, moet PNG worden geselecteerd. De bestandsgrootte van PNG-beelden is meestal wel flink groter dan die van JPEG-beelden.
  2. Kwaliteit: In de meeste gevallen is het voldoende om de kwaliteit op 60 te stellen voor het JPEG-formaat. Dan heb je een kleinere bestandsgrootte met een nog steeds zeer goede beeldkwaliteit. Men herkent het verschil in kwaliteit op 100 helemaal niet met het blote oog.
  3. Progressief: Als men een vinkje zet bij Progressief, wordt de afbeelding in meerdere passen gedownload. Dit betekent dat men bij een slechte internetverbinding eerst een wazig beeld ziet voordat het beeld volledig in de beste kwaliteit en resolutie wordt weergegeven.
  4. Zet het om in sRGB: Hier zetten we ook een vinkje, want dit is de kleurruimte die optimaal is voor het weergeven van beelden op het net.
  5. Metagegevens: Hier kunt je de instelling "Zonder" kiezen, omdat voor beelden op webpagina's meestal geen onnodige beeldinformatie (bijv. informatie over de gebruikte camera) nodig is.
  6. Beeldgrootte: De breedte en de hoogte van een afbeelding moeten zo groot zijn als nodig is. Het heeft geen zin om een afbeelding in 4000 x 2000 pixels te uploaden als deze slechts in een formaat van 600 x 300 pixels op de website wordt weergegeven.

Deze maatregelen verminderen de bestandsgrootte van een afbeelding met een veelvoud! In dit voorbeeld van 14,7 MB tot 57 KB.

Het correct benoemen van een beeldbestand

Bij het opslaan van de afbeelding moet een bestandsnaam worden toegewezen. Dit mag geen speciale tekens, umlauten bevatten. Bovendien moeten de woorden worden gescheiden door een koppelteken en niet door een spatie. Een voorbeeld voor de juiste naamgeving van een afbeelding zou zijn:

 

tuin-compositie.jpg

Comprimeer beelden nog beter met TinyPNG

Nadat we de geoptimaliseerde foto uit Photoshop hebben geëxporteerd, kunnen we deze deels nog verder verkleinen met behulp van het gratis gereedschap TinyPNG. Sleep het JPEG- of PNG-bestand naar de TinyPNG-website en de compressie start automatisch.

 

Deze coole tool is ook beschikbaar als WordPress plugin. De TinyPNG-plugin comprimeert automatisch elke afbeelding die je naar je WordPress-website uploadt.

Meer over dit onderwerp

Foto bewerken Photoshop
Foto bewerken tutorial - Photoshop van Adobe

Zwartwit met Photoshop
Zwart wit foto maken met kanaalmixer van Photoshop

Fotoprogramma vergelijken
Fotobewerkingsprogramma vergelijken - Adobe Photoshop Elements

HDR fotografie
HDR software - foto's combineren met Adobe Photoshop

Foto effecten
Foto pimpen en effecten - Picasa of Photoshop

Digitaal fotoalbum
Digitaal fotoalbum met Gallery of Adobe Photoshop

Beheer van foto's
Tips over het beheer van foto's

Picasa van Google
Picasa: gratis foto bewerk programma van Google

Cursus Adobe Lightroom
Cursus Adobe Lightroom - online Photoshop cursus

Fotoboek in Lightroom
Fotoboek ontwerpen in Adobe Lightroom 4