Introductie
Deze pagina gaat onder andere over het maken van verschillende afbeeldingen die geschikt zijn voor web. Wanneer maak je een jpg, wanneer een svg of een png? Svg en jpg zijn bestands-extensies.
Bestands-extensies
Alle bestanden op een computer hebben een bestands-extensie. Dat zijn de 3 of 4 letters achter de punt van een bestandsnaam. Hierdoor weet een computer wat voor type bestand het is en wat die er mee moet doen. Een bestand met de extensie .psd wordt geopend in Photoshop. Een bestand met het type .html in een code editor of een browser. Je kunt een bestands-extensie niet zomaar aanpassen. Als je in Finder (of Windows Verkenner) de extensie .psd wijzigt naar .jpg heb je nog geen jpg en is het plaatje eigenlijk kapot. Dat kan alleen via een programma zoals Photoshop.
JPG of PNG? Save for Web
Met de Photoshop functie ‘Save for Web’ (NL: Opslaan voor Web) kun je heel goed beoordelen of je van jouw afbeelding beter een png of een jpg kunt maken. Afhankelijk van jouw afbeelding produceer je een jpg of een png. Dit kan natuurlijk ook prima met de ‘Export As’ functie. Beide functionaliteiten zijn te vinden onder File > Export.
Stelregel: JPG gebruik je voor foto’s, PNG voor logo’s.
Want:
- Een foto opslaan als JPG is meestal beter van kwaliteit en lichter qua Kb’s dan dezelfde afbeelding in PNG
- En andersom: een logo of lijntekening opslaan als PNG is meestal lichter en beter van kwaliteit dan dezelfde afbeelding als JPG
Bekijk deze pagina om te zien hoe een PNG 24, PNG 8, JPG en GIF er uit zien op een achtergrondplaatje.
Action opnemen en meerdere bestanden batchen
Soms is het handig om bewerkingen in Photoshop op te nemen zodat je ze kan toepassen op meerdere bestanden of een hele map met afbeeldingen. In deze instructievideo leer je hoe je dat doet.
Afbeeldingen
Stelregel PNG vs JPG
JPG gebruik je voor foto’s,
PNG en SVG voor logo’s.
Want:
Een foto opslaan als JPG is meestal beter van kwaliteit en lichter qua KB’s dan dezelfde afbeelding in PN
En andersom:
een logo of lijntekening opslaan als PNG is meestal lichter en beter van kwaliteit dan dezelfde afbeelding als JPG
Tip hero image
Een hero afbeelding of een fullscreen afbeelding is tussen 1600px en 3000px breed, dan past jouw plaatje prima op kleinere en grotere schermen.
Want:
Het gewicht in KB is maximaal 500px maar liever kleiner. Zorg wel dat de kwaliteit goed blijft. Dus haal bij JPG niet de kwaliteit teveel naar beneden.
Afbeeldingen stop je in een img tag. Afbeeldingen zijn jpg, gif, png of svg.
Wanneer gebruik je een jpg?
JPG is het meest geschikt voor foto’s. Foto’s van je telefoon of camera bijvoorbeeld. Een jpg sla je op via bijvoorbeeld Photoshop. JPG is goed in kleurovergangen en en afbeeldingen met veel kleur en kleurverloop. JPG’s maak je met Adobe Photoshop.
Waneer gebruikt je gif of png?
GIF en PNG zijn vooral geschikt als logo. Strakke vlakken? Dan GIF of PNG. GIF is wat ouderwets. Tegenwoordig gebruiken we vooral png. Tenzij je natuurlijk een animated gif maakt.
2 soorten PNG
PNG is er in twee varianten: PNG 8 en PNG 24.
PNG 24 heeft 100% transparantie. D.w.z. dat er een perfecte overgang is van kleur naar transparante delen van de afbeelding. PNG 24 heeft veel meer kleuren dan PNG 8 maar is veel zwaarder (KB) dan PNG 8. PNG 8 en GIF hebben slechts 256 kleuren. PNG 24 heeft 2563 kleuren. Dat is 256 x 256 x 256 kleuren. Een png of gif sla je op via bijvoorbeeld Photoshop of Illustrator.
Wanneer gebruik je svg?
SVG is een schaalbaar vector plaatje (Scalable Vector Graphic). Dit is heel licht in Kb en heel goed van kwaliteit. Vooral logo’s en strakke vormen zijn geschikt voor SVG.
SVG beter niet met Photoshop maken
Een svg kun je met zowel Adobe Photoshop als met Adobe Illustrator maken. Maar Photoshop genereert geen goede svg. Als je de svg opent in een code editor zoals Visual Studio Code dan zie je dat er eigenlijk een png wordt verpakt in een svg. De svg is ook nog eens zwaarder dan hetzelfde plaatje in png formaat.
Maak een svg met Illustrator
Een svg gegenereerd met Adobe Illustrator is wel een echte svg. Als je de svg in een code editor laadt zie je een soort van xml code waar ook vaak CSS in staat. Zo’n svg is veel lichter dan de svg die Photoshop genereert en is schaalbaar zonder kwaliteitsverlies. Een prachtig bestandsformaat voor websites dus.
Een svg die door Illustrator is gegenereerd zou je kunnen animeren in een html pagina d.m.v. javascript.