Oversikt

Med alle de forskjellige grafikkformatene som finnes, kan det være vanskelig å bestemme seg for hvordan du skal eksportere bilder som skal brukes i Edge Animate. Edge Animate støtter PNG-, GIF-, JPG- og SVG-bilder. Denne veiledningen forklarer de forskjellige formattypene, og når de skal brukes.

Eksempel på forskjellige formater

JPEG

JPEG-bilder (eller JPG) har ofte bedre kompresjon enn PNG-er, noe som resulterer i mindre filstørrelser. Bruk JPEG-er når du ikke trenger transparens (for eksempel bakgrunnsbilder). Omtrent 90 % av gangene får du en mindre fil med JPEG, noe som reduserer lastetiden til komposisjonene dine. De fleste designverktøy tilbyr et kvalitetsalternativ for JPEG-eksport, noe som er nyttig når du prøver å oppnå en optimal balanse mellom bildestørrelse og -kvalitet. Jo lavere kvalitet, dess lavere filstørrelse, og motsatt. JPEG-filer er rastrerte og blir pikselerte når de forstørres.

PNG

PNG-filer er ideelle når du må bruke bilder med transparens. PNG støtter også alfatransparens, og det gjør dem ideelle når man lager grafikk med gjennomskinnelige farger. PNG-filer er rastrerte og blir pikselerte når de forstørres.

PNG-er har tre hovedformater.
(Vi har også animerte PNG-er, som er et flott alternativ til GIF, men som dessverre ikke har bred nettleserstøtte).

PNG-8

PNG-8 eksportert fra Photoshop eller Illustrator støtter ikke alfatransparens, og det betyr at enhver piksel er enten transparent eller opak. Grunnet dette vil du se ujevnheter på kurver og diagonale kanter (se grafikk ovenfor). Hvis grafikken din inneholder rette linjer og du trenger transparens (for eksempel et blått kvadrat på en transparent bakgrunn), så er PNG-8 riktig valg for optimal filstørrelse.

PNG-24

PNG-24 støtter alfatransparens, og det betyr at du kan ha fine fortoninger av gjennomskinnelighet. Dette er det mest populære formatet for Edge Animate, siden gjennomskinnelige PNG-er gir klar grafikk med transparensstøtte slik at du kan legge elementer i lag.

PNG-32

PNG-32 er likt PNG-24, bortsett fra at det også har 8-biters transparens.

SVG

SVG vil beholde vektorinnholdet ved eksport, slik at det kan skaleres uten pikselering i nettleseren. Edge Animate håndterer SVG-filer som flate kunstverk, så når innholdet ditt overføres til Edge Animate kan det ikke redigeres videre (men du kan oppdatere og lagre grafikken på nytt i grafikkprogrammet ditt). SVG bør kun brukes når du må skalere grafikken grunnet økt filstørrelse. For øyeblikket er det tryggere å bruke PNG på nettet, siden det fremdeles er problemer knyttet til støtte på tvers av nettlesere.

Når du bruker Illustrator til å eksportere SVG er det viktig å huske at det du ser er ikke det du får; AI eksporterer skjulte filer og lag, noe som kan øke filstørrelsen betraktelig. Størrelsen på SVG-filen er også størrelsen på kunsttavlen, så beskjær den slik at den passer til grafikken før du lagrer.

Det finnes flere forskjellige SVG-formater med forskjellige begrensninger. SVG 1.1 er formatet som anbefales av W3C.

GIF

GIF-filer er nyttige når du vil ha animasjon i grafikken din (for eksempel en forhåndslaster). GIF støtter også transparens, men har samme begrensninger som PNG-8. PNG-er har ofte bedre kompresjon med høyere kvalitet enn GIF, så det anbefales å bruke GIF kun når du vil ha animasjon i en grafikk.

Bildedimensjoner

På grunn av nettets egenskaper vil det oppstå problemer med grafikkhåndtering i enkelte situasjoner, uansett hvilket filformat du bruker.

Grafikk for iOS

For øyeblikket vil bilder på iOS bli fordreide og skalere hvis de overskrider 1024 x 1024 piksler. Hvis du trenger bilder som overskrider disse dimensjonene for bruk på iOS, kan du prøve å beskjære bildet til to eller flere mindre bilder, for så å sette dem sammen med et symbol eller en gruppe i Edge Animate.

Kjente problemer knyttet til bildeanimasjon

Når dette skrives er det noen problemer knyttet til enkelte animasjonsstiler grunnet nettleserbegrensninger.

  • Animasjon av et element over lengre tid i veldig små inkrementer kan føre til at animasjonen blir hakkete. For eksempel om man animerer et bilde fra 100 % til 103 % over en periode på 2 sekunder. For å unngå dette kan du prøve å øke overgangens varighet, eller å øke overgangsverdien.
  • I noen nettlesere kan det oppstå problemer når man animerer veldig store bilder eller bruker overganger som skalerer bildet i store mengder.

Finn ut mer

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet