Foto’s en illustraties kunnen een website veel kracht bijzetten. Maar ze kunnen jouw website ook flink vertragen als je ze niet eerst verkleint. Ik deel graag mijn do’s en don’ts voor werken met afbeeldingen op websites.
Inhoud
- Verklein de bestandsgrootte voordat je ze uploadt
- Geef de afbeelding een veelzeggende bestandsnaam
- Geef de afbeelding een beschrijvende alt-tekst mee
- Kies relevante afbeeldingen
Verklein de bestandsgrootte van afbeeldingen voordat je ze uploadt
Misschien heb je professionele foto’s laten maken of heb je ze als stockfoto gedownload, hoe dan ook, de originele bestanden zijn meestal gigantisch.
Een foto van 7000 pixels breedte, opgeslagen in maximale kwaliteit, kan al snel 20 MB zijn. Deze afmetingen en kwaliteit heb je zeker nodig als je de foto’s wilt laten afdrukken, maar niet voor een website.
Ik probeer altijd minimaal onder de 0,5 MB te blijven per foto. Waarom? Hoe zwaarder een bestand op jouw webpagina, hoe langzamer de pagina laadt. Als jouw pagina 8 foto’s van 20 MB heeft, zal het traag als een slak worden.
Je wilt de bestandsgrootte van afbeeldingen zo laag mogelijk houden zonder dat de kwaliteit eronder gaat lijden.
Afbeeldingen verkleinen in 3 stappen
- Verklein de afmetingen:
Hoe klein? Ik verklein mijn liggende foto’s altijd tot 2500 pixels breedte, en mijn staande foto’s tot 2500 hoogte. Groter zul je doorgaans niet nodig hebben. - Sla op als JPG bestand:
Afbeeldingen worden meestal opgeslagen als JPG, PNG of GIF. Voor foto’s geeft JPG de kleinste bestandsgrootte. GIF is voor bewegend beeld en PNG voor illustraties met transparante achtergrond. Niet nodig? Sla op als JPG. - Sla op in 30-80% kwaliteit:
JPG kun je opslaan in lagere kwaliteit, bijvoorbeeld 40% in plaats van 100%. Dit maakt de bestandsgrootte een stuk kleiner, terwijl ons blote oog geen of nauwelijks verschil ziet in kwaliteit.
“Ja, maar ik heb geen Photoshop…”
Heb je geen beeldprogramma waarmee je zelf de bovenstaande stappen kunt zetten? Je kunt ook een website zoals Birme gebruiken. Upload jouw foto’s, kies 2500 pixels breedte met auto-height plus bijvoorbeeld 50% JPEG kwaliteit.
Voorbeeld
Laten een voorbeeld pakken. De onderstaande foto was origineel 17,3 MB met afmetingen van 6680 x 4458 pixels. Verkleind tot 2500 x 1668 pixels is de foto “slechts” 2,7 MB. En opgeslagen met 40% kwaliteit is het nog maar 0,3 MB.
Een verschil van 17 MB!
| Grootte | Afmetingen | Kwaliteit |
|---|---|---|
| 17,3 MB | 6680 x 4458 pixels | 100% JPG |
| 2,7 MB | 2500 x 1668 pixels | 100% JPG |
| 0,3 MB | 2500 x 1668 pixels | 40% JPG |
Geef een veelzeggende bestandsnaam
Wil je zoekmachines zoals Google aanwijzingen geven over wat er op jouw foto afgebeeld staat? Geef hints in de bestandsnaam. Zo zegt zijden-trouwjurk-maggie-sottero.jpg meer dan foto203941.jpg.
Je hoeft niet per se super specifiek te zijn, gebruik een aantal steekwoorden.
Bij een foto van mezelf doe ik altijd mijn naam plus bedrijfsnaam, dus “linsey-van-brander-en-brander.jpg”.
Als je een lading foto’s hebt, bijvoorbeeld een reportage, kun je ook alleen het overkoepelende onderwerp benoemen, zoals: “perzische-bruiloft-in-parijs-001.jpg”, “…-002.jpg”, “…-003.jpg” enzovoorts.
Geef een beschrijvende alt-tekst
Je kunt ook een korte beschrijving meegeven aan jouw afbeelding. Deze alternatieve tekst (afgekort alt-tekst) is onzichtbaar voor mensen, maar wordt gebruikt door Google en screenreaders om jouw afbeelding te begrijpen.
Je hoeft afbeeldingen niet per se een alt-tekst te geven, maar het is wel een goede gewoonte om te hebben. Wees niet te lang, beschrijf in een paar woorden of korte zin wat er op de foto of illustratie afgebeeld staat.
Lees verder: Uitleg van Google over alt-teksten met voorbeelden
Website Gids: 29 tips voor een luxe & professionele website
- 29 tips rondom webdesign, fotografie en webteksten
- Praktische before/after voorbeelden
Na dit ebook snap je wat een website een luxe en professionele uitstraling geeft. Handig als je je prijzen wilt verhogen, bijvoorbeeld.
Toch niet tevreden? Binnen 14 dagen geldteruggarantie.
Kies relevante foto’s
Het liefst gaat de afbeelding direct over het onderwerp van de pagina. Dit helpt de bezoeker sneller inschatten waarover de pagina gaat.
Soms zijn foto’s vooral decoratief. Zoals bijvoorbeeld de foto bovenaan dit artikel. Let er dan op dat de foto niet clasht met het onderwerp. Een foto van een hond op een pagina over appeltaart schept alleen maar verwarring (“Ben ik wel op de goede pagina? Is het een taart voor honden?”).
En wil je met jouw foto hoog in Google Images komen?
Dan moet het helemaal goed aansluiten op de tekst! Google kijkt tijdens het rangschikken ook naar de content omdat ze willen dat jouw pagina bezoekers die op jouw foto klikken verder helpt. Een willekeurige foto of een foto op een lege pagina zal niet hoog ranken.
Toch liever een professionele website laten maken?
Wij maken websites voor ondernemers. Je krijgt een website die bezoekers het vertrouwen geeft: ik zit hier goed. Verkoop jezelf (nog) makkelijker met je eigen professionele website.
- Mooi en overzichtelijk webdesign
- High-end fotografie die je divers kunt inzetten
- Volgens de laatste SEO/Google richtlijnen
- Een WordPress website die technisch klopt
Je werkt met Linsey en Mandy, twee zussen. De een webdeveloper & webdesigner, de ander fotograaf.
Ook pakkende webteksten nodig? We werken samen met twee leuke en ervaren copywriters.
