Översikt

Det kan vara svårt att veta vilket av alla grafiska format som ska användas för export av bilder till Edge Animate. Edge Animate har stöd för PNG-, GIF-, JPG- och SVG-bilder. I denna guide förklaras de olika typerna av format och när du ska använda dem.

Exempel på format

JPEG

JPEG-bilder kan komprimeras mer än PNG-bilder, vilket gör filen mindre. Använd helst JPEG när ingen transparens behövs (till exempel bakgrundsbilder). Eftersom filen blir mindre med JPEG ungefär 90 procent av gångerna minskar även kompositionernas laddningstid. De flesta designverktyg erbjuder ett kvalitetsalternativ för JPEG-export, vilket kommer väl till hands för att uppnå en optimal balans mellan bildstorlek och kvalitet. Ju lägre kvalitet, desto lägre filstorlek och vice versa. JPEG-filer rastreras och blir pixeliserade när de skalas upp.

PNG

PNG-filer är idealiska för bilder med transparens. Eftersom PNG även har stöd för alfagenomskinlighet är de perfkta för att skapa grafik med genomskinliga färger. PNG-filer rastreras och blir pixeliserade när de skalas upp.

PNG har tre huvudformat.
(Det finns även animerade PNG som är stora utmanare till GIF, men tyvärr har de inte mycket webbläsarstöd.)

PNG-8

PNG-8 som exporteras från Photoshop eller Illustrator har inte stöd för alfagenomskinlighet. Det innebär att varje pixel är antingen genomskinlig eller ogenomskinlig, vilket medför synliga ojämnheter på böjda eller diagonala kanter (se ovanstående bild). Men om det finns raka linjer i grafiken och du behöver genomskinlighet (till exempel en blå ruta på en genomskinlig bakgrund) är PNG-8 rätt val för optimal filstorlek.

PNG-24

PNG-24 har stöd för alfagenomskinlighet, vilket innebär att fina försämringar av genomskinlighet är möjliga. Detta är det mest populära formatet för Edge Animate eftersom genomskinliga PNG-bilder möjliggör skarp grafik med stöd för genomskinlighet och lager av olika element.

PNG-32

PNG-32 liknar PNG-24 förutom att även har 8-bitars genomskinlighet.

SVG

SVG bevarar vektorinnehållet vid export så att det kan skalas utan pixelförvandling i webbläsaren. Innehåll kan inte redigeras ytterligare när det förs till Edge Animate eftersom det hanterar SVG-filer som utplattade teckningar. Det går dock alltid att uppdatera och spara om bilden i farten i grafikprogrammet. SVG bör endast användas när du behöver skalförändra en bild på grund av ökad filstorlek. Just nu är det säkrare att använda PNG på nätet eftersom det fortfarande finns problem med olika webbläsarstöd.

Tänk på att du inte får vad du ser när du exporterar SVG med llustrator. Det beror på att AI exporterar dolda filer och lager, vilket kan öka filstorleken dramatiskt. Storleken på din SVG blir densamma som ritytan, så innan du sparar är det viktigt att trimma ner ritytan så att den passar bilden.

Det finns många SVG-format med olika begränsningar. SVG 1.1 är den form som rekommenderas av W3C.

GIF

GIF-filer är användbara när du behöver animering som finns i bilden (till exempel en förladdningsmätare). Även GIF har stöd för genomskinlighet, dock med samma begränsningar som PNG-8. Eftersom PNG vanligtvis komprimerar bättre och med högre kvalitet än GIF bör GIF bara användas vid behov av en animering som finns i en bild.

Bildstorlek

Oavsett vilket filformat du använder kommer det att uppstå problem vid hantering av grafik i vissa situationer på grund av webbens natur.

Grafik för iOS

För närvarande blir bilder på iOS förvrängda och skalförändrade ifall de överskrider 1024 x 1024 px. Ifall du behöver bilder som överskrider dessa mått för användning på iOS, prova med att dela upp bilden i två eller fler mindre bilder och montera sedan ihop dem med en symbol eller grupp i Edge Animate.

Kända problem med bildanimering

I skrivande stund förekommer några fel angående vissa animeringsstilar på grund av webbläsarbegränsningar.

  • Att animera ett objekt under en längre tid genom väldigt små steg kan få animeringen att verka skakig. Exempelvis animera en bild från 100 % till 103 % under ett tidsintervall på 2 sekunder. För att lösa detta, prova med att förlänga övergångens varaktighet eller att öka övergångens värde.
  • Att animera väldigt stora bilder eller att skapa övergångar som skalförändrar bilden i stor omfattning kan orsaka problem i vissa webbläsare.

Läs mer

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy