Leerdoel
Als Mediavormgever is het belangrijk dat je weet hoe je bestanden geschikt maakt voor een website of app. Je kunt niet elk bestand in een website verwerken. En de bestanden die wel geschikt zijn voor een website moeten geoptimaliseerd zijn voor een website:
- Het bestand mag niet te zwaar zijn. Het bestand mag niet teveel KB of MB wegen.
- Het bestand moet de juiste breedte en/of hoogte hebben. Breedte en hoogte meten we op een website in pixels.
- Het bestand moet van de juiste extensie zijn. Een extensie is bijvoorbeeld .jpg of .mp4
Bekijk deze pagina om te zien hoe een SVG, WEBP PNG (24 of 8), JPG en GIF er uit zien op een achtergrondplaatje.
Heb jij Photoshop in het Nederlands? Bekijk dan deze pagina voor de vertalingen van de tools en menu’s.
Instructie video’s bestanden geschikt maken voor web
- Afbeeldingen (stop je in een
<img>tag)- Bestanden aanpassen (Photoshop) (4:18 min.)
- SVG maken met Illustrator (6:44 min.)
- WEBP bestand maken met Photoshop (3.35 min.)
- Met Illustrator snel meerdere bestanden maken en vergelijken (3.53 min.)
- Oud: Wanneer maak je een JPG en wanneer een PNG? Save for Web in Photoshop (5:17 min)
Deze instructie is wat oud. JPG en PNG zijn ondertussen vervangen door WEBP.
- PDF (stop je in een
<iframe>en niet in een <img> tag. Een PDF is geen afbeelding!) - Video (stop je in een
<video>tag of zet je op een streaming dienst zoals Youtube)
Welk soort afbeelding moet ik maken?
Is het een foto?
Probeer eerst WEBP
Is het een logo gemaakt met Illustrator?
Probeer SVG
WEBP en JPG gebruik je voor foto’s,
SVG en PNG voor logo’s en tekeningen.
Want:
Een foto opslaan als WEBP en JPG is meestal beter van kwaliteit en lichter qua KB’s dan dezelfde afbeelding als PNG of GIF
En andersom:
een logo of lijntekening opslaan als SVG of PNG is meestal lichter en beter van kwaliteit dan dezelfde afbeelding als JPG
Is het een animatie? Dan kan je een ouderwetse GIF maken of een WEBP.
SVG kan ook maar dan moet je programmeren.
Breedte en hoogte
Maak een afbeelding voor een website niet groter dan de breedte of hoogte van een groot beeldscherm.
Breedte:
Een hero afbeelding of een fullscreen afbeelding is tussen 1600px en 3000px breed, dan past jouw plaatje prima op kleinere en grotere schermen.
Hoogte:
Maak een plaatje nooit hoger dan een het zichtbare deel van je browser (Safari, Chrome, Edge). Is een plaatje hoger dan je scherm, dan moet je scrollen om hem te kunnen zien. De hoogte van een browser op een Macbook pro 13″ is bijvoorbeeld tussen de 700px en 800px. Niet heel hoog dus.
Afbeeldingen
Afbeeldingen stop je in een <img>. Lees hier meer over de img tag. Stop een afbeelding niet in een <iframe>. Dat is lelijk.
Afbeeldingen zijn .jpg, .gif, .png of .svg en .webp
Gewicht
Het gewicht van een afbeelding op een webpagina moet niet zwaarder zijn dan zo’n 500Kb.
Hoe zwaarder, een plaatje, hoe langzamer de pagina laadt.
Vergroten en verkleinen
Vergroten van een plaatje is niet een goed idee, tenzij het een vector afbeelding is, zoals een SVG. Een plaatje wordt lelijk bij vergroting.
Verkleinen kan wel.
Wanneer gebruik je een webp?
WEBP is geschikt voor bijna alle afbeeldingen. Soms is het beter om een SVG te maken omdat dat nog lichter is.
Een webp bestand sla je op via:
- Photoshop met Save As. Zet je afbeelding wel eerst in de RGB Color modus.
- Illustrator met Asset export
Lees hier meer over WebP bestanden
Wanneer gebruik je svg?
SVG is een schaalbaar vector plaatje (Scalable Vector Graphic). Dit is heel licht en heel goed van kwaliteit. Vooral logo’s en strakke vormen zijn geschikt voor SVG. Een svg maak je bij voorkeur illustrator. Met Photoshop kan ook, maar dan wordt het een nep svg: een png in svg jasje… niet schaalbaar en veel te zwaar.
What are SVG Images?
Heel interessante uitleg over SVG vergeleken met JPG, PNG en GIF van Kirupa
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 ondertussen een beetje ouderwets maar wordt nog veel gebruikt.
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.
PNG is er in twee varianten: PNG 8 en PNG 24. PNG 24 heeft transparantie maar is veel zwaarder (KB) dan PNG 8. Een png of gif sla je op via bijvoorbeeld Photoshop of Illustrator.
Video
Video’s zet je bij voorkeur op een streaming dienst zoals Youtube, Vimeo. Zo’n video embed je dan via een iframe. De code kopieer je via de delen functionaliteit van Youtube of Ms Stream.
Video’s op je eigen server van het Mediacollege zetten heeft 2 nadelen: je server ruimte is heel snel vol. Je hebt maar 1GB. En het streamen video zonder streaming dienst als Youtube is trager. Een video op je eigen server maak je met een video tag
Youtube
Youtube is natuurlijk gratis en veel studenten hebben daar een account. En de streaming dienst is van heel goede kwaliteit. Maar youtube heeft ook nadelen:
Nadelen Youtube
- Youtube levert je ook reclame en aan het eind van je video krijg je altijd suggesties voor meer video te zien.
- Heb je een bekend muziek nummer (wat niet rechtenvrij is) in jouw filmpje verwerkt? Dan kan je je filmpje niet insluiten in jouw website.