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 in JPEG-indeling wordt uitgegaan van compressie met verlies waarbij gegevens selectief worden verwijderd.

Hiermee bepaalt u het compressieniveau. Bij een hogere instelling voor Kwaliteit behoudt het compressiealgoritme meer details. Een hogere instelling voor Kwaliteit leidt echter tot een groter bestand dan een lagere instelling voor Kwaliteit. Bekijk het geoptimaliseerde bestand bij verschillende kwaliteitsinstellingen om vast te stellen wat de beste verhouding is tussen kwaliteit en bestandsgrootte.

Hiermee maakt u een verbeterde JPEG met een iets kleinere bestandsgrootte. De geoptimaliseerde JPEG-indeling wordt aanbevolen voor maximale bestandscompressie. Deze functie wordt door sommige oudere browsers echter niet ondersteund.

Hiermee wordt de afbeelding op progressieve wijze geladen in een webbrowser. De afbeelding wordt weergegeven als een reeks lagen, waardoor een versie van de afbeelding in lage resolutie kan worden bekeken voordat de hele afbeelding is geladen. Voor de optie Progressief moet de indeling voor 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 geeft u aan hoe sterk u de afbeelding wilt laten vervagen. Met deze optie wordt een effect toegepast dat vergelijkbaar is met 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.

Kies deze optie om de kleurprofielen in het geoptimaliseerde bestand te behouden. Er zijn browsers die kleurprofielen gebruiken voor kleurcorrectie.

Geeft een opvulkleur op voor pixels die transparant waren in de oorspronkelijke afbeelding. Klik op het staal Matte om een kleur te kiezen in de kleurenkiezer of kies 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 (als u de kiezer wilt 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 compressie van afbeeldingen met effen kleuren en duidelijke details, zoals lijnpatronen, logo’s of illustraties met tekst. De PNG-8-indeling comprimeert, net als de GIF-indeling, efficiënt vlakken met dezelfde kleur terwijl de scherpe details behouden blijven.

PNG-8- en GIF-bestanden ondersteunen 8-bits kleur, waardoor ze 256 kleuren kunnen weergeven. De methode waarmee wordt vastgesteld welke kleuren u moet gebruiken, wordt indexeren genoemd. Daarom worden afbeeldingen in GIF- en PNG-8-indeling ook wel geïndexeerde-kleurafbeeldingen genoemd. Als u een afbeelding wilt omzetten in een geïndexeerde kleur, wordt een CLUT-tabel samengesteld voor het opslaan en indexeren van de afbeeldingskleuren. Als een kleur van de oorspronkelijke afbeelding niet voorkomt in de kleurentabel, kiest de toepassing een kleur in de tabel die het dichtstbij komt of simuleert de toepassing de kleur door beschikbare kleuren te mengen.

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

Hiermee worden bestanden gecomprimeerd door gegevens op selectieve wijze te verwijderen. Hoe hoger de waarde bij Verlies, hoe meer gegevens worden verwijderd. U kunt vaak een waarde voor Verlies van 5-10 toepassen, en soms zelfs een waarde van 50, zonder dat de kwaliteit van de afbeelding vermindert. Met de optie Verlies kunt u de bestandsgrootte reduceren met 5 tot 40%.

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

Hiermee bepaalt u een methode voor het genereren van de kleurentabel en het aantal kleuren die u in de kleurentabel wilt zetten. U kunt een van de volgende kleurreductiemethoden 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. Met deze kleurentabel worden doorgaans afbeeldingen gemaakt met de grootste kleurenintegriteit. De standaardoptie is Selectief.

Adaptief Hiermee wordt een kleurentabel gemaakt door kleurmonsters te nemen uit het spectrum dat het meest voorkomt in de afbeelding. Als de afbeelding uitsluitend de kleuren groen en blauw bevat, wordt een kleurentabel gemaakt die voornamelijk uit groene en blauwe kleurtonen bestaat. In de meeste afbeeldingen overheersen kleuren uit 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 de browser geen dithering toepast op kleuren als de afbeelding wordt weergegeven in 8-bitskleuren. (Dit palet wordt ook wel het webveilige palet genoemd.) Met behulp van 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 is een techniek waarmee u kleuren kunt simuleren die niet beschikbaar zijn in het systeem voor kleurenweergave 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 die voornamelijk uit effen kleuren bestaan, worden vaak goed weergegeven als dithering wordt uitgeschakeld. Bij afbeeldingen met overvloeiende kleuren (met name kleurverlopen) kan dithering vereist zijn om streepvorming in de kleuren 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.

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

• Om volledig transparante pixels uit te vullen met een kleur en gedeeltelijk transparante pixels te mengen met dezelfde kleur, kiest u een randkleur en schakelt u de Transparantie uit.

• U selecteert een randkleur door op het staal Randkleur te klikken en in de kleurenkiezer een kleur te selecteren. U kunt ook een optie in het menu Matte selecteren: Kleur pipet (om de kleur in het voorbeeldvak van het pipet te gebruiken), Voorgrondkleur, Achtergrondkleur, Wit, Zwart of Overig (als u de kiezer wilt gebruiken).

 De opties Voorgrondkleur en Achtergrondkleur zijn alleen beschikbaar in Photoshop.

A. Oorspronkelijke afbeelding B. Transparantie ingeschakeld met een randkleur C. Transparantie ingeschakeld zonder randkleur 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 percentage 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 verschijnen geen kleurovergangen bij het rasteringalgoritme Ruis.

Hiermee krijgt u een versie met een lage resolutie in een browser terwijl de volledige afbeelding wordt gedownload. Door het gebruik van interliniëring kan de downloadtijd korter lijken en zien de gebruikers direct dat het downloaden bezig is. Door interliniëring kan de bestandsgrootte echter ook toenemen.

Hiermee wordt een tolerantieniveau opgegeven waarmee kleuren worden gewijzigd in de meest gelijkende kleuren in het webpalet (en waarmee wordt voorkomen dat op de kleuren in de browser dithering wordt toegepast). Bij een hogere waarde worden meer kleuren gewijzigd.

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 als u wilt opgeven hoe transparante pixels in GIF- en PNG-bestanden worden geoptimaliseerd.

• (GIF en PNG-8) Om volledig transparante pixels transparant te maken en gedeeltelijk transparante pixels te laten overvloeien in een kleur, selecteert u Transparantie en een randkleur.
• Om volledig transparante pixels uit te vullen met een kleur en gedeeltelijk transparante pixels te mengen met dezelfde kleur, kiest u een randkleur en schakelt u de Transparantie uit.
• (GIF en PNG-8) Om alle pixels die meer dan 50% transparant zijn te wijzigen in geheel transparante pixels en alle pixels die hoogstens 50% transparant zijn te wijzigen in volledig gedekte pixels, schakelt u Transparantie in en selecteert u Geen in het menu Randkleur.
• (PNG-24) Om een afbeelding met een multiniveautransparantie (tot 256 niveaus) op te slaan, selecteert u Transparantie. De optie Randkleur is niet beschikbaar omdat een afbeelding met multiniveautransparantie kan overvloeien in elke achtergrondkleur.

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

U selecteert een randkleur door op het staal Randkleur te klikken en in de kleurenkiezer een kleur te selecteren. U kunt ook een optie in het menu Matte selecteren: Kleur pipet (om de kleur in het voorbeeldvak van het pipet te gebruiken), Voorgrondkleur, Achtergrondkleur, Wit, Zwart of Overig (als u de kiezer 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 bevat, kunnen de kleuren in de kleurentabel verschillen tussen segmenten (u kunt de segmenten eerst koppelen om dit te voorkomen). Als u meerdere segmenten met meerdere kleurentabellen selecteert, is de kleurentabel leeg en wordt het bericht "Gemengd" weergegeven op de statusbalk.

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 terugbrengt, blijft vaak de beeldkwaliteit behouden, terwijl de bestandsgrootte wordt gereduceerd.

U kunt kleuren aan de tabel toevoegen, eruit verwijderen, 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 in een aantal graden van 0 tot 360). Neutrale kleuren hebben een kleurtoon met de waarde 0 en staan bij de rode kleurtonen.
• 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 kleur voorkomt in de afbeelding.

Een nieuwe kleur toevoegen aan de kleurentabel

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

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 wilt selecteren in de kleurentabel, klikt u op deze kleuren terwijl u Shift ingedrukt houdt. Alle kleuren in de rijen tussen de eerste en tweede kleur die u hebt geselecteerd, 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 elke andere RGB-kleurwaarde. Als u de geoptimaliseerde afbeelding opnieuw genereert, wordt de geselecteerde kleur gewijzigd in de nieuwe kleur op elke plaats waar deze in de afbeelding voorkomt.

Kleuren verschuiven naar de meest verwante kleuren uit het webpalet

Opdat er geen dithering van kleuren plaatsvindt in een browser, kunt u de kleuren wijzigen in hun meest verwante kleuren in het webpalet. Hiermee voorkomt u dat dithering van deze kleuren plaatsvindt in browsers op Windows- of Macintosh-systemen waarop slechts 256 kleuren kunnen worden weergegeven.

Kleuren omzetten in transparantie

U kunt transparantie toevoegen aan een geoptimaliseerde afbeelding door bestaande kleuren om te zetten in 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 verwijderen uit de kleurentabel om de bestandsgrootte van de afbeelding te verminderen. Als u een kleur verwijdert, worden gebieden van de geoptimaliseerde afbeelding waarin deze kleur eerst voorkwam opnieuw samengesteld op basis van de meeste gelijkende kleur die nog wel in het palet beschikbaar is.

Als u een kleur verwijdert, wordt het type kleurentabel automatisch gewijzigd in Aangepast. Dit gebeurt omdat de verwijderde kleur in de paletten Adaptief, Perceptueel en Selectief automatisch weer wordt toegevoegd aan het palet als u de afbeelding opnieuw optimaliseert. Het palet Aangepast verandert niet als u de afbeelding opnieuw optimaliseert.

Een kleurentabel opslaan

U kunt kleurentabellen van geoptimaliseerde afbeeldingen opslaan om deze te 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 in overeenstemming met de kleuren in de nieuwe kleurentabel.

Een kleurentabel laden

Optimalisatieopties voor PNG-24

PNG-24 is geschikt voor het comprimeren van afbeeldingen in continutoon; met deze methode verkrijgt u echter veel grotere bestanden dan met de JPEG-indeling. Het voordeel van PNG-24 is dat u hiermee 256 transparantieniveaus in een afbeelding kunt opslaan.

Bepaal hoe transparante pixels in de afbeelding worden geoptimaliseerd.

Hiermee krijgt u een versie met een lage resolutie in een browser terwijl de volledige afbeelding wordt gedownload. Door het gebruik van interliniëring kan de downloadtijd korter lijken en zien de gebruikers direct dat het downloaden bezig is. Door interliniëring kan de bestandsgrootte echter ook toenemen.