Te zware afbeeldingen zijn de belangrijkste oorzaak van een te lange laadtijd van je website. Ik leg je uit hoe je dit gemakkelijk kan vermijden.
Wanneer is een beeld te klein of te groot?
Eerst ga ik je uitleggen waar je de grootte van een afbeelding kan terugvinden. Klik met je rechtermuisknop op je beeld. Als het goed is zie je nu iets als ‘toon info’ (Mac), of ‘eigenschappen' tabblad ‘detail’(PC). Je ziet hier 2 zaken, de grootte en de afmeting van je beeld.
De grootte bepaald hoe zwaar je beeld is, het gewicht. Dit wordt weergeven in kB of MB. 1000kB = 1MB. Hoe groter (zwaarder) je bestand, hoe langer je website nodig heeft om te laden. Voor een website hanteren we een maximum van 500kB per beeld.
De afmeting is dus de hoogte en breedte van je afbeelding. Op een beeldscherm worden hoogte en breedte van afbeeldingen weergeven in pixels (px). Voor een afbeelding over het volledige scherm kun je 2400 pixels breed aanhouden. Voor een afbeelding half je scherm neem je 1200 pixels.
Voor een beeld over de gehele breedte gaan we niet groter dan 500 kB. De meeste afbeeldingen op je website zijn 300 kB of minder.
Pixels bepalen de kwaliteit van je beeld, dit noemen we resolutie.
Een beeld op je scherm bestaat uit pixels. Veel pixels bij elkaar vormen samen een beeld. Hoe meer pixels bij elkaar, hoe hoger het aantal, hoe hoger de resolutie en hoe scherper je beeld. Een pixel is een gekleurd punt, elk punt bestaat uit één kleur. Als je de pixels van je afbeelding vermindert verander je de afmeting, je beeld wordt kleiner en lichter.
Let wel op, niet vergroten. Anders worden je pixels zichtbaar. Je beeld wordt minder scherp en dus minder van kwaliteit. Is ook niet nodig, de meeste beelden zijn eerder te groot voor op een website. Je past een beeld dus aan door de pixels te verminderen. Zo eenvoudig is het.
Wil je nog wat bijleren? Lees dan nog even verder.
Je leest nog heel vaak dat je een beeld voor op scherm naar 72 dpi (dots per inch) moet aanpassen. Veel fotoprogramma's hebben deze instelling ook. Eigenlijk klopt dit sowieso al niet want dpi staat voor dots per inch en is enkel voor drukwerk. Voor drukwerk heb je 300dpi nodig. Hoe dichter de dots - de puntjes - bij elkaar staan binnen die inch hoe scherper je drukwerk zal zijn.
Voor een afbeelding op scherm spreken we van pixels, ppi (pixel per inch). Maar het heeft totaal geen nut om hier rekening mee te houden. Het heeft geen invloed op de beeldkwaliteit en het gewicht van je beeld op scherm. Het verandert dus niets aan het verkleinen of lichter maken van je beeld.
Hieronder een voorbeeld, dezelfde afmeting maar telkens met een ander ppi. In dit geval: 7, 72 en 700ppi. Deze beelden wegen allemaal hetzelfde, namelijk 216kB, en hebben geen kwaliteitsverlies.
Je ziet het al, geen verschil. Maar als ik de afmeting, de pixels aanpas merken we uiteraard wel een groot verschil. Hieronder een voorbeeld van 600px, 400px en 200px allemaal met 7 ppi. Deze beelden hebben wél een ander gewicht:
600px > 216kB
400px > 125kB
200px > 53kB
Een duidelijk verschil in kwaliteit, toch? Als je dit blog op je gsm leest, zal het misschien iets minder zichtbaar zijn.
Zoals je ziet is 600px in de meeste gevallen het minimum. Tenzij je thumbnails gebruikt op je website, heel kleine afbeeldingen. Gebruik je een keer een te zwaar beeld, stress dan niet. Je website gaat pas vertragend laden als je altijd zware afbeeldingen gebruikt. Zolang je niet boven de 1MB komt per beeld uitkomt is dit ok. Maar probeer de richtlijnen zoveel mogelijk te respecteren.
Hoe bewaar ik mijn afbeelding het best?
Om het simpel te houden heb je 2 bestandstypes. JPG en PNG. Dit zijn 2 verschillende bestandstypes die je nodig hebt voor je website.
JPG is geschikt voor afbeeldingen met veel kleine details of kleuren. Als je niet in RAW fotografeert zal je camera je afbeelding omzetten in een JPG. Een JPG slaat deze details compacter op, zodat je bestand niet overdreven zwaar wordt.
PNG is geschikt voor logo’s, iconen, maar ook voor afbeeldingen met teksten en tekeningen. Een PNG wordt vooral gebruikt als je een transparante achtergrond wil hebben. Een logo in JPG heeft altijd een achtergrondkleur. Maar ook als je soms niet wilt inleveren op bepaalde details in een afbeelding. Een PNG bestand heeft minder last van de lelijke vlekken van bijvoorbeeld een JPG bestand. Hierdoor zijn de bestanden wel iets groter en ‘zwaarder’.
Hieronder een voorbeeld van een logo met en zonder achtergrond. Dit logo is een PNG bestand, je hebt de mogelijkheid om je logo van een transparante achtergrond te voorzien, of je kiest om je letters doorzichtig te maken, dit kan een leuk effect opleveren.
True colors
Voor schermgebruik kies je RGB kleuren. Voor drukwerk kies je CMYK.
Hoe werkt een scherm?
Je hebt verschillende beeldschermen. Zo heb je er van 1024 x 768px. Tegenwoordig heb je ook 4K schermen van 3840 x 2160px. Die hebben vier keer zoveel pixels als traditionele Full HD met 1920 x 1080px schermen. Dit heeft niet met de afmeting van je scherm te maken, maar met de aantal aanwezige pixels. Maar in de meeste gevallen heeft een groter scherm ook meer pixels natuurlijk.
Bij een hogere beeldschermresolutie zien beeld en tekst er scherper uit. Als je een scherm hebt met een lage resolutie, en je ziet hierop een beeld met een hogere resolutie dan het scherm waarop je ziet. Dan ga je het beeld niet scherper zien dan de resolutie van je scherm.
Je schermresolutie bepaald hoe een beeld wordt gezien. Denk aan een oude TV, als je daar een beeld van hoge resolutie op zou zien, zal de beeldkwaliteit sowieso een stuk minder zijn dan wanneer je dit beeld op je nieuwe flat screen ziet.
Waarom je dan toch grotere afbeeldingen plaats dan de pixels op je eigen scherm? Omdat je wil dat je website ook mooi oogt op vrijwel alle schermen. We vertrekken vanuit een groter formaat. Je website past dit beeld - als het goed is - automatisch aan voor kleine schermen.
Wat hebben we geleerd vandaag?
Een afbeelding bestaat uit een gewicht en een afmeting.
Door de afmeting, de pixels te verminderen, verklein je je beeld.
We houden geen rekening met dpi of ppi op scherm, enkel wanneer we iets afdrukken.
Je scherm bestaat uit pixels, drukwerk bestaat uit dots.
Hallo ik ben Sirri. Ik ben fotograaf en grafisch vormgever met een marketing achtergrond. Mijn kennis gaat verder dan enkel het maken van beelden. Die deel ik graag met jou in mijn blogs.
Mijn volgend blog gaat over het benoemen van je beeld wanneer je deze op je website plaats. Dit heeft een positieve inpakt op hoe je gevonden wordt door meneer Google.
Wil je graag op de hoogte blijven van nieuwe blogs? Schrijf je hier in op mijn nieuwsbrief. Tot binnenkort!
Groeten,
Sirri
Comments