Websites zonder afbeeldingen zullen er niet veel zijn. En ook al heb je misschien niet op elke pagina een foto of illustratie nodig, webpagina’s met alleen tekst zijn gauw saai. Maar welke html-code heb je nodig om een afbeelding te laten weergeven, hoe maak je een slideshow of fotogalerij en waar haal je eigenlijk leuke afbeeldingen vandaan? Genoeg vragen om een aantal artikelen aan te wijden:
Wil je snel een afbeelding in je webpagina kunnen opnemen, bekijk dan deze voorbeeld html-code met uitleg. In ditzelfde artikel beschrijf ik ook op welke manieren je je afbeeldingen geschikt maakt voor je website (je moet ervoor zorgen dat ze niet te groot zijn bijvoorbeeld, want anders duurt het veel te lang voordat browsers je pagina geladen hebben).
Als je een rood kruisje te zien krijgt in plaats van je foto, wil dat niets anders zeggen dan dat je browser de foto waarnaar je in je html-code verwijst, niet kan vinden. Hier geef ik 7 vragen die je kunt stellen om je te helpen de oorzaak van zo’n rood kruisje op te sporen.
De ene afbeelding is de andere niet: een foto is iets heel anders dan een illustratie in zwart-wit bijvoorbeeld. Sommige afbeeldingen kun je het beste opslaan in jpg, voor andere kun je beter gif, png of misschien svg gebruiken. In het artikel jpg, gif, png of svg? geef ik een paar vuistregels.
Als je website responsive is (de layout ervan past zich vanzelf aan aan de breedte van je scherm), maar je foto’s zijn niet responsive, dan zijn je webpagina’s waar die foto’s op staan nog steeds niet goed op een smartphone te bekijken. Codeer daarom je afbeeldingen zo dat ook zij automatisch binnen de breedte van het scherm passen. In het artikel over responsive foto’s vertel ik je hoe je dat doet.
Foto’s of afbeeldingen kun je ook als achtergrond voor je site (of voor een enkele pagina) gebruiken. In het artikel Hoe krijg je een foto als achtergrond op je website? leg ik uit hoe je dat doet, en hoe je ervoor zorgt dat deze achtergrond meeverschuift als je je browservenster groter of kleiner maakt.
Wil je een verzameling foto’s op je website laten zien, dan geef ik in het artikel Leuke manieren om foto’s op je website te zetten een paar suggesties om ze op een aantrekkelijke en overzichtelijke manier te presenteren. Mét links naar voorbeelden en installatie-instructies.
Thumbnails zijn verkleinde versies van foto’s die je laat zien in een fotogalerij of pop-up. Op deze pagina leg ik je stap voor stap uit hoe je zelf thumbnails maken kunt van je bestaande foto’s.
Een favicon is een heel klein, vierkant plaatje dat je vaak links van een websitenaam in de url-balk ziet staan. Je website kan natuurlijk best zonder, maar zo’n plaatje zorgt er wel voor dat je site gemakkelijker te herkennen is en professioneler oogt. Dus heb je nog geen eigen favicon, zorg er dan snel voor dat je er een krijgt!
Heb je veel foto’s om op je website te laten zien, dan zou je daarvan een mooie fotogalerij kunnen maken. Ik leg uit hoe je een responsive fotogalerij maakt, die ook op smartphones en tablets goed overkomt.
Foto’s en afbeeldingen (en zelfs een galerij) zijn op zich natuurlijk vrij statisch. Een slideshow geeft door de bewegende beelden en interactiviteit direct leven aan je site. In 9 stappen leer ik je een prachtige slideshow te maken, die bovendien responsive is, en zich dus zonder moeite aanpast aan de breedte van het beeldscherm.
Foto’s en afbeeldingen kun je zelf maken, maar heb je geen geschikte foto’s bij de hand, dan geef ik je hier twee manieren waarop je gratis afbeeldingen downloaden kunt voor je website, ook als je ze commercieel wilt gaan gebruiken.
« Ga terug
