Optimaliseer afbeeldingen voor het web met Photoshop

"MsoTitle" style="border:none; margin:0cm 0cm 3pt">Optimaliseer afbeeldingen voor het web met Photoshop

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">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.

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">

Snelle pagina laadsnelheid voor betere posities in Google

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">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.

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">We gebruiken hier de nieuwste Photoshop-versie CC 2020, maar de genoemde instellingen kunnen ook naar vele andere beeldbewerkingsprogramma's worden overgezet.

"Koptekst2" style="border:none; margin:18pt 0cm 6pt">Exportfunctie Photoshop: Opslaan voor Web

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">Om de afbeelding te exporteren, kies je in Photoshop het commando:

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">Bestand > Exporteren > Opslaan voor web

De juiste instellingen voor exportfunctie voor het web

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">De exportfunctie voor het web biedt je nu enkele instellingen. De belangrijkste staan hieronder vermeld:

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">

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.
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.
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.
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.
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.
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.

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">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

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">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:

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">tuin-compositie.jpg

Comprimeer beelden nog beter met TinyPNG

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">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.

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">

"Hoofdtekst" style="border:none; margin:0cm 0cm 0.0001pt">Deze coole tool is ook beschikbaar als WordPress plugin. De TinyPNG-plugin comprimeert automatisch elke afbeelding die je naar je WordPress-website uploadt.