Visão geral
Com todos os formatos gráficos diferentes existentes, pode ser complicado decidir como exportar suas imagens para usar no Edge Animate. O Edge Animate suporta imagens no formato PNG, GIF, JPG e SVG. Este guia irá explicar os diferentes tipos de formato e quando usar cada um.
JPEG
As imagens JPEG (ou JPG) têm frequentemente melhor compactação que os PNGs que resultam em um tamanho de arquivo menor. Tente usar JPEGs sempre que você não precisar de transparência (por exemplo, imagens de fundo). Em cerca de 90% das vezes você obterá um arquivo menor com JPEG que reduzirá o tempo para carregar as composições. A maioria das ferramentas de design oferecem uma opção de qualidade para exportação de JPEG, que é útil ao tentar obter um equilíbrio ideal entre o tamanho e a qualidade. Quanto mais baixa for a qualidade, maior o tamanho do arquivo, e vice-versa. Os arquivos JPEG são rasterizados e serão pixelizados quando dimensionados para cima.
PNG
Os arquivos PNG são ideais quando você precisa usar imagens com transparência. O PNG também suporta a transparência alfa, que os torna ideais para criar gráficos com as cores translúcidas. Os arquivos PNG são rasterizados e serão pixelizados quando dimensionados para cima.
Existem três formatos principais do PNG.
(Há também PNGs animados que são um grande concorrente do GIF, mas que infelizmente não têm suporte muito amplo no navegador).
PNG-8
O PNG-8 exportado como do Photoshop ou do Illustrator não oferece suporte à transparência alfa, o que significa que cada pixel é transparente ou opaco, portanto você verá algum grua de desvio em curvas ou bordas diagonais (consulte o gráfico acima). No entanto,, se o seu gráfico tiver linhas retas e você precisa de transparência (por exemplo, um quadrado azul em um plano de fundo transparente) o PNG-8 é a o meio para ter um arquivo com tamanho otimizado.
PNG-24
O PNG -24 suporta a transparência alfa, o que significa que é possível ter degradações finas de grau de translúcido. Este é o formato mais popular para o Edge Animate já que os PNG transparentes permitem gráficos nítidos com suporte para a transparência para que você possa colocar seus elementos em camadas.
PNG-32
O PNG-32 é similar ao PNG-24 com a exceção que ele também carrega 8 bits da transparência.
SVG
O SVG preservará seu conteúdo de vetor na exportação para poder dimensionar sem pixelação no navegador. Atualmente, o Edge Animate manipula arquivos SVG como arte-final nivelada e, portanto uma vez que seu conteúdo seja trazido para o Edge Animate, ele não pode efetuar edição adicional (embora você sempre poderá atualizar e salvar novamente seus gráficos imediatamente no seu programa gráfico). O SVG deve ser usado apenas quando você precisar dimensionar seus gráficos devido ao tamanho de arquivo aprimorado. No momento, o mais seguro é usar PNG na Web porque ainda há problemas em relação ao suporte entre os navegadores.
Algo a ser levado em consideração ao usar o Illustrator para exportar SVG, é o que você vê não é o que recebe. O AI irá exportar arquivos e camadas ocultos, que podem drasticamente inflar o seu tamanho de arquivo. O tamanho de seu SVG também será o tamanho da arte-final e, portanto assegure-se de aparar a arte-final para ajustá-la para seu gráfico antes de salvar.
Há vários formatos diferentes de SVG com diferentes limitações. O SVG 1.1 é o formato recomendado pelo W3C.
GIF
Os arquivos GIF são úteis quando você precisar da animação contida em seu gráfico (por exemplo, um pré-carregador). O GIF também oferece suporte à transparência, no entanto, tem as mesmas restrições que p PNG-8. Os PNGs tendem a ter melhor compactação com qualidade mais alta do que o GIF, portanto é somente é recomendável usar o GIF quando você precisar da animação contida em um gráfico.
Dimensões da imagem
Independentemente do formato de arquivo que você usar, devido à natureza da Web haverá alguns problemas ao manipular gráficos em determinadas situações.
Gráficos para iOS
Atualmente, as imagens no iOS ficarão distorcidas e serão dimensionadas se excederem 1024 px 1024 x. Se você precisar que as imagens que se estendem nessas dimensões para uso no iOS, tente recortar a imagem em duas ou mais imagens menores e voltar a juntá-las usando um símbolo ou grupo no Edge Animate.
Problemas conhecidos com animação da imagem
A partir desta redação existem alguns problemas relacionados a determinados estilos das animações devido a limitações do navegador.
- Animar um elemento por um longo período de tempo em incrementos muito pequenos pode fazer com que a animação pareça distorcida. Por exemplo, animar uma imagem de 100% a 103% em um período de tempo de 2 segundos. Como uma solução alternativa para isso, tente aumentar a duração da sua transição ou aumentar o valor da transição.
- Animar imagens muito grandes ou criar transições que dimensionam a imagem em grandes quantidades, pode causar problemas em alguns navegadores.
Saiba mais
Fazer logon em sua conta