We gebruiken cookies om content en advertenties te gebruiken, om functies voor social media te bieden en om ons websiteverkeer te analyseren. We delen ook informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse.

4.375 1 1 1 1 1 1 1 1 1 1 Rating 4.38 (4 Votes)

PhotoshopDeze tip legt uit hoe u afbeeldingen of foto's in het .png bestandsformaat optimaliseert voor gebruik op het web met Adobe Photoshop.

Als u afbeeldingen of foto's opslaat voor gebruik op een website, doet u dat in principe altijd in het .gif of .jpg formaat. Toch zijn er voldoende situaties te bedenken waarbij u genoodzaakt wordt om het .png formaat te gebruiken.

Het .png bestandsformaat is kwalitatief hoogstaand voor het opslaan van afbeeldingen of foto's. Nadeel aan het .png formaat is echter dat de bestandsgrootte omvangrijk blijft wat op zijn beurt weer nefaste gevolgen heeft bij gebruik op bijvoorbeeld websites. Grote bestanden zorgen voor tragere laadtijden op webpagina's. Nu beschikt Adobe Photoshop uiteraard over gereedschap om bestanden in het .png formaat te optimaliseren, maar met een extra trucje, kunt u zelfs nog betere resultaten behalen.

Adobe Photoshop: PNG bestanden optimaliseren voor het web

  • Als u met Adobe Photoshop afbeeldingen wilt optimaliseren voor het web, doet u dat in principe via Bestand > Opslaan voor web en apparaten (zie schermafdruk).

Pngoptimaliseren1

  • Bij het venster dat volgt selecteert u in normale omstandigheden dan het .gif of .jpg formaat, maar omdat we er van uit gaan dat u genoodzaakt bent om het .png formaat te gebruiken, selecteert u het png-24 bestandsformaat om de beste kwaliteit te behouden.
  • Nu kunt u meteen op Opslaan klikken, maar via een kleine omweg kunt u de bestandsgrootte nog beter beperken. We geven een voorbeeld.

De afbeelding dat wij gebruikte is origineel 641k groot. Als we deze openen in Adobe Photoshop en daarna Opslaan voor web en apparaten (png-24), blijft daar nog 187,3 k van over.

Pngoptimaliseren2

Een mooi eindresultaat, dat spreekt, maar toch kan het nog beter door het volgende te doen.

  • Open de afbeelding in Adobe Photoshop en klik in het menu op Afbeelding > Aanpassen > Waarden beperken (Posterize).

Pngoptimaliseren3

  • Bij het venster dat opent, verplaatst u de schuifregelaar naar een (lager) niveau dat een voor u aanvaardbare kwaliteit oplevert.

Pngoptimaliseren4

  • Bent u tevreden over de kwaliteit van de afbeelding, bevestigt u met OK.
  • Nu kunt u via Bestand > Opslaan voor Web en apparaten (zie schermafdruk1) en de afbeelding opslaan (png-24).
  • De bestandsgrootte van ons voorbeeld bedroeg na deze handeling 140,7k, een besparing van maar liefst 47k, en dat zonder noemenswaardig kwaliteitsverlies.