Oversigt

Med alle de forskellige grafikformater, der findes, kan det være svært at finde ud af, hvordan du skal eksportere billeder til brug i Edge Animate. Edge Animate understøtter PNG-, GIF-, JPG- og SVG-billeder. Denne vejledning indeholder beskrivelser af de forskellige formater og oplysninger om, hvornår de skal bruges.

Eksempler på forskellige formater

JPEG

JPEG-billeder (eller JPG-billeder) er ofte komprimeret mere end PNG-billeder, så filstørrelsen bliver mindre. Prøv at bruge JPEG-billeder, når du ikke har brug for gennemsigtighed (f.eks. baggrundsbilleder). I omkring 90 % af tilfældene får du en mindre fil, hvis du bruger JPEG, og dermed kan dine sammensætninger downloades hurtigere. I de fleste designværktøjer kan du vælge en kvalitetsindstilling ved JPEG-eksport, og det er praktisk, hvis du bestræber dig på at opnå en god balance mellem billestørrelsen og -kvaliteten. Jo lavere kvalitet, jo mindre filstørrelse – og omvendt. JPEG-filer er rasteriserede og pixeleres, hvis de opskaleres.

PNG

PNG-filer er ideelle, når du har brug for billeder med gennemsigtighed. PNG-filer understøtter også alfagennemsigtighed, hvilket gør dem ideelle til grafik med gennemsigtige farver. PNG-filer er rasteriserede og pixeleres, hvis de opskaleres.

Der er tre PNG-hovedformater.
Der findes også animerede PNG-filer, som er en konkurrent til GIF, men de understøttes desværre ikke i de fleste browsere.

PNG-8

PNG-8, som eksporteres fra Photoshop eller Illustrator, understøtter ikke alfagennemsigtighed. Det betyder, at hver enkelt pixel enten er gennemsigtig eller ikke er gennemsigtig, så du kan komme ud for, at kurver og diagonale kanter er hakkede (se grafikken ovenfor). Men hvis grafikken indeholder lige streger, og du har brug for gennemsigtighed (f.eks. et blåt kvadrat på en gennemsigtig baggrund), er det en god ide at bruge PNG-8, som giver den bedste filstørrelse.

PNG-24

PNG-24 understøtter alfagennemsigtighed, hvilket betyder, at du kan finjustere gennemsigtigheden. Det er det mest populære format til Edge Animate, fordi gennemsigtige PNG-billeder gør det muligt at arbejde med skarp grafik, der understøtter gennemsigtighed, så du kan anbringe elementer i flere lag.

PNG-32

PNG-32-formatet minder om PNG-24, bortset fra at det også understøtter 8-bit gennemsigtighed.

SVG

SVG bevarer vektorindhold ved eksport, så det kan skaleres, uden at det bliver pixeleret i browseren. I Edge Animate behandles SVG-filer i øjeblikket som samkopieret grafik, så når indholdet vises i Edge Animate, kan det ikke redigeres yderligere (selvom du altid kan opdatere og gemme grafikken igen, mens du arbejder i grafikprogrammet). SVG bør kun anvendes, hvis du har brug for at skalere grafik, da filerne bliver større. I øjeblikket er det mere sikkert at anvende PNG på internettet, da der stadig er problemer i forbindelse med understøttelsen på flere browsere.

Hvis du bruger Illustrator til eksport af SVG, skal du være opmærksom på, at du ikke får, hvad du ser; AI eksporterer også skjulte filer og lag, så filstørrelsen kan øges betragteligt. Størrelsen på SVG-filen er den samme som størrelsen på tegnebrættet, så du skal sørge for at tilpasse tegnebrættet efter grafikken, før du gemmer.

Der findes flere SVG-formater med forskellige begrænsninger. SVG 1.1 er det format, som anbefales af W3C.

GIF

GIF-filer er praktiske, hvis du har brug for animation i grafikken (f.eks. mens den indlæses). GIF-filer understøtter også gennemsigtighed, men der er de samme begrænsninger som ved PNG-8. PNG-filer er som regel bedre komprimeret og har en højere kvalitet end GIF, så det anbefales kun at bruge GIF, hvis du har brug for animation i grafikken.

Billeddimensioner

Uanset hvilket filformat du bruger, vil der i visse situationer være problemer med behandlingen af grafik på internettet.

Grafik til iOS

I iOS bliver billeder i øjeblikket forvrænget og skaleret, hvis de er større end 1024 x 1024 pixels. Hvis du vil have større billeder til brug i iOS, kan du prøve at beskære dem til to eller flere mindre billeder og anbringe dem sammen vha. et symbol eller en gruppe i Edge Animate.

Kendte problemer med billedanimation

I øjeblikket er der nogle problemer i forbindelse med visse animationsformater pga. browserbegrænsninger.

  • Hvis et element skal animeres over et langt stykke tid i meget små trin, kan animationen komme til at virke hakket. Det kan f.eks. ske, hvis et billede animeres fra 100 % til 103 % i løbet af 2 sekunder. Du kan prøve at løse problemet ved at forlænge varigheden af overgangen eller øge overgangsværdien.
  • I nogle browsere kan der opstå problemer ved animation af meget store billeder og ved oprettelse af overgange, hvor billedet skaleres i store trin.

Flere oplysninger

Dette arbejde har licens under en Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Opslag på Twitter™ og Facebook er ikke omfattet af vilkårene for Creative Commons.

Juridiske meddelelser   |   Politik for beskyttelse af personlige oplysninger online