Het gebruik van afbeeldingen op je website

Het is van groot belang dat de afbeeldingen die je op de website gebruikt zo klein mogelijk zijn om de zwaarte van de pagina's laag te houden.(Een regel is dat elke pagina maximaal 50 - 60 Kb groot mag zijn, niet erg gemakkelijk als je veel plaatjes op je pagina hebt) Welliswaar krijgen we steeds meer bandbreedte op internet, maar als je dan weer steeds zwaardere pagina's maakt is het netto-resultaat 0.
Bovendien zijn er tegenwoordig genoeg methodes om de grootte van je plaatjes te beperken. Photoshop heeft ook zo'n ingebouwde functie. Save for the Web in Photoshop zelf en ook in ImageReady kun je van te voren instellen hoe je plaatje gesaved moet worden.
Allereerst bespreken we hier de verschillende bestandformaten en hun voor- en nadelen.


.GIF
Gif is een van de meeste gebruikte bestandsformaten op het web. Ze kunnen maximaal 256 kleuren bevatten. Dit heeft als voordeel dat de grootte vaak beperkt blijft als ook het aantal kleuren gebruikt in het plaatje (lees bv. tekeningen) beperkt is. Nadelig is het echter als je foto's in dit formaat opslaat, omdat er vaak een heleboel details dan verdwijnen. Kijk maar eens naar de voorbeelden hieronder. Door het aantal beperkte kleuren worden ook gradiënten vaak niet mooi en zie je duidelijk de verschillende kleuren ipv. een egaal overvloeiend geheel.

Een bos kabels gesaved als .jpg
Grootte: 9.2 Kb
Veel van het detail is nog zichtbaar
Het zelfde bosje kabels gesaved als .gif
Grootte: 21.6 Kb !!
Geoptimaliseerd met 32 kleuren om de bestandsgrootte nog enigzins te beperken. Veel detail is verloren gegaan.


Een simpel plaatjes als .gif
Grootte: 1.5 Kb
Alle randen zijn scherp begrensd
Hetzelfde plaatje als .jpg
Grootte: 3.0 Kb
De randen zijn niet scherp begrensd door de gebruikte compressiemethode van jpg.

.JPG
Naast .gif  is .jpg het meest gebruikte bestandsformaat op het web. Ze kunnen bijna oneindig veel kleuren bevatten. (21.6 miljoen kleuren) Het formaat is vooral sterk in plaatjes waarin veel kleurverschillen zitten, maar ook met schaduwen en gradiënten. Zoals in het tweede voorbeeld hierboven kun je zien dat juist scherpbegrensde plaatjes met weinig kleuren niet erg goed gecomprimeerd worden. Je krijgt dan 'vieze' onscherpe randen.

Conclusie is dus dat het afhankelijk is van de afbeelding welke compressie-methode je moet gebruiken. Heb je dit besloten dan gaan we bekijken hoe we deze afbeelding zo klein mogelijk kunnen maken. Save for the Web in Photoshop en ImageReady (word geleverd bij photoshop) zijn twee voorbeelden waarmee je dit kunt doen.

Save For The Web:



 

Open het Save for the Web venster door:
FILE > SAVE FOR THE WEB
of
ALT - SHIFT - CTRL - S

  1. Selecteer in welk bestandsformaat de afbeeldingen gesaved moet worden.
  2. Kies in geval van .gif of deze een transparante achtergrond moet krijgen. (Zet dan wel in photoshop de laag met je achtergrond uit (klik op het oogje))
  3. Met Matte kun je instellen met welke achtergrondkleur de afbeelding rekening moet houden. Door other te kiezen kun je elke gewenste kleur instellen. (Zeker aan te raden bij transparante gifs, omdat je anders zo'n lelijk wit randje om de afbeelding te zien krijgt.
  4. Stel hierna het aantal kleuren in dat de afbeelding mag bevatten. Zet dit in eerste instantie laag en bekijk hoe het resultaat is. Namelijk hoe minder kleuren hoe kleiner het bestand.
  5. Is alles nu naar wens kun je op OK drukken en het bestand op de juiste plaats saven.

ImageReady:

Open vanuit photoshop ImageReady door:
FILE > JUMP TO > IMAGEREADY
of
SHIFT - CTRL - M

ImageReady heeft wat minder instellingsmogelijkheden dan Save for the Web. Dit komt omdat ImageReady vnl. gebruikt wordt voor het maken van animaties. Instellingen zoals Matte kunnen dan niet gebruikt worden.

  1. Selecteer het formaat waarin de afbeelding gesaved moet worden
  2. Stel het aantal kleuren in die de afbeelding maximaal mag bezitten
  3. Bij het saven wordt automatisch rekening gehouden met deze instellingen