We hebben vandaag een korte maar erg handige webtip. Vaak wil je een kleinere versie van een plaatje weergeven op je website, een zogenaamde thumbnail. Nu kun je dit simpel doen door in het imgl-element de height en width aan te passen, maar dit gaat ten koste van de kwaliteit, de plaatjes worden vaak korrelig. Daarnaast wordt op deze manier ook het volledige plaatje geladen. Als je een grote foto hebt die je met width en height kleiner hebt gemaakt, wordt toch de hele foto (met vaak een grote bestandsgrootte) geladen. Dit gaat ten koste van je bandbreedte en maakt het laden van pagina's langduriger. Hoe kunnen we dit oplossen?

phpThumb()

phpThumb is een thumbnail generator dat werkt met PHP. Door in plaats van je plaatje als bron te gebruiken in je img-element, gebruik je nu phpthumb.php waarmee je allerlei mogelijkheden kunt opgeven om je plaatje te vervormen. Denk hierbij aan de grootte, contrast, schaduw, negatief, white balance, een watermerk enz. enz. Hoe werkt het?

Download eerst phpThumb en plaats alle bestanden in een map op je server, zorg dat je in deze map ook een beschrijfbare map met de naam 'cache' hebt. In deze map worden alle gemodificeerde plaatjes opgeslagen, zodat deze niet steeds opnieuw hoeven worden aangemaakt. Wil je nu het plaatje verkleind weergeven op je website, dan gebruik je (bijvoorbeeld) het volgende:

<img src="/jouwmap/phpThumb.php?src=/images/jouwplaatje.jpg&h=100&w=500&q=100" />

Dit vertoont een plaatje met hoogte 100, breedte 500 en een 100% kwaliteit. Er zijn zeer veel mogelijkheden mogelijk op deze manier, deze kun je op de website van phpThumb vinden.

Demo

Een demo, met bijbehorende voorbeeldcode vind je ook op de website van phpThumb.