Overzicht
Met alle verschillende afbeeldingsindelingen op de markt, kan het ingewikkeld zijn om te beslissen in welke indeling u uw afbeeldingen wilt exporteren om in Edge Animate te gebruiken. Edge Animate ondersteunt PNG-, GIF-, JPG- en SVG-afbeeldingen. Deze handleiding legt de verschillende bestandsindelingen uit en wanneer u welke indeling moet gebruiken.
JPEG
JPEG-afbeeldingen (of JPG) hebben meestal een betere compressie dan PNG's waardoor ze een kleinere bestandsgrootte hebben. Gebruik JPEG-bestanden wanneer u geen transparantie vereist (bijvoorbeeld achtergrondafbeeldingen). 90% van de tijd krijgt u een kleiner bestand met JPEG waardoor de laadtijd van uw composities minder lang is. De meeste ontwerpprogramma's bieden een kwaliteitsoptie voor JPEG-exports. Dit is handig wanneer u een optimale balans tussen afbeeldinggrootte en kwaliteit wilt. Hoe lager de kwaliteit, hoe lager de bestandsgrootte en omgekeerd. JPEG-bestanden worden gerasterd en worden korrelig wanneer ze worden vergroot.
PNG
PNG-bestanden zijn ideaal als u afbeeldingen met transparantie moet gebruiken. PNG biedt ook ondersteuning voor alfatransparantie, waardoor ze uitermate geschikt zijn voor het maken van afbeeldingen met doorzichtige kleuren. PNG-bestanden worden gerasterd en worden korrelig wanneer ze worden vergroot.
Er zijn drie belangrijke PNG-indelingen.
(Er zijn ook geanimeerde PNG-bestanden die een goede concurrent zijn voor de GIF-bestanden, maar deze worden helaas niet ondersteund door de meeste browsers.)
PNG-8
PNG-8 zoals die zijn geëxporteerd vanuit Photoshop of Illustrator ondersteunen geen alfatransparantie, waardoor elke pixel transparant of ondoorzichtig is zodat u de rondingen en diagonale randen een beetje gekarteld zijn (zie bovenstaande afbeelding). Maar als uw afbeelding rechte lijnen bevat en u vereist transparantie (bijvoorbeeld een blauw vierkant op een transparante achtergrond) dan is PNG-8 de beste keuze voor optimale bestandsgrootte.
PNG-24
PNG-24 ondersteunt alfatransparantie, wat betekent dat u lichte degradaties van doorzichtigheid hebt. Dit is de populairste indeling voor Edge Animate omdat transparante PNG's scherpe afbeeldingen toestaan met ondersteuning voor transparantie zodat u uw elementen in lagen kunt indelen.
PNG-32
PNG-32 is vergelijkbaar met PNG-24 met de uitzondering dat deze ook 8-bits transparantie overdraagt.
SVG
SVG behoudt uw vectorinhoud bij het exporteren zodat u in de browser kunt schalen zonder pixelvorming. Momenteel behandeld Edge Animate SVG-bestanden als afgevlakte illustraties. Dit zorgt ervoor dat wanneer uw inhoud in Edge Animate wordt gebracht, uw inhoud niet meer kan worden bewerkt (u kunt wel altijd uw afbeeldingen in een oogwenk bijwerken en opslaan in uw afbeeldingenprogramma). SVG mag alleen worden gebruikt wanneer u uw afbeeldingen moet schalen vanwege verhoogde bestandsgrootte. Voorlopig is het veiliger om PNG te gebruiken op het internet aangezien er nog steeds problemen zijn met betrekking tot ondersteuning voor meerdere browsers.
Onthoud bij het gebruik van Illustrator om SVG te exporteren: wat u ziet is niet wat u krijgt. AI exporteert verborgen bestanden en lagen, waardoor uw bestandsgrootte aanzienlijk kan vergroten. De grootte van uw SVG wordt ook de grootte van het tekengebied, dus zorg ervoor dat het tekengebied wordt bijgesneden zodat uw afbeelding past voordat u opslaat.
Er zijn verschillende andere indelingen van SVG met verschillende beperkingen. SVG 1.1 is de indeling die wordt aanbevolen door W3C.
GIF
GIF-bestanden zijn handig wanneer u animatie nodig hebt in uw afbeelding (bijvoorbeeld een preloader). GIF ondersteunt ook transparantie, maar heeft dezelfde beperkingen als PNG-8. PNG's hebben vaak een betere compressie van hogere kwaliteit dan GIF. Daarom is het raadzaam om alleen GIF te gebruiken wanneer u animatie in een afbeelding vereist.
Afmetingen afbeelding
Ongeacht de bestandsindeling die u gebruikt, zullen er vanwege de aard van het internet in bepaalde situaties enkele problemen zijn bij het verwerken van afbeeldingen.
Afbeeldingen voor iOS
Momenteel worden de afbeeldingen op iOS vervormd en geschaald als ze groter zijn dan 1024 x 1024 px. Als u afbeeldingen vereist die groter zijn dan deze afmetingen om op iOS te gebruiken, probeert u om de afbeelding bij te snijden in twee of meerdere kleinere afbeeldingen en kleeft u ze samen met een symbool of groep in Edge Animate.
Bekende problemen met afbeeldingsanimatie
Tijdens het schrijven zijn er een paar problemen met bepaalde animatiestijlen vanwege browserbeperkingen.
- Een element animeren tijdens een lange periode in zeer kleine toenamen kan ervoor zorgen dat de animatie schokkerig lijkt. Bijvoorbeeld, een afbeelding animeren van 100% naar 103% gedurende 2 sec. Vermijd dit probleem door de duur van uw overgang of de overgangswaarde te verhogen.
- Zeer grote afbeeldingen animeren of overgangen maken die de afbeelding in grote getallen schalen, kan problemen veroorzaken in sommige browsers.
Meer informatie
Aanmelden bij je account