| 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.
.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 |
- Selecteer in welk bestandsformaat de afbeeldingen gesaved
moet worden.
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))
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.
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.
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.
- Selecteer het formaat waarin de afbeelding gesaved moet worden
- Stel het aantal kleuren in die de afbeelding maximaal mag bezitten
- Bij het saven wordt automatisch rekening gehouden met deze instellingen
|
 |
|