Photoshop: Afbeeldingen voor het web

Photoshop: Afbeeldingen voor het web

Martin Gijzemijter - 6 november 2007, 12:13

Afbeeldingen zijn er in vele soorten en maten. U kunt een afbeelding gebruiken als bureaubladachtergrond, waarbij kwaliteit belangrijk is. De grootte van het bestand maakt daarbij doorgaans weinig uit. Wilt u echter een afbeelding opslaan voor gebruik op een internetpagina, dan is dat juist omgedraaid.

Bij het opslaan van een afbeelding die voor internet is bedoeld, speelt bestandsgrootte een zeer grote rol. Daarbij moet wel direct gezegd worden dat het niet meer zo belangrijk is als een paar jaar geleden, toen het grootste deel van Nederland nog moest inbellen met een traag modem om te kunnen internetten. Toch is bestandsgrootte nog altijd een belangrijk onderwerp. Ten eerste is het gewoon prettig als de afbeeldingen op een website allemaal binnen een halve seconde laden, ten tweede scheelt het dataverkeer. Dat laatste lijkt niet boeiend, maar wanneer u een website hebt draaien op een server waar u een maandelijkse limiet aan dataverkeer hebt en die door duizenden bezoekers wordt bezocht, dan telt elke kilobyte.
Twee keer dezelfde afbeelding, boven zonder compressie, onder met compressie.

Twee keer dezelfde afbeelding, boven zonder compressie, onder met compressie.

Stap 1 Het juiste formaat

De eerste belangrijke stap bij het maken van een afbeelding voor internet, is het kiezen van het juiste formaat. Een afbeelding geschaald weergeven (kleiner weergeven dan deze daadwerkelijk is) is zonde. Het laden duurt dan langer dan nodig is en de afbeelding ziet er enigszins in elkaar gedrukt uit. Het is in alle opzichten beter om de afbeelding in Photoshop al het formaat te geven waarop u deze wilt tonen. Stel dat u een afbeelding wilt maken van 400 bij 300 pixels. Open dan de gewenste afbeelding door te klikken op menu Bestand / Openen. Blader naar de afbeelding die u wilt verkleinen en klik op Openen. We noemen bewust alleen verkleinen, omdat het vergroten van een afbeelding binnen Photoshop doorgaans geen mooi resultaat oplevert. Klik nu in het menu Afbeelding / Afbeeldingsgrootte. Vul bij het veld Breedte 400 in en bij Hoogte 300 en klik op OK. U zult zien dat wanneer u een waarde invult bij Breedte, dat Photoshop automatisch een andere waarde invult bij Hoogte. Dit komt omdat Photoshop automatisch de verhoudingen binnen een afbeelding bewaart wanneer het vinkje bij de optie Verhoudingen behouden is geplaatst. Wanneer u dit vinkje weghaalt kunt u de afbeelding in een andere verhouding forceren, maar doorgaans resulteert dit niet in een best resultaat.
Wanneer u het formaat aanpast, beschermt Photoshop de verhoudingen.

Wanneer u het formaat aanpast, beschermt Photoshop de verhoudingen.

Stap 2 Opslaan voor web

Wanneer u de afbeelding het juiste formaat hebt gegeven, kunt u deze opslaan. Dit doen we echter op een andere manier dan u wellicht gewend bent. U kunt in het menu Bestand namelijk kiezen uit de opties Opslaan, Opslaan als en Opslaan voor web. Wanneer u deze laatste optie kiest, zoekt Photoshop een balans tussen kwaliteit en bestandsgrootte met behulp van compressie. Klik op Bestand / Opslaan voor web en op het tabblad 4-maal tonen in het venster dat verschijnt. Uw afbeelding wordt nu vier keer weergegeven, linksboven in de hoogste kwaliteit met het grootste bestandsformaat en rechtsonder precies andersom. In het rechtermenu kunt u kiezen met welke indeling u de afbeelding wilt opslaan, bijvoorbeeld gif of jpeg, dit heeft ook invloed op de bestandsgrootte. Kies de optie die u het kleinste bestandsformaat oplevert, zonder dat u teveel concessies hoeft te doen wat kwaliteit betreft. Klik nu op Opslaan om de afbeelding in de gekozen kwaliteit op te slaan. U hebt nu een afbeelding van prima kwaliteit, die niet meer ruimte in beslag neemt dan nodig is.
Met compressie wordt dit bestand twintig keer kleiner dan het origineel.

Met compressie wordt dit bestand twintig keer kleiner dan het origineel.

Werkt op: alle versies van Photoshop

Photoshop uitproberen?

Adobe Photoshop CS3
Proefversie 30 dagen na installatie, eerst registreren
Taal Engels
OS Windows XP SP2/Vista
Systeemeisen Pentium 4-klasse processor, 512 MB RAM, 1 GB harde-schijfruimte
Maker Adobe

blog comments powered by Disqus