Optimalisatieopties voor afbeeldingen en geanimeerde GIF-bestanden

De webafbeeldingsindelingen zijn bitmap (raster) of vector. De bitmapindelingen, GIF, JPEG en PNG, zijn afhankelijk van de resolutie. Dit wil zeggen dat de afmetingen van een bitmapafbeelding, en mogelijk de afbeeldingskwaliteit, zullen veranderen bij verschillende monitorresoluties. De vectorindelingen, SVG en SWF, zijn niet afhankelijk van de resolutie en kunnen worden vergroot of verkleind zonder dat de afbeeldingskwaliteit verloren gaat. De vectorindelingen kunnen ook rastergegevens bevatten. 

Optimalisatieopties voor JPEG

JPEG is de standaardindeling voor compressie van continutoonafbeeldingen, zoals foto's. Bij het optimaliseren van een afbeelding als een JPEG-indeling wordt uitgegaan van compressie met verlies, waarbij gegevens selectief worden verwijderd.

Bepaalt het compressieniveau. Hoe hoger de instelling voor Kwaliteit, hoe gedetailleerder het compressiealgoritme blijft. Als u echter een hoge instelling voor Kwaliteit gebruikt, wordt het bestand groter dan bij een lage instelling voor Kwaliteit. Bekijk de geoptimaliseerde afbeelding bij verschillende kwaliteitsinstellingen om de beste balans tussen kwaliteit en bestandsgrootte te bepalen.

Maakt een verbeterde JPEG met een iets kleinere bestandsgrootte. De geoptimaliseerde JPEG-indeling wordt aanbevolen voor maximale bestandscompressie, maar sommige oudere browsers bieden geen ondersteuning voor deze functie.

Hiermee wordt de afbeelding progressief weergegeven in een webbrowser. De afbeelding wordt weergegeven als een reeks overlays, zodat gebruikers een versie van de afbeelding met een lage resolutie kunnen zien voordat deze volledig wordt gedownload. Voor de optie Progressief moet de indeling Geoptimaliseerde JPEG worden gebruikt.

 Voor het weergeven van progressieve JPEG-bestanden is meer RAM nodig. Bovendien wordt deze mogelijkheid niet door alle browsers ondersteund.

Hiermee bepaalt u de mate van vervaging die op de afbeelding wordt toegepast. Met deze optie wordt een effect toegepast dat identiek is aan het filter Gaussiaans vervagen en kan het bestand verder worden gecomprimeerd, waardoor de bestandsgrootte afneemt. Een instelling tussen 0,1 en 0,5 wordt aanbevolen.

Kleurprofielen blijven behouden in het geoptimaliseerde bestand. Sommige browsers gebruiken kleurprofielen voor kleurcorrectie.

Hiermee geeft u een vulkleur op voor pixels die transparant waren in de oorspronkelijke afbeelding. Klik op het staal Matte om een kleur te selecteren in de kleurkiezer of selecteer een optie in het menu Matte: Kleur pipet (om de kleur in het voorbeeldvak van het pipet te gebruiken), Voorgrondkleur, Achtergrondkleur, Wit, Zwart of Overig (om de kleurkiezer te gebruiken).

Volledig transparante pixels in de oorspronkelijke afbeelding worden opgevuld met de geselecteerde kleur. Gedeeltelijk transparante pixels in de oorspronkelijke afbeelding worden gemengd met de geselecteerde kleur.

Optimalisatieopties voor GIF- en PNG-8

GIF is de standaardindeling voor het comprimeren van afbeeldingen met effen kleuren en duidelijke details, zoals lijnpatronen, logo’s of illustraties met tekst. Net als bij de GIF-indeling worden in de PNG-8-indeling op efficiënte wijze effen kleurgebieden gecomprimeerd, terwijl scherpe details behouden blijven.

PNG-8- en GIF-bestanden ondersteunen 8-bits kleuren, zodat ze 256 kleuren kunnen weergeven. Bij het bepalen van welke kleuren indexeren wordt genoemd, zodat afbeeldingen in GIF- en PNG-8-indeling soms geïndexeerde-kleurenafbeeldingen worden genoemd. Om een afbeelding om te zetten in geïndexeerde kleuren, wordt een kleurentabel gemaakt waarin de kleuren in de afbeelding worden opgeslagen en geïndexeerd. Als een kleur uit het origineel niet in de kleurentabel staat, kiest de toepassing de dichtstbijzijnde kleur in de tabel of wordt de kleur gesimuleerd met een combinatie van beschikbare kleuren.

Naast de volgende opties kunt u ook het aantal kleuren aanpassen in de kleurentabel van de afbeelding.

Hiermee verkleint u de bestandsgrootte door selectief gegevens te verwijderen. Bij een hogere instelling voor Verlies worden meer gegevens verwijderd. U kunt vaak een waarde voor Verlies van 5-10 en soms zelfs 50 toepassen zonder dat de kwaliteit van de afbeelding afneemt. Met de optie Verlies kunt u de bestandsgrootte met 5% tot 40% verkleinen.

 U kunt de optie Verlies niet gebruiken met de optie Interliniëring of met de ditheringalgoritmes Ruis en Patroon.

Hiermee geeft u een methode op voor het genereren van de kleurentabel en het aantal kleuren dat u wilt opnemen in de kleurentabel. U kunt een van de volgende methoden voor kleurreductie selecteren:

Perceptueel Hiermee wordt een aangepaste kleurentabel gemaakt waarin kleuren waarvoor het menselijk oog gevoeliger is, een hogere prioriteit hebben.

Selectief Hiermee wordt een kleurentabel gemaakt die vergelijkbaar is met de perceptuele kleurentabel, maar waarin brede kleurgebieden worden benadrukt en webkleuren behouden blijven. Deze kleurentabel produceert meestal afbeeldingen met de grootste kleurenintegriteit. Selectief is de standaardoptie.

Adaptief Hiermee wordt een kleurentabel gemaakt door kleurmonsters te nemen uit het spectrum dat het meest voorkomt in de afbeelding. Als een afbeelding bijvoorbeeld alleen de kleuren groen en blauw bevat, wordt een kleurentabel gemaakt die voornamelijk uit groene en blauwe kleurtonen bestaat. De meeste afbeeldingen concentreren kleuren in bepaalde gebieden van het spectrum.

Restrictief (web) Hiermee wordt de standaardkleurentabel met 216 kleuren gebruikt die ook wordt gebruikt voor de 8-bitspaletten (256 kleuren) van Windows en Mac OS. Met deze optie zorgt u ervoor dat er geen browserdithering wordt toegepast op kleuren wanneer de afbeelding wordt weergegeven in 8-bits kleuren. (Dit palet wordt ook wel het webveilige palet genoemd.) Met het webpalet kunt u grotere bestanden maken. Dit wordt alleen aanbevolen als het vermijden van browserdithering hoge prioriteit heeft.

Aangepast Hierbij wordt een kleurenpalet gebruikt dat door de gebruiker is gemaakt of gewijzigd. Als u een bestaande GIF- of PNG-8-afbeelding opent, heeft deze een eigen kleurenpalet.

 U gebruikt het palet Kleurentabel in het dialoogvenster Opslaan voor web en apparaten om de referentiekleurentabel aan te passen.

Zwart-wit, Grijswaarden, Mac OS, Windows Gebruik van een palet met ingestelde kleuren.

Bepaalt de methode en hoeveelheid toepassingsdithering. Dithering verwijst naar de methode waarbij kleuren worden gesimuleerd die niet beschikbaar zijn in het kleurenweergavesysteem van uw computer. Bij een hoger percentage voor dithering wordt de afbeelding met meer kleuren en details weergegeven, maar kan de bestandsgrootte ook toenemen. Voor een optimale compressie gebruikt u het laagste percentage dithering waarmee u het gewenste kleurendetail bereikt. Afbeeldingen met voornamelijk effen kleuren kunnen goed werken zonder dithering. Voor afbeeldingen met continutoonkleur (vooral kleurverlopen) kan dithering nodig zijn om kleurstreepvorming te voorkomen.

U kunt een van de volgende ditheringmethoden selecteren:

Diffusie Hiermee past u een willekeurig patroon toe dat meestal minder opvallend is dan patroondithering. De ditheringeffecten worden verspreid over aangrenzende pixels.

Patroon Hierbij worden kleuren die niet in de kleurentabel voorkomen, nagebootst met een rasterpatroon van vierkantjes.

Ruis Hiermee past u een willekeurig patroon toe dat lijkt op diffusiedithering, maar waarbij het patroon niet over aangrenzende pixels wordt verspreid. Er verschijnen geen kleurovergangen bij de ditheringmethode Ruis.

Hiermee bepaalt u hoe transparante pixels in de afbeelding worden geoptimaliseerd.

• Als u volledig transparante pixels transparant wilt maken en gedeeltelijk transparante pixels wilt laten overvloeien in een kleur, selecteert u Transparantie en een randkleur.

• Als u volledig transparante pixels wilt vullen met een kleur en gedeeltelijk transparante pixels wilt laten overvloeien in dezelfde kleur, selecteert u een mattekleur en schakelt u Transparantie uit.

• Als u een mattekleur wilt selecteren, klikt u op het staal Matte en selecteert u een kleur in de kleurkiezer. U kunt ook een optie in het menu Matte selecteren: Kleur pipet (als u de kleur in het voorbeeldvak van het pipet wilt gebruiken), Voorgrondkleur, Achtergrondkleur, Wit, Zwart of Overig (als u de kleurkiezer wilt gebruiken).

 De opties Voorgrondkleur en Achtergrondkleur zijn alleen beschikbaar in Photoshop.

A. Oorspronkelijke beeld B. Transparantie die met een mattekleur wordt geselecteerd C. Transparantie die zonder het in orde maken wordt geselecteerd D. Transparantie uitgeschakeld met een randkleur

Als de optie Transparantie is ingeschakeld, kunt u een methode kiezen voor de dithering van gedeeltelijk transparante pixels:

• Bij Geen transparantiedithering wordt geen dithering op gedeeltelijk transparante pixels in de afbeelding toegepast.

• Met Dithering voor diffusietransparantie past u een willekeurig patroon toe dat meestal minder opvallend is dan patroondithering. De ditheringeffecten worden verspreid over aangrenzende pixels. Als u dit algoritme selecteert, geeft u een ditheringpercentage op om de hoeveelheid dithering te bepalen die op de afbeelding wordt toegepast.

• Met Dithering voor patroontransparantie wordt een rasterpatroon van vierkantjes toegepast op gedeeltelijk transparante pixels.

• Met Dithering voor ruistransparantie wordt een willekeurig patroon toegepast dat lijkt op het algoritme voor diffusie, maar waarbij het patroon niet over aangrenzende pixels wordt verspreid. Er worden geen naden weergegeven bij het algoritme Ruis.

Hiermee wordt een versie van de afbeelding met een lage resolutie in een browser weergegeven terwijl het volledige afbeeldingsbestand wordt gedownload. Door het gebruik van interliniëring kan de downloadtijd korter lijken en kunnen gebruikers ervan verzekerd zijn dat het downloaden wordt uitgevoerd. Interliniëring verhoogt echter ook de bestandsgrootte.

Hiermee geeft u een tolerantieniveau op voor het verschuiven van kleuren naar de kleuren die het meest overeenkomen met het webpalet (en voorkomt u dithering van de kleuren in een browser). Bij een hogere waarde worden meer kleuren verschoven.

Transparantie in GIF- en PNG-afbeeldingen optimaliseren

Met transparantie is het mogelijk niet-rechthoekige webafbeeldingen te maken. Met de transparantie van de achtergrond blijven transparante pixels in de afbeelding behouden.

Zo wordt de achtergrond van de webpagina door de transparante gedeelten van de afbeelding heen weergegeven. Met de randkleur voor achtergrond wordt de transparantie gesimuleerd doordat transparante pixels worden gevuld met een randkleur of overvloeien in een randkleur die overeen kan komen met de achtergrond van de webpagina. De randkleur voor achtergrond werkt het beste als de achtergrond van de webpagina een effen kleur is en als u weet welke kleur dit is.

Gebruik de opties Transparantie en Randkleur in het dialoogvenster Opslaan voor web en apparaten om op te geven hoe transparante pixels in GIF- en PNG-afbeeldingen worden geoptimaliseerd.

• (GIF en PNG-8) Als u volledig transparante pixels transparant wilt maken en gedeeltelijk transparante pixels wilt laten overvloeien in een kleur, selecteert u Transparantie en een randkleur.
• Als u volledig transparante pixels wilt vullen met een kleur en gedeeltelijk transparante pixels wilt laten overvloeien in dezelfde kleur, selecteert u een mattekleur en schakelt u Transparantie uit.
• (GIF en PNG-8) Als u alle pixels met een transparantie van meer dan 50% volledig transparant en alle pixels met een transparantie van 50% of minder volledig dekkend wilt maken, selecteert u Transparantie en kiest u Geen in het menu Matte.
• (PNG-24) Selecteer Transparantie als u een afbeelding met transparantie op meerdere niveaus (tot 256 niveaus) wilt opslaan. De optie Matte is uitgeschakeld, omdat een afbeelding met verschillende transparantieniveaus kan overvloeien in elke achtergrondkleur.

 In browsers die geen PNG-24-transparantie ondersteunen, kunnen transparante pixels tegen een standaardachtergrondkleur, zoals grijs, worden weergegeven.

Als u een mattekleur wilt selecteren, klikt u op het staal Matte en selecteert u een kleur in de kleurkiezer. U kunt ook een optie in het menu Matte selecteren: Kleur pipet (als u de kleur in het voorbeeldvak van het pipet wilt gebruiken), Voorgrondkleur, Achtergrondkleur, Wit, Zwart of Overig (als u de kleurkiezer wilt gebruiken).

 De opties Voorgrondkleur en Achtergrondkleur zijn alleen beschikbaar in Photoshop.

De kleurentabel voor een geoptimaliseerd segment weergeven

De kleurentabel voor een segment wordt weergegeven in het deelvenster Kleurentabel in het dialoogvenster Opslaan voor web en apparaten.

Selecteer een segment dat is geoptimaliseerd in GIF- of PNG-8-indeling. De kleurentabel voor het geselecteerde segment verschijnt in de kleurentabel Opslaan voor web en apparaten.

Als een afbeelding meerdere segmenten heeft, kunnen de kleuren in de kleurentabel per segment verschillen (u kunt de segmenten eerst koppelen om te voorkomen dat dit gebeurt). Als u meerdere segmenten met verschillende kleurentabellen selecteert, is de kleurentabel leeg en wordt op de statusbalk het bericht "Gemengd" weergegeven.

De kleurentabel aanpassen voor GIF- en PNG-8-afbeeldingen

Als u de kleuren in geoptimaliseerde GIF- en PNG 8-bestanden wilt aanpassen, gebruikt u de kleurentabel in het dialoogvenster Opslaan voor web en apparaten. Als u het aantal kleuren verlaagt, blijft vaak de afbeeldingskwaliteit behouden en wordt de bestandsgrootte van de afbeelding verkleind.

U kunt kleuren toevoegen aan en verwijderen uit de kleurentabel, geselecteerde kleuren verschuiven naar webveilige kleuren en geselecteerde kleuren vergrendelen om te voorkomen dat ze uit het palet worden verwijderd.

Een kleurentabel sorteren

Kies een sorteervolgorde in het menu van het palet Kleurentabel:

• Met Niet-gesorteerd wordt de oorspronkelijke sorteervolgorde hersteld.
• Met Sorteren op kleurtoon sorteert u op de locatie van de kleur op de standaardkleurenschijf (uitgedrukt als een graad tussen 0 en 360). Neutrale kleuren krijgen een kleurtoon van 0 toegewezen en bevinden zich bij de rode tinten.
• Met Sorteren op luminantie sorteert u op de lichtheid of helderheid van een kleur.
• Met Sorteren op populariteit sorteert u op de mate waarin de kleuren voorkomen in de afbeelding.

Een nieuwe kleur toevoegen aan de kleurentabel

U kunt kleuren toevoegen die niet voorkomen in de kleurentabel. Als u een kleur toevoegt aan een dynamische tabel, wordt de kleur die het meest op de nieuwe kleur lijkt, verschoven naar de nieuwe kleur. Als u een kleur toevoegt aan een vaste of aangepaste tabel, wordt een extra kleur toegevoegd aan het palet.

Kleuren selecteren in de kleurentabel

Er verschijnt een witte rand rondom geselecteerde kleuren in de Kleurentabel.

• Klik op een kleur in de kleurentabel om de kleur te selecteren.
• Als u meerdere kleuren in de kleurentabel wilt selecteren, drukt u op Shift en klikt u op een andere kleur. Alle kleuren in de rijen tussen de eerste en tweede geselecteerde kleur worden geselecteerd. Als u een niet-aangrenzende groep kleuren wilt selecteren, houdt u Ctrl (Windows) of Command (Mac OS) ingedrukt en klikt u met de muis op elke kleur die u wilt selecteren. Het menu van het palet Kleurentabel bevat bovendien een aantal opdrachten waarmee u kleuren kunt selecteren.
• Om een kleur in de voorvertoning te selecteren klikt u in de voorvertoning met het gereedschap Pipet van Opslaan voor web en apparaten. Selecteer aanvullende kleuren met de muis terwijl u Shift ingedrukt houdt.
• Als u de selectie van alle kleuren wilt opheffen, kiest u Alle kleuren deselecteren in het menu van het palet Kleurentabel.

Een kleur verschuiven

U kunt een geselecteerde kleur in de kleurentabel wijzigen in een andere kleurwaarde voor RGB. Wanneer u de geoptimaliseerde afbeelding opnieuw genereert, verandert de geselecteerde kleur in de nieuwe kleur, waar deze ook in de afbeelding voorkomt.

Kleuren verschuiven naar de meest verwante kleuren uit het webpalet

Als u wilt voorkomen dat er dithering wordt toegepast op kleuren in een browser, kunt u de kleuren verschuiven naar de kleuren die het meest overeenkomen in het webpalet. Zo voorkomt u dithering van de kleuren bij weergave in browsers op Windows- of Macintosh-besturingssystemen die slechts 256 kleuren kunnen weergeven.

Kleuren omzetten in transparantie

U kunt transparantie toevoegen aan een geoptimaliseerde afbeelding door bestaande kleuren toe te wijzen aan transparantie.

Een kleur vergrendelen of ontgrendelen

U kunt geselecteerde kleuren vergrendelen in de kleurentabel. Hiermee voorkomt u dat deze worden verwijderd als het aantal kleuren wordt verminderd en voorkomt u dithering van deze kleuren in de toepassing.

 Als u kleuren vergrendelt, voorkomt u niet dat dithering van deze kleuren plaatsvindt in een browser.

Geselecteerde kleuren verwijderen

U kunt geselecteerde kleuren uit de kleurentabel verwijderen om het afbeeldingsbestand kleiner te maken. Als u een kleur verwijdert, worden de gebieden van de geoptimaliseerde afbeelding waarin die kleur voorkwam opnieuw gerenderd met de dichtstbijzijnde kleur die nog in het palet aanwezig is.

Als u een kleur verwijdert, verandert de kleurentabel automatisch in een aangepast palet. Dit komt doordat de verwijderde kleur in de paletten Adaptief, Perceptueel en Selectief automatisch weer wordt toegevoegd aan het palet wanneer u de afbeelding opnieuw optimaliseert. Het palet Aangepast verandert niet wanneer u de afbeelding opnieuw optimaliseert.

Een kleurentabel opslaan

U kunt kleurentabellen van geoptimaliseerde afbeeldingen opslaan en deze gebruiken bij andere afbeeldingen en kleurentabellen laden die in andere toepassingen zijn gemaakt. Als u een nieuwe kleurentabel in een afbeelding laadt, worden de kleuren in de geoptimaliseerde afbeelding gewijzigd om deze weer te geven op de kleuren in de nieuwe kleurentabel.

Een kleurentabel laden

Optimalisatieopties voor PNG-24

PNG-24 is geschikt voor het comprimeren van afbeeldingen met ongerasterde halftonen, maar levert veel grotere bestanden op dan de indeling JPEG. Het voordeel van PNG-24 is dat u hiermee 256 transparantieniveaus in een afbeelding kunt behouden.

Bepaal hoe transparante pixels in de afbeelding worden geoptimaliseerd.

Hiermee wordt een versie van de afbeelding met een lage resolutie in een browser weergegeven terwijl het volledige afbeeldingsbestand wordt gedownload. Door het gebruik van interliniëring kan de downloadtijd korter lijken en kunnen gebruikers ervan verzekerd zijn dat het downloaden wordt uitgevoerd. Interliniëring verhoogt echter ook de bestandsgrootte.