Share
Het doel van de functie Opslaan voor web in Adobe Illustrator is het optimaliseren van afbeeldingen voor gebruik op een website of een ander scherm, zoals een tablet-telefoon. Het woord "optimaliseren" verwijst naar de optimale balans tussen bestandsgrootte en kwaliteit. We willen kleine bestandsgroottes zodat ze snel worden geladen op een webpagina, maar we willen hun uiterlijk niet opgeven. Met Save for Web kunt u een voorbeeld bekijken van hoe een geoptimaliseerde vectorafbeelding eruit zal zien, zodat u het beste compromis kunt kiezen.
In dit artikel zal ik de bestandsindelingen bekijken die beschikbaar zijn in Opslaan voor web en laten zien welke indelingen het meest geschikt zijn voor verschillende soorten illustraties.
U opent de Bewaar voor web dialoogvenster onder de het dossier menu. Opslaan voor Web is bijna een toepassing op zich en het dialoogvenster neemt het grootste deel van uw scherm in beslag.
U kunt ervoor kiezen om uw illustraties op een van de volgende drie manieren te bekijken. Je kunt het origineel gewoon alleen laten zien. Dit lijkt echter nutteloos, omdat je waarschijnlijk wilt zien hoe de afbeelding er uit zal zien als deze is geoptimaliseerd. U kunt alleen de geoptimaliseerde preview weergeven, of u kunt kiezen 2-Up, waarmee u zij-aan-zij-previews krijgt. U kunt op elk paneel klikken om de instellingen aan te passen. In de onderstaande afbeelding is het origineel aan de linkerkant en de geoptimaliseerde versie (in dit geval als een GIF) is aan de rechterkant.
U kunt de grootte van het voorbeeld aanpassen in het vervolgkeuzemenu linksonder en u kunt ook vertrouwde sneltoetsen gebruiken zoals Command / Ctrl-0 om het kunstwerk in het venster te passen, of Command / Ctrl-plus of min om de vergroting te vergroten of te verkleinen.
Klikken op de Voorbeeld knop opent de geoptimaliseerde afbeelding in uw standaardbrowser. Als u wilt zien hoe het eruit ziet in andere browsers, kunt u meer toevoegen door op het pictogram van de kleine wereld te klikken naast de knop Voorbeeld.
Een van de belangrijkste onderdelen van de Save for Web-interface is de bestandsgrootte. Onder elke preview staat het bestandstype en de bijbehorende grootte. Dus in de afbeelding hieronder is de originele EPS links, met een bestandsgrootte van 2,44M. De geoptimaliseerde GIF is aan de rechterkant, met een veel kleinere bestandsgrootte van ongeveer 39.000. Omdat het doel van Save for Web is om de ideale balans te vinden tussen grootte en kwaliteit, zult u deze cijfers vaak bekijken.
GIF is een van de oudste en meest gebruikte indelingen op internet. Het is ideaal voor afbeeldingen met gebieden met een effen kleur, zoals in dit voorbeeld. De GIF-kleurruimte is Geïndexeerde kleur. Hiermee kunt u een exact aantal kleuren in de kleurentabel opgeven, zodat u alleen de kleuren kunt gebruiken die u nodig hebt, waardoor de algehele bestandsgrootte wordt verkleind.
Het dialoogvenster opslaan voor Web heeft verschillende GIF-presets. Kies verschillende instellingen en houd de afbeelding en de resulterende bestandsgrootte in de gaten. In de onderstaande afbeelding heb ik een preset gebruikt die 128 kleuren heeft. Zoals je ziet, ziet de afbeelding er goed uit en is de bestandsgrootte 37.72K.
In het volgende voorbeeld heb ik slechts 8 kleuren gekozen. Je ziet dat de bestandsgrootte nu 23.3K is. Het is een aanzienlijke besparing, maar het beeld begint zijn kwaliteit te verliezen. De randen zijn ruw omdat er niet genoeg kleuren zijn om de overgangen tussen elke vorm in te vullen. Hoewel er slechts vijf kleuren in de afbeelding zijn - drie tinten blauw, geel en wit - gebruikt Illustrator meer kleuren in het anti-aliasingproces, zodat de randen en curven er glad uitzien.
GIF-kleuren kunnen worden beperkt tot de kleuren die worden beschouwd als "webveilig". Dit is tegenwoordig niet echt een zorg, nu monitoren miljoenen kleuren kunnen weergeven, maar er was een tijd dat ontwerpers werd geadviseerd om alleen de 216 kleuren te gebruiken die werden gedeeld door Windows- en Macintosh-systemen. Dus als u ervoor wilde zorgen dat uw afbeelding er hetzelfde uitzag op elk platform, zou u de kleuren ervan beperken tot dat palet. In het onderstaande voorbeeld heb ik de Webpalet vooraf ingesteld, en u kunt zien hoe de lichtblauwe kleur is verschoven naar een groenachtig blauw.
Een GIF kan zwart-wit zijn en gebruikt iets dat dithering heet om een ononderbroken toon te simuleren. Je kunt verschillende methoden voor dithering kiezen, maar ze hebben allemaal een uiterlijk uit de jaren tachtig.
GIF's ondersteunen een niveau van transparantie. Dit betekent dat elke pixel vast of volledig transparant is - u zou geen GIF gebruiken voor een afbeelding met een zachte schaduw of een transparant verloop.
Naast het vakje Transparantie kunt u een matte kleur kiezen. Dit zal een kleine omtrek rond de afbeelding in die kleur toevoegen. Dus als u de GIF op een gekleurde achtergrond plaatst, kunt u dezelfde kleur selecteren als de matte kleur. Op die manier zal de overgang tussen de afbeelding en de achtergrond soepel lijken.
U kunt ervoor kiezen om de afbeelding naar het tekengebied te knippen, waardoor de pixelafmetingen van de opgeslagen afbeelding hetzelfde zijn als die van het Illustrator-tekengebied. Of u kunt ervoor kiezen om dit selectievakje niet aan te vinken, waardoor de afbeelding wordt ingekort tot aan de grenzen van de vectorafbeelding. Dit is de instelling die u waarschijnlijk het grootste deel van de tijd zult gebruiken, omdat er geen extra transparantie rond de afbeelding nodig is. De resulterende bestandsgrootte zal ook kleiner zijn.
In het gedeelte Beeldformaat kunt u kiezen om de geoptimaliseerde afbeelding te verkleinen of te vergroten. De nomenclatuur is hier een beetje dubbelzinnig. Het verwijst niet naar de bestandsgrootte van de afbeelding in kilobytes, maar de pixelafmetingen, uitgedrukt als breedte en hoogte.
Dit is waar Illustrator een voordeel heeft ten opzichte van een raster- of pixelgebaseerde toepassing zoals Photoshop. Als u de afbeelding vergroot voor een geoptimaliseerde uitvoer, gebruikt Illustrator de vectorinformatie in het bestand voor de vergroting en de resulterende afbeelding is scherp en vloeiend. Als u Save for Web in Photoshop zou gebruiken en een rasterafbeelding probeert te vergroten, ziet de vergrote illustratie er echter wazig uit.
Onder de velden Afbeeldinggrootte is een vervolgkeuzemenu waarin u de optimalisatiemethode kunt selecteren. Als uw afbeelding teksthard is, kunt u Type geoptimaliseerd kiezen. In de onderstaande voorbeelden ziet u het verschil tussen de afbeelding die is geoptimaliseerd en een die geen optimalisatie heeft toegepast.
De kleurentabel bevat stalen voor elke kleur die in de geoptimaliseerde afbeelding wordt weergegeven. U kunt dubbelklikken op een staal en de kleur ervan wijzigen. Hier heb ik het geel in roze veranderd. Je ziet dat het staal nu halfgeel en halfroze is in de kleurentabel, en wanneer je eroverheen beweegt, geeft de tooltip je de RGB-verdeling voor het origineel en voor de nieuwe kleur. Dit kan handig zijn als u een reeks van dezelfde afbeelding opslaat en u wilt dat één element in elke versie een andere kleur heeft. Als u de kleur in Opslaan voor Web vervangt, hoeft u de oorspronkelijke vector niet te wijzigen.
Onder de kleurentabel bevindt zich een reeks pictogrammen waarmee u de kleur verder kunt aanpassen. Wanneer u een staal selecteert, kunt u het transparant maken, beperken tot een webveilige kleur, vergrendelen of verwijderen. Een ruit in een kleurstaal geeft een webveilige kleur aan en als u eroverheen beweegt, wordt de hexadecimale code weergegeven.
Er zijn nog enkele instellingen en procedures die u kunt gebruiken met GIF's. U kunt er bijvoorbeeld voor kiezen om de GIF te interlace, waardoor de afbeelding in meerdere doorgangen in een browser wordt geladen. Deze methode is ontwikkeld in de tijd dat de meeste mensen trage inbelverbindingen hadden. Een geïnterlinieerde afbeelding lijkt sneller te laden dan hij in werkelijkheid doet. Er is niet veel reden om het vandaag te gebruiken, vooral met een relatief klein bestand zoals een GIF. De andere opties in de GIF-instellingen zijn ofwel zeer gespecialiseerd of enigszins ouderwets, dus daar zal ik niet meer tijd aan besteden. Laten we doorgaan naar de andere formaten!
De PNG (sommige mensen zeggen "P-N-G" en anderen zeggen het "ping") formaat is vaak een beter alternatief voor GIF. PNG-8 is vergelijkbaar met GIF omdat het 256 kleuren gebruikt, 1-bit transparantie ondersteunt en dithering kan gebruiken. De "8" betekent dat dit een 8-bits afbeelding is. Het belangrijkste verschil tussen beide is de manier waarop ze de beeldinformatie comprimeren. GIF gebruikt een "lossy" -methode, wat betekent dat een deel van de gegevens wordt weggegooid (of "verloren") om een kleinere bestandsgrootte te bereiken. De PNG-methode is verliesloos, maar vanwege het compressiealgoritme is de resulterende bestandsgrootte vaak aanzienlijk kleiner dan een GIF. Dus waarom zou je zelfs een GIF gebruiken als PNG beter is? Nou, niet alle browsers ondersteunen het PNG-formaat (ik kijk naar jou, Internet Explorer 6!). Maar naarmate meer mensen upgraden naar nieuwere browsers, is dit niet zo'n probleem. Dus ga je gang en probeer PNG-8 op afbeeldingen die normaal een GIF zouden oproepen. De meeste opties voor PNG-8 zijn hetzelfde als die voor GIF in het vorige gedeelte.
JPEG is oorspronkelijk ontwikkeld om foto's te comprimeren en is dus het best geschikt voor vectoren met doorlopende tonen. JPEG's zijn 24-bits en ondersteunen dus ruim 16 miljoen kleuren. JPEG-compressie is lossy en het beeld zal verslechteren als u het te veel comprimeert. In de onderstaande afbeelding kunt u beginnen met het zien van blokkerende JPEG "artefacten", die ongewenst zijn. Kies een hogere kwaliteitsinstelling totdat u een beter uitziende afbeelding krijgt met een acceptabele bestandsgrootte.
U kunt kiezen om de afbeelding in meerdere doorgangen te laden door Progressive te selecteren en u kunt de afbeelding vervagen om sommige van de artefacten te verminderen. Geen van deze methoden is ideaal, noch echt noodzakelijk. Het zijn throwbacks naar de dagen van dial-up verbindingen en langzamere machines.
Net als bij GIF en PNG-8 kunt u een pixeldimensie opgeven in het veld Afbeeldingsgrootte, de optimalisatiemethode selecteren en kiezen of de afbeelding moet worden gekopieerd naar het tekengebied. Er is geen kleurentabel, omdat JPEG's in de RGB-modus staan, en niet in de Geïndexeerde kleur.
JPEG is zeer geschikt voor afbeeldingen met een ononderbroken toon, maar is niet zo geweldig bij afbeeldingen met grotere platte vlakken. In het onderstaande voorbeeld is de JPEG aan de rechterkant. Zelfs bij de instelling met de hoogste kwaliteit ziet het er slechter uit dan de GIF en vertoont het enkele artefacten.
PNG-24 is, zoals de naam al doet vermoeden, een 24-bits afbeelding. In sommige opzichten combineert het het beste van beide werelden van GIF en JPEG en is het een superieur formaat. Net als JPEG kan het miljoenen kleuren ondersteunen. PNG-24 kan ook alpha-transparantie bevatten, zodat het kan worden gebruikt voor afbeeldingen met vage randen en transparante schaduwen. Al die kleuren en transparantie komen met een prijs, echter in een grotere bestandsgrootte. In het onderstaande voorbeeld ziet u dat een JPEG die in de hoge instelling is opgeslagen bijna 22.000 is, terwijl de PNG ongeveer 95.000 is. Maar dankzij de transparantie kunt u de PNG-24-afbeelding op een achtergrond met een patroon of textuur plaatsen. Dus als u die flexibiliteit nodig heeft, is PNG-24 de juiste keuze.
Ik hoop dat je de bestandsindelingen beter begrijpt in Illustrator's Save for Web-functie. Elke indeling heeft zijn voor- en nadelen, maar met enkele zorgvuldige tests kunt u de beste instellingen voor uw illustraties vinden. Dit is een krachtig hulpmiddel en kan uw webwerk gemakkelijker en sneller laten verlopen. Nadat u de ideale instellingen voor uw afbeeldingen hebt bepaald, kunt u ze opslaan als een aangepaste voorinstelling. Vervolgens kunt u in een handomdraai hele mappen vol met vergelijkbare afbeeldingen in batch verwerken.
Vectorafbeeldingen in dit artikel zijn gekocht bij GraphicRiver: Janitor-vector, pompoenvector.
Accentsconagua