Panoramica

Con la vasta gamma di formati grafici disponibili, talvolta può essere difficile decidere come esportare le immagini da utilizzare in Edge Animate. Edge Animate supporta le immagini nei formati PNG, GIF, JPG e SVG. Questa guida illustra i vari tipi di formato disponibili e quando utilizzarli.

Esempio dei vari formati

JPEG

Le immagini JPEG (o JPG) hanno spesso una compressione migliore rispetto alle immagini PNG e i file hanno pertanto dimensioni minori. Provate a usare JPEG ogni volta che non è necessaria la trasparenza (ad esempio, immagini di sfondo). Nel 90% dei casi, con JPEG vengono generati file di dimensioni più piccole, che consentono di ridurre il tempo di caricamento delle composizioni. La maggior parte degli strumenti di progettazione offre un'opzione di qualità per l'esportazione JPEG, utile quando si cerca di ottenere il risultato ottimale tra dimensioni delle immagini e qualità. Più bassa è la qualità, minori sono le dimensioni dei file e viceversa. I file JPEG sono in formato di file grafico raster e quando le immagini vengono ingrandite i pixel diventano ben visibili.

PNG

I file PNG sono ideali quando è necessario utilizzare immagini con trasparenza. PNG supporta anche la trasparenza alfa, che rende questo formato ideale per la creazione di grafica con colori traslucidi. I file PNG sono in formato di file grafico raster e quando le immagini vengono ingrandite i pixel diventano ben visibili.

Sono disponibili tre formati PNG principali.
(Sono disponibili anche formati PNG animati, che rappresentano un ottimo concorrente del formato GIF, ma purtroppo non sono supportati da molti browser.)

PNG-8

Il formato PNG-8 come viene esportato da Photoshop o Illustrator non supporta la trasparenza alfa, ossia ogni pixel è trasparente o opaco, pertanto sarà possibile vedere frastagliature sulle curve o sui bordi diagonali (vedere il grafico riportato sopra). Tuttavia, se la grafica contiene linee rette ed è necessario un effetto di trasparenza (ad esempio, un quadrato blu su uno sfondo trasparente), PNG-8 è il formato ideale per ottenere dimensioni di file ottimali.

PNG-24

PNG-24 supporta la trasparenza alfa, il che significa che è possibile sfumare le immagini con gradualità di traslucidità. Si tratta del formato più comune per Edge Animate, poiché PNG trasparenti consentono di ottenere una grafica nitida e con supporto della trasparenza, in modo da creare layer degli elementi.

PNG-32

PNG-32 è simile al formato PNG-24, ad eccezione del fatto che supporta anche 8 bit di trasparenza.

SVG

SVG mantiene il contenuto vettoriale durante l'esportazione, in modo da poter modificare la scala senza causare la divisione in pixel dell'immagine nel browser. Attualmente, Edge Animate gestisce i file SVG come artwork appiattito, pertanto, una volta importato il contenuto in Edge Animate, non può essere sottoposto a ulteriori operazioni di editing (tuttavia, potete sempre aggiornare e salvare di nuovo la grafica istantaneamente nel programma di grafica in uso). Si consiglia di utilizzare SVG solo quando è necessario ridimensionare la grafica in seguito a dimensioni maggiori dei file. Per il momento, è più sicuro utilizzare PNG sul Web, poiché vi sono ancora problemi relativi al supporto tra browser.

Quando utilizzate Illustrator per esportare SVG, è opportuno tenere presente che ciò che vedete non è il risultato che otterrete; AI esporta infatti file e livelli nascosti che possono aumentare notevolmente le dimensioni dei file. La dimensione del file SVG include anche le dimensioni della tavola da disegno, quindi assicuratevi di ridurre quest'ultima in modo da adattarla alla grafica prima di salvare.

Esistono vari formati SVG con limitazioni diverse. SVG 1.1 è il formato consigliato da W3C.

GIF

I file GIF sono utili quando desiderate disporre di animazioni nella grafica (ad esempio, un precaricatore). GIF supporta inoltre la trasparenza, tuttavia presenta le stesse limitazioni del formato PNG-8. I file PNG tendono ad avere una compressione migliore con una qualità più elevata rispetto al formato GIF, quindi si consiglia di utilizzare GIF solo quando avete bisogno di animazioni contenute nella grafica.

Dimensioni delle immagini

Indipendentemente dal formato di file utilizzato, a causa della natura del Web, quando gestite la grafica in determinate situazioni, incontrerete inevitabilmente dei problemi.

Grafica per iOS

Attualmente, le immagini in iOS vengono distorte e ridimensionate se superano 1024 x 1024 px. Se avete bisogno di immagini superiori a queste dimensioni da utilizzare in iOS, provate a ritagliare l'immagine in due o più immagini più piccole e ricomponetele utilizzando un simbolo o gruppo in Edge Animate.

Problemi noti relativi all'animazione delle immagini

Al momento vi sono alcuni problemi relativi a determinati stili di animazioni a causa delle limitazioni dei browser.

  • L'animazione di un elemento per un lungo periodo di tempo con incrementi molto piccoli può far sì che l'immagine appaia difettosa. Ad esempio, l'animazione di un'immagine da 100% a 103% in un periodo di 2 secondi. Per evitare questo problema, provate ad aumentare la durata della transizione o ad aumentare il valore della transizione.
  • L'animazione di immagini di grandi dimensioni o la creazione di transizioni che ridimensionano l'immagine in quantità elevate potrebbero causare problemi in alcuni browser.

Ulteriori informazioni

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online