Foto's en afbeeldingen optimaliseren en opslaan voor het web

 

 

Een snelle website met afbeeldingen

Hoe kleiner de omvang van web bestanden is des te sneller zal een website laden.
Een trage website kan bezig zijn hele mooie afbeeldingen te laden maar de kans dat de website wegeklikt wordt is groter.

Een snelle website is dus van belang en een afweging in kwaliteit en snelheid (kleine bestandsomvang kb’s) zal gemaakt moeten worden.

 

Bepaal eerst het formaat

Meestal wordt uitgegaan van de maximale breedte die wordt gebruikt in de website. De breedte is in pixels, niet in cm of mm.
Heeft een website een maximale breedte van 1020 pixels of bijvoorbeeld maximaal 600 pixels, neem deze breedte dan als uitgangspunt. Of liever nog de maximale breedte waarop een afbeelding gebruikt gaat worden.
Voor responsive afbeeldingen de maximaal te gebruiken breedte aanhouden.
Wordt een logo gebruikt op een breedte van 100 pixels houd dan ook 100 pixels aan.
Bij een breeder formaat wordt het bestand in omvang groter en de laadtijd langer. Ga dus uit van de maximale breedte en/of hoogte.

Maak altijd eerst een kopie van de afbeelding alvorens deze aan te passen en op te slaan zodat het origineel altijd nog te gebruiken is.

 

 

Soorten web-bestanden

Grofweg kunnen webafbeelding verdeeld worden in:

 

JPG-bestanden
Het bestandsformaat voor foto-bestanden
Er zijn diverse uitvoerings mogelijkheden qua kwaliteit: laag - normaal - hoog- zeer hoog - maximaal.
Voor web gebruik is meestal normaal of hoog genoeg.
Hoe scherper de foto (hogere kwaliteit) hoe groter het bestand.
Maak een afweging tussen kwaliteit en omvang en kies een instelling die in verhouding tot elkaar het beste resultaat geeft.

 

PNG-bestanden
PNG bestanden zijn zeer geschikt voor bijvoorbeeld logo of illustratie bestanden.
Er zijn 2 soorten PNG-bestanden
PNG-8
Voor afbeeldingen met vlakken zoals bij een logo en illustraties.
PNG-24
Voor foto-achtige afbeeldingen en afbeeldingen met een transparante achtergrond. Dit kan een logo of illustratie zijn maar dus ook een kleine foto.
Let er bij een foto met transparantie wel op dat het kleine bestanden betreft.
Een grote foto met transparantie als png neemt enorm toe in omvang, gebruik dan liever een achtergrond kleur en sla het op als een jpg-bestand.

 

GIF
Deze worden voornamelijk gebruikt voor kleine animaties.

 

Exporteren voor web

In photshop is een handige optie om bestanden op te slaan voor het web.
Hier kan bij jpg of png meteen voor verschillende instellingen worden gekozen. Het resultaat in kwaliteit en bestandsomvang is meteen te zien.
Er zijn ook volop andere fotobewerkingsprogramma’s om bestanden aan te passen en te exporteren.

 

Meta gegevens

Een bestand zit vol met onzichtbare informatie, de metagegevens, dat kan informatie van de camera zijn copyricht en dergelijke. Een bestand is van al deze extra informatie te ontdoen en zo wordt een bestand kleiner qua omvang en laad weer sneller.
Een programma om bestanden te optimaliseren en te ontdoen van extra overbodige gegevens:
Bijvoorbeeld voor mac: ImageOptim er zijn ook andere gratis programma’s, kwestie van uitproberen.

 

Bestandsnamen ! erg belangrijk

Fotobestanden hebben origineel een naam als DSC-0459.JPG of IMG_02145.JPG.
Gebruik deze namen niet!
Gebruik nooit bijzondere tekens als underscore _ uitroepteken! vraagteken? punt. of % * > enz.
Dit kan problemen veroorzaken!
Gebruik gewoon kleine letters met een normaal koppelteken- indien nodig (liefst niet meer dan 2 koppeltekens).

 

Bestandsnaam en SEO

Maak met de bestandsnaam een duidelijke omschrijving van de afbeelding en nummer ze eventueel om het overzichtelijk te houden.
Maak mappen om afbeeldingen te sorteren.
Bijvoorbeeld in de afbeeldingen map: natuur
Bestandnamen: lanschap-001-veluwe.jpg landschap-002-biesbosch.jpg enz.
Ook voor SEO om goed gevonden te worden in google is dit veel beter, google kan een foto niet zien maar de bestandsnaam wel lezen.

 

Hoge resoltie schermen

Met de komst van onder andere Apple retina schermen kan voor afbeeldingen met hogere resolutie worden gekozen om afbeeldingen veel scherper weer te geven dan de standaard webafbeeldingen. Echter geeft dit wel grotere bestanden en dus een langere laad tijd, het blijft een afweging tussen kwaliteit en bestandsomvang.

 

Hulp nodig bij het optimaliseren bestanden voor het web?

Voor foto's en het photoshoppen van afbeeldingen of illustraties en deze optimaliseren voor web-gebruik neem contact op.