With all the different graphic formats out there it can be tricky deciding how to export your images to use in Edge Animate. Edge Animate supports PNG, GIF, JPG and SVG images. This guide will explain the different format types and when to use each one.
JPEG (or JPG) images often have better compression than PNGs which will result in smaller filesize. Try using JPEGs whenever you don't need transparency (for example, background images). About 90% of the time you'll get a smaller file with JPEG which will reduce loading time of your compositions. Most design tools offer a quality option for JPEG export, which is useful when trying to achieve an optimal balance between image size and quality. The lower the quality, the lower the filesize, and vice-versa. JPEG files are rasterized and will become pixelated when scaled up.
PNG files are ideal when you need to use images with transparency. PNG also supports alpha transparency, which makes them ideal for creating graphics with translucent colours. PNG files are rasterized and will become pixelated when scaled up.
There are three main formats of PNG.
(There's also animated PNGs which are a great GIF contender, but unfortunately don't have very wide browser support.)
PNG-8 as exported from Photoshop or Illustrator doesn't support alpha transparency, which means that every pixel is either transparent or opaque so you'll see some jaggedness on curves or diagonal edges (see the above graphic). However if your graphic contains straight lines and you need transparency (for example, a blue square on a transparent background) PNG-8 is the way to go for optimal file size.
PNG-24 supports alpha transparency, which means you can have fine degradations of translucency. This is the most popular format for Edge Animate as transparent PNGs allows for crisp graphics with transparency support so you can layer your elements.
SVG will preserve your vector content on export so it can scale without pixelation in the browser. Currently Edge Animate handles SVG files as flattened artwork, so once your content is brought into Edge Animate it cannot undergo further editing (though you can always update and resave your graphics on the fly in your graphics program.) SVG should only be used when you need to scale your graphics due to increased filesize. For the time being its safer to use PNG on the web as there are still issues regarding cross-browser support.
Something to keep in mind when using Illustrator to export SVG is what you see is not what you get; AI will export hidden files and layers, which can dramatically inflate your filesize. The size of your SVG will also be the size of the artboard, so be sure to trim the artboard down to fit your graphic before saving.
There are several different formats of SVG with different limitations. SVG 1.1 is the format recommended by the W3C.
GIF files are useful when you need animation contained within your graphic (for example, a preloader.) GIF also supports transparency, however has the same limitations as PNG-8. PNGs tend to have better compression with higher quality than GIF, so it is recommended to only use GIF when you need animation contained within a graphic.
No matter which file format you use, due to the nature of the web there will be some issues when handing graphics in certain situations.
Currently, images on iOS will become distorted and scale if they exceed 1024 x 1024 px. If you need images that extend these dimensions for use on iOS, try cropping the image into two or more smaller images and piece them together using a symbol or group in Edge Animate.
As of this writing there are a few issues regarding certain styles of animations due to browser limitations.
- Animating an element over a long period of time in very small increments can cause the animation to appear jittery. For example, animating an image from 100% to 103% over a 2sec timespan. To work around this try increasing the duration of your transition or increasing the transition value.
- Animating very large images, or creating transitions that scale the image in large amounts, can cause problems in some browsers.