Maak de laadtijd van je pagina korter door thumbnails te gebruiken!
Soms kan het lang duren voor je webpagina geladen is in het geval je grote afbeeldingen of foto's hierop hebt staan. Vooral als je veel foto's op de pagina hebt staan zie je ook vaak de lay-out van je pagina verspringen/veranderen naarmate er meer foto's geladen zijn.
Wil je een aantal foto's laten zien, dan kun je die dan ook het beste verkleinen voor het gebruik op je pagina.
Hiervoor kun je een programma gebruiken zoals JPEG Compress of PIXresizer.
Als je geen extra programma hiervoor wilt installeren zijn er ook diverse websites die zelfs gratis je afbeeldingen/foto's voor je verkleinen, bij sommige kun je zelfs simpele bewerk-opties uitvoeren. Een voorbeeld hiervan is Pixenate: http://pixenate.com/
Hierover is eerder ook al een artikel geschreven in ons Web Succes Magazine.
Hoe kleiner je de foto of afbeelding maakt hoe sneller je pagina geladen word, maar ook hoe minder duidelijk de details te zien zijn op die foto. Daarom zie je ook steeds vaker op websites dat er kleine foto's (thumbnails) gebruikt worden op de beginpagina en dat je hierop kunt klikken om de volledige foto in origineel formaat te bekijken.
Wil je dit ook graag op jouw website, zonder het gebruik van aparte en wellicht moeilijke scripts? Dan kun je dat als volgt doen:
Als eerste zorg je dat je zowel het origineel als de verkleinde foto op je eigen pc naar dezelfde map kopieert als waar index.html staat.
Nadat de afbeeldingen in de juiste map staan gaan we de gewenste pagina aanpassen. Dit doe je altijd binnen de < body> tags. Op de
plek waar je de afbeelding wilt laten zien zet je het volgende neer:
<a
href="foto.jpg" mce_href="foto.jpg">
<img src="foto-thumb.jpg" mce_src="foto-thumb.jpg" border="0"></a>
* Klik hier voor meer uitleg over hoe je deze code op je website kunt plaatsen.
Je moet foto.jpg en foto-thumb.jpg nog wel even vervangen door de naam van jouw foto, dus als jouw foto abc.jpg heet, dan moet er komen te staan 'abc.jpg' en 'abc-thumb.jpg'. Mocht je een rand om je foto heen willen kun je achter 'border' de 0 vervangen door bijvoorbeeld een 1.
Upload vervolgens je webpagina samen met alle plaatjes naar je webruimte, dit kun je doen door middel van bijvoorbeeld Smart FTP
Heb je een hostingaccount bij Alphamega, dan upload je de afbeeldingen net als je index.html naar de map httpdocs
Veel succes!


