Websites en Meer
Om u indruk te laten maken op de rest van de wereld

Insigth is een serie artikelen over onderwerpen op het gebied van Internet in brede zin.

Variƫrend van 'how to' tot de laatste trends.

vrijdag, 26 oktober 2018 11:31

Het juiste formaat afbeelding

Geen onnodige ballast voor de browser

Als fotograaf wil je dat je foto's er zo goed mogelijk uitzien. Je zet ze dus in 100% jpeg kwaliteit op je website, en aangezien ze in hoge resolutie beschikbaar zijn ze je ze ook groot op het web.
Iedereen met een hoge kwaliteit monitor kan ze dan optimaal bewonderen. En voor iedereen met een klein beeldscherm zal de browser ze wel schalen. Lijkt de juiste aanpak. Of toch niet.....

Helaas is dat niet de juiste aanpak. Om een foto te optimaliseren voor een website zijn 2 punten van belang: bestandsgrootte en compressie.

Bestandsgrootte
De bestandsgrootte van een ongecomprimeerde afbeelding/foto is (pixels-hor x pixels-vert x bit diepte per kanaal)/(8 x 1024) KB. Hierbij is de bitdiepte meestal 24 (=3x8) voor RGB afbeeldingen met 16,7 miljoen kleuren.
Een foto van 600x400 pixels is dan (600x400x24)/(8x1024) = 703KB. Als je voor alle zekerheid de afbeelding 2 keer zo groot naar de browser stuurt wordt de bestandsgrootte (1200x800x24)/(8x1024) = 2,813 KB hetgeen 4 keer zo groot is. Als de afmetingen 2 keer zo groot zijn wordt de bestandsgrootte dus 4 keer zo groot, en voor een afmeting die 10 keer zo groot is wordt de bestandsgrootte 100 zo groot!

examplevoorbeeld van jpeg onzuiverhedenComprimeren
Beeldschermen (ook die dure Apple monitor) zijn geen match voor een goede kwaliteit afdruk. Een foto met 100% kwaliteit op een website plaatsten is dan ook (meestal) zonde van de bandbreedte die het kost om een dergelijke afbeelding te versturen. Het gaat vooral ten koste van  je website performance.

Afbeeldingen/afbeeldingen voor een website moet je eigenlijk altijd comprimeren, vooral als de afbeelding van hoge kwaliteit is. Hoeveel compressie je kunt toepassen hang af van de uitgangskwaliteit van de afbeelding. Comprimeer de afbeelding tot je teveel vertekening ziet verschijnen in de gecomprimeerde afbeelding (zie bijgaande afbeelding). Afbeeldingen op mijn fotowebsite (ArFU.nl) zijn meestal op 60% kwaliteit.

Tools voor compressie zijn bv. Photoshop, Lightroom en https://tinyjpg.com/ voor online compressie.

Samengevat
Plaats afbeeldingen zo veel mogelijk in de resolutie waarin ze op de website worden geplaatst. Comprimeer afbeeldingen totdat er teveel vertekening zichtbaar wordt.

Aangepast op zondag, 02 december 2018 10:41

Vragen over bovenstaande artikel?

Neem contact op met 2BVisible voor een antwoord

 

Neem contact met mij op

Deze website legt gegevens vast over het gebruik van de website. Hierbij worden geen tot individuele personen herleidbare gegevens vastgelegd. Door gebruik maken van 2BVisible.nl gaat u hiermee akkoord.