Welk type afbeelding moet ik gebruiken op mijn website?
Deze gids voor beginners legt eenvoudig uit wat de verschillende bestandsformaten voor afbeeldingen zijn en hoe je ze op de juiste manier op je website kunt gebruiken.
Dit artikel is geschreven door Daniel Dubois en vertaald naar het Nederlands door Johan van der Velde en stond in het Joomla Community Magazine van 20 april 2024.
Wat het thema van websites ook is, afbeeldingen zijn alomtegenwoordig: van het logo tot foto's van de producten of de teamleden, afbeeldingen zijn overal te vinden. We voegen al tientallen jaren afbeeldingen toe aan onze websites, maar doen we het wel goed? Deze vraag lijkt misschien vreemd voor velen van ons, maar op basis van wat ik zie op de websites van mijn klanten, is het niet zo'n domme vraag.
In dit artikel leg ik uit hoe je afbeeldingen optimaal kunt gebruiken als je een website beheert. Omdat deze gids vooral bedoeld is voor beginners, leg ik je uit welk type afbeeldingsbestand je het beste kunt gebruiken op je site, afhankelijk van de situatie. Ik ga van de meest klassieke (het JPEG vs PNG debat) naar de meest recente (WebP en AVIF).
JPEG-afbeeldingen: perfect voor foto's en achtergronden
Laten we beginnen met JPEG-afbeeldingen (.jpg en .jpeg bestanden), de meest gebruikte afbeeldingsbestanden op het web. Deze afbeeldingen zijn in rasterformaat en kunnen daarom niet goed worden vergroot, maar ze lenen zich wel uitstekend voor verkleining. Ze kunnen ook worden gecomprimeerd om sneller te worden geladen door bezoekers, wat ten koste gaat van hun visuele kwaliteit.
- Rasterafbeelding: correcte weergave na verkleining, slecht na vergroting
- Destructieve compressie: gereduceerd bestandsggrootte ten koste van de kwaliteit
- Gebruik op 72 dpi voor het web, en 300 dpi voor de afdruk
Joomla Logo in JPG formaat
Wanneer wel en niet JPEG-afbeeldingen gebruiken
✅ | ❌ |
---|---|
JPEG-afbeeldingen zijn prima voor achtergronden. Door hun compressie zijn ze lichter dan de PNG-equivalenten en de kwaliteitsvermindering is acceptabel voor een achtergrondafbeelding. | JPEG ondersteunt geen transparantie. Als de afbeelding op de voorgrond moet worden weergegeven en de achtergrond erachter zichtbaar moet zijn, kun je beter geen JPEG-indeling gebruiken. |
Een fotoreportage? Kies voor JPEG! Het is het standaard uitvoerformaat voor digitale camera's, dus je kunt er net zo goed je voordeel mee doen. |
Randen zijn minder duidelijk in JPEG-afbeeldingen. Kies voor een logo, afbeelding of diagram een ander formaat. |
Teksten zijn minder goed leesbaar in JPEG-afbeeldingen. Als de tekst belangrijk is (bedrijfsslogan, restaurantmenu), kun je overwegen om een ander formaat te kiezen. |
PNG-afbeeldingen, perfect voor duidelijke visuals met transparante achtergronden
De tegenhanger van het JPEG-formaat is het PNG-formaat (.png-bestanden). Dit formaat ondersteunt transparantie en heeft een duidelijkere weergave, maar de bestanden zijn groter.
- Rasterafbeelding: correcte weergave na verkleining, slecht na vergroting
- Niet-destructieve compressie zonder verlies: gereduceerd bestandsgewicht zonder kwaliteitsverlies
- Ondersteunt transparantie (achtergrond kan transparant weergegeven worden)
Joomla logo in PNG format
Wanneer gebruik je wel en geen PNG-afbeeldingen?
✅ | ❌ |
---|---|
PNG-afbeeldingen hebben hun plaats op de voorgrond. Hun scherpte en details maken ze erg aantrekkelijk, en dankzij hun transparante achtergrond kunnen ze netjes boven de achtergrond van de pagina worden geïntegreerd. | Gebruik het PNG-formaat niet voor grote bestanden. Een foto van meerdere megapixels zal veel zwaarder zijn in PNG-formaat. |
Eenvoudige PNG-afbeeldingen kunnen ook als achtergrond worden gebruikt. Eenvoudig betekent met weinig details, dus geen foto. Wees wel voorzichtig met de bestandsgrootte. | |
PNG-afbeeldingen geven teksten en contouren duidelijk weer. Het is perfect voor afbeeldingen waar tekst overheerst (logo met slogan, restaurantmenu), of wanneer geometrische vormen aanwezig zijn zoals grafiek, diagram, enz. |
Geanimeerde GIF's, perfect voor lage definitie animaties
GIF-animaties (.gif-bestanden) zijn gemaakt van een snelle opeenvolging van rasterafbeeldingen die beperkt zijn tot 256 kleuren. Ze waren helemaal in toen flitsende banneradvertenties en flitsende oproepen tot actie (een beetje te veel) werden gebruikt. Tegenwoordig zien we ze steeds minder op sites en steeds meer in instant messaging toepassingen.
- Rasterafbeelding: correcte weergave na verkleining, slecht na vergroting
- Beperkt kleurenpalet: maximaal 256 kleuren
- Ondersteunt transparantie
Joomla logo loader
Wanneer wel en niet GIF-afbeeldingen gebruiken
✅ | ❌ |
---|---|
Met GIF-afbeeldingen kun je kleine wachtanimaties weergeven (preloader). Er zijn er hier verschillende beschikbaar. | Geen controle mogelijk over de GIF-animatie. Het is niet mogelijk om een GIF-animatie te starten, te stoppen of terug te spoelen. Het speelt af in een lus, en dat is het. |
Met GIF-animaties kun je afbeeldingen animeren met een beperkt aantal kleuren. Een wenskaart bijvoorbeeld, of een verklarend diagram. | |
Met een GIF-animatie kun je een paar seconden van een film weergeven. Dit is heel gebruikelijk op blogs, sociale media, enz. |
Vector SVG, perfect voor illustraties en logo's
Laten we de wereld van de rasterformaten verlaten en overgaan naar het SVG-formaat (.svg-bestanden), dat vector is. Daarom ondersteunt het gemakkelijk formaatveranderingen, zowel vergroting als verkleining. SVG-afbeeldingen zijn altijd perfect scherp, terwijl andere formaten alleen scherp zijn als ze op de juiste grootte worden weergegeven.
- Vectorafbeelding: perfecte weergave ongeacht het formaat
- Standaard licht en snel te laden en weer te geven
- Ondersteunt transparantie
Joomla logo in SVG format
Wanneer SVG-bestanden wel en niet gebruiken
✅ | ❌ |
---|---|
Het SVG-formaat is perfect voor illustraties en logo's. Als er tekst is, vergeet die dan niet te vectoriseren. |
Het SVG-formaat is niet compatibel met foto's. Sorry, de echte wereld is geen vector! |
SVG-afbeeldingen zijn altijd scherp. Slechts één bestand en je kunt elk formaat op de site bekijken. | Wees voorzichtig met rendering in browsers! Het is bijvoorbeeld bekend dat de oude Internet Explorer kleurverlopen in SVG-afbeeldingen niet waardeert. |
Gevorderde gebruikers: SVG-afbeeldingen ondersteunen sommige CSS-animaties. |
WebP-indeling, perfect voor modern gebruik
Nu weboptimalisatie steeds belangrijker wordt, zijn er nieuwe afbeeldingsformaten zoals WebP ontstaan. Dit is meer gecomprimeerd, met gelijkwaardige rendering en wordt ondersteund door de meeste moderne browsers. Dit formaat zorgt voor een kortere laadtijd van de pagina en voorkomt dus dat je bezoekers verliest zodra ze op de site aankomen. Het gebruik ervan wordt ook aanbevolen in het kader van SEO.
- Rasterafbeelding: correcte weergave na verkleining, slecht na vergroting
- Destructieve compressie lossy met snellere en duidelijkere resultaten dan het JPEG-formaat.
- Ondersteunt transparantie
Het WebP-formaat wordt tegenwoordig breed ondersteund, op computer en mobiel (bron caniuse.com)
Wanneer wel en niet WebP-formaat gebruiken
✅ | ❌ |
---|---|
Naast JPEG- en PNG-afbeeldingen moeten ook WebP-afbeeldingen worden gebruikt. Ze worden breed ondersteund, het zou zonde zijn om ze te negeren. | Het is niet handig om het WebP-formaat te gebruiken op een intranet-bedrijfssite als de door het bedrijf aanbevolen browser dit niet ondersteunt. |
Een WebP-afbeelding gebruiken
Moderne afbeeldingsformaten worden niet rechtstreeks gebruikt in webpagina's, die verwijzingen naar klassieke afbeeldingen behouden (JPEG, PNG, enz.). Bestanden in moderne formaten worden opgeslagen in dezelfde map als de klassieke afbeeldingsversies. De webserver wordt dan ingesteld om automatisch moderne versies aan te bieden aan compatibele browsers wanneer ze klassieke afbeeldingen opvragen.
Lettertypen met pictogrammen, perfect voor het web
Dit artikel zou niet compleet zijn zonder het vermelden van pictogramlettertypes (.woff en .woff2 bestanden). Hiermee kun je pictogrammen gebruiken alsof het normale tekens zijn (lettergrootte, kleur, enz.). De bekendste is de bibliotheek Font Awesome die veel pictogrammen bevat (en standaard in Joomla 4 en Joomla 5 aanwezig zijn), of de service IcoMoon waarmee je je eigen lettertypen kunt maken.
- Font: perfecte weergave, ongeacht de grootte
- Eén bestand om te laden, duizenden iconen beschikbaar
Pictogrammen gedragen zich als tekst
Wanneer wel en niet een pictogramlettertype gebruiken
✅ | ❌ |
---|---|
Pictogramlettertypes zijn handig voor pictogrammen in één kleur die op veel plaatsen worden gebruikt, zoals sociale netwerken, deelknoppen, menuknoppen, zoeken, opsommingstekens, paginering, enz. | Geen meerkleurig pictogram. Elk weergegeven pictogram heeft slechts één kleur.. Elk weergegeven pictogram heeft slechts één kleur. |
Lettertypes met pictogrammen zijn altijd scherp. Elk teken is gebaseerd op een vectorafbeelding. |
Conclusie
Ik hoop dat je wat meer hebt geleerd over de verschillende soorten afbeeldingen die op een website kunnen worden gebruikt. Het is aan jou om te beslissen welk formaat je wilt gebruiken op basis van het gewenste resultaat.
Het is gebruikelijk om het ene of het andere type op dezelfde locatie te kunnen gebruiken (een logo met een transparante achtergrond kan zowel een PNG-afbeelding op het juiste formaat als een vector SVG-afbeelding gebruiken), maar dit artikel zou je de tips moeten geven om de juiste keuze te maken.
Bron Joomla Community Magazine april 2024: https://magazine.joomla.org/all-issues/april-2024/what-type-of-image-should-i-use-on-my-website
Dank aan Daniel Dubois!