Afbeeldingen voor site

Om uw website of webshop  ‘aan te kleden’ is het gebruik van onder andere afbeeldingen iets wat veel voorkomt. Om echter met afbeeldingen te werken moet u wel een aantal zaken in ogenschouw nemen. Hier bespreek ik een aantal achtergronden om u meer inzicht te geven in hoe u kunt omgaan met afbeeldingen.

Een afbeelding kan een foto zijn, een tekening, of een grafiek - bijvoorbeeld in de vorm van een diagram. Een aantal zaken waar u rekening mee moet houden:

  • grootte van de afbeelding.
  • het aantal te gebruiken kleuren.
  • de kleurendiepte

Hoe minder kleuren, hoe kleiner de omvang van de afbeelding. Het is moeilijk om regels op te stellen, maar over het algemeen kan gezegd worden dat een foto zich het beste leent als jpg formaat, en een diagram of een tekening als GIF. JPG en GIF zijn de meest gebruikte afbeeldingformaten.

Het formaat JPG
Van de twee meest gebruikte images op het internet is dit er een. Een JPG comprimeert door kleuren die op elkaar lijken, samen te voegen. Indien u gaat inzoomen op een JPG afbeelding krijgt u vaak ook een wat brokkelig beeld te zien. Dit heeft te maken met het compressiepercentage. Een compressie van 80% geeft over het algemeen een goed toonbare afbeelding. Indien u lager gaat, dan moet u rekening houden met een sterk minder wordende kwaliteit. Compressie kunt u in nagenoeg ieder tekenpakket instellen. Een JPG-afbeelding heeft altijd een kleurendiepte van 16 miljoen kleuren. Hier kunt u niets aan veranderen.

Voor een foto is juist vanwege die laatste eigenschap het formaat JPG zeer geschikt.

Het formaat GIF
De wat minder gebruikte variant is de GIF. Een GIF-afbeelding bestaat uit maximaal 256 kleuren. Hiermee leent dit type zich al minder voor foto’s. Indien u een grafiek wilt weergeven is dit bij uitstek het goede formaat. Veel grafische pakketten ondersteunen de mogelijkheid om een GIF-afbeelding van meer of minder kleuren te voorzien. U kunt de kleuren dan instellen van 256, 128, 64, 32, 16 tot 4 tot aan 2 kleuren. Hoe minder kleuren, des te kleiner het formaat.

Ook kunt u een afbeelding voorzien van het GIF formaat "transparant maken". Dat wil zeggen dat u een kleur kunt opgeven die wegvalt tegen de achtergrond. Voor websites met een achtergrondafbeelding is het mooier de afbeeldingen die u gebruikt dan ook transparant te maken zodat de achtergrondafbeelding het beste doorkomt.
 
Het formaat PNG
Vanaf Internet Explorer 7 is de PNG een leuk alternatief voor een GIF. PNG (spreek uit: pee-en-gee of als Ping) is een bestandsformaat voor afbeeldingen met verliesloze compressie. De afkorting staat voor Portable Network Graphics, maar soms wordt ook het recursieve backroniem PNG’s not GIF gebruikt. Doordat de veelgebruikte internetbrowser Microsoft Internet Explorer tot en met versie 6.0 het PNG-formaat qua transparantie niet volledig ondersteunt, is het PNG-formaat nog niet zo populair als GIF, maar het gebruik van PNG stijgt terwijl dat van GIF daalt. Internet Explorer 7 beschikt wel over correcte PNG-ondersteuning. Praktisch elk modern beeldverwerkingsprogramma ondersteunt het PNG-formaat. PNG is niet geschikt om foto's mee te publiceren.
 
Zeker niet op je site zetten
De volgende formaten zijn zeker NIET geschikt als afbeeling op je website: .bmp, .tiff

Afbeeldingen op het goede formaat maken
Eerst de vraag: wat is een goed formaat? Voor drukwerk kan de afbeelding niet groot genoeg zijn. Voor een intranet of website geldt vaak het tegenovergestelde. Om een goede middenweg te vinden is het altijd goed een afbeelding maximaal 60kb groot te laten zijn. En qua formaat is 320x240 pixels prima.

Gebruik niet te grote afbeeldingen!
Plaatjes zijn altijd te groot voor gebruik op een website. Vaak gebeurt het dat afbeeldingen niet op het goede formaat gemaakt worden voor het web. We nemen een digitale foto en zetten die online zonder iets te doen aan het formaat hiervan. Resultaat is dan dat de afbeelding te groot is, het uploaden duurt lang en de website of blog wordt trager.

Nu zijn er leuke tooltjes op de markt, gratis nog wel, die dit kunnen oplossen. Niets ingewikkelds, maar vaak erg eenvoudig. Ik ga er een aantal benoemen.
 
Faststone catpure * * * * *
Erg makkelijk in gebruik. Je kunt delen van je desktop capturen, resizen en voorzien van tekst, pijltjes.. whatever. Ook zit hier een colorpicker in en een lineaal. Exporteren naar printer/word/email/powerpoit, ftp alles is mogelijk. Ik gebruik deze echt dagelijks. (http://www.faststone.org/FSCaptureDetail.htm)
 
Imageresizer van windows / powertoys voor XP * * *
Windows xp mag al 'oud' zijn, toch wordt dit nog het meest gebruikt. Als leuke toevoegingen zijn er de powertoys, en de imageresizer is er een van. Installeer deze (500kb) en je kunt in de verkenner met de rechtermuisknop de afbeelding kleiner maken naar het formaat naar wens. Erg makkelijk dus. (microsoft site)
 
Shrinkpic * * * * *
Altijd makkelijk. Installeer deze app en zodra je een afbeelding wilt uploaden (dus de 'kies afbeelding' knop gebruikt om te uploaden naar je blog of site) wordt de gekozen afbeeling kleiner gemaakt. Je hoeft helemaal niets te doen, een tijdelijke file wordt geupload en je bent klaar.
 
Online * *
Je kunt ook via diverse online diensten afbeeldingen kleiner maken. Nadeel is dat je eerst het plaatje moet uploaden en dat duurt vaak even. Maar je hoeft verder niets te doen op je pc en je hoeft niets te installeren. (http://www.shrinkpictures.com/)
 
VSO Image resizer * * *
Dit is een powertoys variant, maar dan voor Vista en Windows 7. De eerder genoemde powertoy werkt niet op deze besturingssystemen. 
(http://www.vso-software.fr/products/image_resizer/)

 

Over de auteur

maarten.pngMaarten Blokdijk is eigenaar en oprichter van Cloudfaction, internetspecialisten. Met ruim 15 jaar ervaring in online, is hij in staat uw wensen te vertalen naar concrete oplossingen. Creatief, klantgericht en to the point. Tevreden klanten en uitdagende projecten zijn de dagelijkse drijfveer om optimaal te presteren. Met gedegen kennis van communicatie, projectmanagement, sociale media, open-source en code gaat hij niet snel een uitdaging uit de weg. Wilt u in contact komen? Bel gerust: 0181-74 50 29!