Photoshop tutorial, opslaan van afbeeldingen voor het web met een goede compressie.
Auteur:
Alexander Vidakovic
Datum publicatie: 04-10-2004
Software versie: 7.0
Moeilijkheidsgraad: Eenvoudig
Doelgroep: Startende vormgever
De afbeeldingen op uw webpagina's wilt u het liefst (qua compressie) klein houden. Zoals bij
Resolutie en
bestandstypes tutorial al genoemd, dient men meteen een onderscheid te maken tussen foto's op het web en de afbeeldingen waar kleuren duidelijk gescheiden zijn. Dan pas kiest u het goede formaat. Wij gaan er van uit dat u het
scannen al aardig onder de knie heeft. In 2 voorbeelden onderaan, is er sprake van een kleurrijke foto, waar de kleuren in elkaar overlopen we kiezen dan bewust voor een
Jpg formaat -en een logo, die weinig kleuren bevat en waar deze ook duidelijk gescheiden zijn, we kiezen dan bewust voor het
Gif formaat.
Afbeelding exporteren
Als u uw eigen afbeelding naar de gewenste grootte hebt (terug) gebracht, ga naar ⇒
File ⇒
Save for web. Doet u het vanuit ImageReady, ga dan naar
File ⇒
Save optimized as.
De instellingen en de afbeelding compressie bij JPG
Mocht u met uw afbeelding liever (als het bijv. een foto betreft) voor
Jpg willen kiezen, i.p.v. Gif, dan is Save voor Web wizard venster net ietsje anders en kunt u met
Quality instelling gaan spelen in plaats van aantal kleuren, zoals bij Gif (zie onderaan). Dit heet dan "afbeelding optimalisatie voor het web" -en werkt zeer intuïtief. Een afbeelding met Quality waarde 25 heeft een hogere compressie en dus minder goede kwaliteit dan een afbeelding met Quality 80. Een hogere compressie zorgt ervoor dat uw afbeelding (in Kb’s) kleiner blijft en sneller gaat laden binnen uw webbrowser wanneer het vanaf uw website opgevraagd wordt.
De instellingen en de afbeelding compressie bij GIF
Kiest u voor Gif, kunt u de afbeelding dus beperken tot het gewenste aantal kleuren. Ik vond 64 (
Selective) een aardig aantal kleuren, met redelijke kwaliteit, de andere instellingen hoeft u niet aan te komen… In de cirkel onderaan ziet u dat mijn afbeelding
4.627K wordt, in plaats van
64.8K.
Compressie technieken zijn buitengewoon handig wanneer u uw afbeeldingen gebruikt voor de adverteer sites (zoals
Open Handel), waar de maximale Kb's bovengrens niet hoger mag uitkomen dan 50 KB per plaatje.
Binnen de Save voor Web wizard venster hebt u links boven een aantal tabs waaronder
2 up en
4 up. Als u bijvoorbeeld op "2 up" tab klikt, zal het venster zich splitsen en in linker tab deel, daar zullen de waarden van het origineel blijven, terwijl in het rechter tab gedeelte van het venster de nieuwe waarden, gebaseerd op uw export instellingen, te zien zijn.
Bij het optimaliseren van de afbeeldingen voor het web, spelen uiteraard niet alleen de compressie niveau en compressie formaat een rol. Soms worden de afbeeldingen (te) groot gescanned. Die wilt u dan in sommige gevallen liever verkleinen, zie
afbeelding kleiner maken tutorial.
Oefeningen
1. Exporteer zelf een aantal afbeeldingen naar Jpg of Gif formaat.
2. Verken "2 up" en "4 up" tabs bij het export van uw afbeelding.
Niet gevonden hetgeen u zocht? U vind het met Google...
