11. Afbeeldingen op je site

11.1 Kenmerken afbeelding

Een afbeelding heeft een paar technische kenmerken:

• de resolutie: het aantal pixels per inch of centimeter
• het bestandsformaat: png, gif, svg of jpg
• de afmetingen: de breedte en de hoogte in pixels (uitgezonderd svg-afbeeldingen)
• de grootte van de afbeelding in bytes

Svg staat voor Scalable Vector Graphics. Deze zijn schaalbaar en hebben dus geen vaste grootte.

11.2 Resolutie is niet belangrijk voor het web

Om maar gelijk een mythe de wereld uit te helpen: voor het web is de resolutie van een afbeelding helemaal niet belangrijk.

De resolutie heeft enkel te maken met het printen (drukken) van de afbeelding, niet met de weergave op een beeldscherm. Dus de resolutie die een afbeelding heeft kun je bij het bewerken gerust zo laten staan.

11.3 Bestandstype

Voor afbeeldingen voor het web zijn 4 geschikte formaten:

1. gif: geschikt voor afbeeldingen met vlakken, zoals logo's
2. jpeg (jpg): geschikt voor afbeeldingen met veel kleuren, zoals foto's
3. png: geschikt voor alle soorten afbeeldingen (combinatie van gif en jpeg).
4. svg: geschikt voor schaalbare afbeeldingen, zoals logo's

Een belangrijk kenmerk van gif en png is dat zij ook transparantie ondersteunen.

Png lijkt dus het ideale formaat, omdat het voor alle type afbeeldingen geschikt is, maar png blijkt vaak veel grotere bestanden op te leveren dan gif of jpeg. Jpeg of gif is toch vaak beter.

11.4 Formaat van de afbeeldingen

Dan de grootte van de afbeeldingen in pixels. Wat je moet voorkomen is dat de afbeelding geresized wordt in de browser. Dat gebeurt als de afbeelding in een groter formaat op de server staat als dat deze in je webpagina getoond wordt. Dus als het formaat waarop de afbeelding getoond wordt 100 bij 200 pixels is (dus het formaat in de browser), dan moet de afbeelding op de server exact dezelfde maten hebben.

Vaak staat de afbeeldingsgrootte in de html aangegeven. In de browser kun je dit zien als je de html bekijkt van de afbeelding, bijvoorbeeld:

Het betekent niet dat deze maten ook de echte afmetingen van de afbeelding zijn. Je kunt checken of de grootte in de browser klopt met de werkelijke grootte van de afbeelding met de tool Web Developer in Firefox. Kies dan de optie Images ▸ Make Images Full Size.

Het groter of kleiner maken van een afbeelding in de browser heet resizen. Het resizen in de browser heeft een aantal nadelen:

• Downloaden van een te grote afbeelding kost meer tijd.
• De afbeelding wordt onscherper, want een browser kan slecht verkleinen en vergroten.

Zorg dus dat het juiste formaat van de afbeelding al op de server staat. Sommige CMS-en zorgen voor het aanpassen van de afbeelding op de server, maar veel CMS-en doen dit niet. In dat geval moet je de afbeelding al in de goede maten maken vooraf in een fotoprogramma. Voorbeelden van fotoprogramma's zijn:

• IrfanView (voor Windows, gratis)
• Voorvertoning en Pixelmator (voor de Mac)
• Photoshop Elements (Windows en Mac).

Je hebt ook nog online programma's, zoals Pixlr.

11.5 Responsive images: verschillende afbeeldingen voor verschillende beeldschermen

Je kunt ook verschillende afbeeldingen maken, waarbij de browser zelf de juiste afbeelding kiest bij het beeldscherm van de gebruiker. Daarvoor is in html het element imgsrc.

Zo kun je afbeeldingen maken voor:

• High desktop (retina-schermen)
• Desktop
• Laptop
• Mobiel

Je kunt een afbeelding in verschillende resoluties aanbieden, bijvoorbeeld voor desktop en mobiel.

Je kunt ook verschillende afbeeldingen aanbieden, zodat de gebruikers van een mobiel een andere foto zien dan de desktop-gebruikers.

In code ziet dat er zo uit:

11.6 Grootte van de bestanden

Met grootte bedoelen we hier het aantal bytes van de afbeelding. Meestal gaat het dan over kB's. Hierbij staat k voor kilo: 1 kB is 1.024 bytes.

Een foto op een website kan vaak vrij licht (in bytes) blijven. Bij veel fotoprogramma's kun je bij het opslaan kiezen voor een bepaalde kwaliteit. Kies dan de laagste kwaliteit waarbij je vindt dat de afbeelding er op het scherm nog steeds goed uitziet.

11.7 Positioneren van afbeeldingen

Een afbeelding kun je links, midden of rechts uitlijnen. Ook kun je aangeven of er nog wat ruimte tussen de afbeelding en de tekst moet komen.

Dit positioneren kun je op 2 manieren:

• met opmaakcode in de HTML, bijvoorbeeld met een inline-style (zie het hoofdstuk over HTML)
• met een class, waarmee je verwijst naar de opmaak in de CSS

Dé manier om het te doen is de methode met een class. In een CMS betekent dit bijna altijd dat je de afbeeldingen moet positioneren met de optie "Uitlijnen": daar kun je kiezen tussen links, rechts of midden. Als het goed is koppelt je CMS dan een "class" aan de afbeelding. Deze classes zijn gedefinieerd in de CSS van je site, bijvoorbeeld:

In de HTML ziet het er dan als volgt uit:

De andere opties van je CMS, zoals het aangeven van de grootte van de afbeelding en het aangeven van ruimte tussen de afbeelding en de tekst kun je beter niet gebruiken, want die geeft opmaakcode in je HTML. Probeer de opties anders even uit en check in de HTML welke code het CMS precies heeft gebruikt voor het positioneren.

Door het uitlijnen van afbeeldingen te doen met classes zorg je ook voor een uniforme lay-out van je website; immers als je kiest voor bijvoorbeeld links uitlijnen, dan gebeurt dat in de hele site op dezelfde manier.

11.8 Naamgeving van afbeeldingen

Een afbeelding kun je elke naam geven, maar omdat afbeeldingen getoond worden op het web, kiezen wij zelf altijd voor bepaalde kenmerken:

• Gebruik alleen kleine letters
• Gebruik geen spaties
• Gebruik koppeltekens in plaats van liggende streepjes

Gebruik kleine letters

Voor sommige servers is er verschil tussen "Hond" en "hond". Om vergissingen te voorkomen is ons advies om standaard altijd alleen kleine letters aan te houden, dus "hond".

Gebruik geen spaties

Webadressen kennen in principe geen spaties. Omdat de afbeelding ook een webadres heeft, is het beter om in de afbeeldingsnaam geen spaties te gebruiken.

Gebruik koppeltekens tussen woorden

Zoekmachines zien woorden met underscores (liggende streepjes) als 1 lang woord. "tim_james" is dus voor Google "timjames". Als je een koppelteken (verbindingsstreepje, min-teken of in het Engels een hyphen) gebruikt, dan zien zoekmachines het wel als losse woorden. In het voorbeeld hiervoor wordt het dan "tim-james". Voor Google is dat 'tim' en 'james'.

11.9 Alt en title

Een afbeelding kan extra informatie in de HTML meekrijgen met zogenaamde attributen. Er zijn 2 attributen die vaak gebruikt worden:

• alt-attribuut voor alternatieve tekst
• title-attribuut voor de titel

Alt-attribuut: verplicht bij betekenisvolle afbeelding

Als een afbeelding extra betekenis overbrengt is een beschrijvende alt-tekst nodig. Dit is bijvoorbeeld nodig voor blinde gebruikers, die de afbeelding niet kunnen zien. Met het alternatief krijgen ze toch de informatie van de afbeelding.

De code is:

In de praktijk brengen afbeeldingen meestel geen extra informatie over en kan dus het alt-attribuut leeg blijven. Het alt-attribuut zelf moet je wel plaatsen. De code is dan:

Title-attribuut: nooit nodig voor afbeeldingen en links

Het title-attribuut geeft de bekende tekst bij mouseover zodra je met de muis over de afbeelding beweegt. Het title-attribuut heeft geen toegevoegde waarde. Gebruik deze dus nooit bij afbeeldingen. En ook niet bij links.

11.10 Testen afbeeldingen