Übersicht

Da es so viele verschiedene Grafikformate gibt, kann das richtige Exportieren von Bildern zur Verwendung in Edge Animate eine schwierige Entscheidung sein. Edge Animate unterstützt PNG-, GIF-, JPG- und SVG-Bilder. Diese Richtlinie erläutert die unterschiedlichen Formattypen und ihre Verwendung.

Beispiel für verschiedene Formate

JPEG

Bilder im JPEG-Format (oder JPG) sind oft besser komprimiert als PNGs, was eine kleinere Dateigröße zur Folge hat. Verwenden Sie JPEGs, wenn Sie keine Transparenz benötigen (z. B. für Hintergrundbilder). In 90 % der Fälle erhalten Sie mit dem JPEG-Format eine kleinere Datei, was die Ladezeit Ihrer Kompositionen verkürzt. Die meisten Design-Tools bieten eine Qualitätsoption für den JPEG-Export, um das optimale Gleichgewicht zwischen Bildgröße und Bildqualität zu ermöglichen. Je schlechter die Qualität, desto geringer die Dateigröße, und umgekehrt. JPEG-Dateien sind gerastert und werden gepixelt, wenn sie vergrößert werden.

PNG

PNG-Dateien sind ideal für die Verwendung von Bildern mit Transparenz. Das PNG-Format unterstützt zudem Alphatransparenz und ist daher ideal für die Erstellung von Grafiken mit transluzenten Farben. PNG-Dateien sind gerastert und werden gepixelt, wenn sie vergrößert werden.

Es gibt drei Hauptformate von PNG.
(Es gibt außerdem animierte PNGs, die ähnliche Funktionen wie GIFs bieten, aber über geringere Browserunterstützung verfügen.)

PNG-8

Wird PNG-8 aus Photoshop oder Illustrator exportiert, wird Alphatransparenz nicht unterstützt. D. h., dass jedes Pixel entweder transparent oder opak ist und Kurven oder diagonale Kanten etwas zackig sind (siehe Grafik). Wenn die Grafik allerdings gerade Linien enthält und Sie Transparenz benötigen (z. B. ein blaues Quadrat auf einem transparenten Hintergrund), bietet PNG-8 die optimale Dateigröße.

PNG-24

PNG-24 unterstützt Alphatransparenz. Das bedeutet, dass kleine Beeinträchtigungen der Transluzenz auftreten können. Dies ist das beliebteste Format für Edge Animate, da transparente PNGs klare Grafiken mit Transparenz unterstützen, sodass Sie Ihre Elemente in Ebenen bearbeiten können.

PNG-32

PNG-32 ist ähnlich wie PNG-24, mit der Ausnahme, dass es auch 8 Bits Transparenz enthält.

SVG

SVG behält den Vektorinhalt beim Exportieren bei, damit die Größe ohne Pixelierung im Browser angepasst werden kann. Derzeit behandelt Edge Animate SVG-Dateien als reduziertes Bildmaterial, sodass der Inhalt nicht weiter bearbeitet werden kann, wenn er in Edge Animate importiert wurde (Sie können aber jederzeit Ihre Grafiken schnell im Grafikprogramm aktualisieren und neu speichern). SVG sollte nur verwendet werden, wenn Sie die Grafiken aufgrund einer größeren Datei skalieren müssen. Vorläufig ist es sicherer, im Internet PNGs zu verwenden, da noch immer Probleme bezüglich der browserübergreifenden Unterstützung auftreten können.

Beachten Sie beim Exportieren von SVG mit Illustrator aber, dass das Programm ausgeblendete Dateien und Ebenen exportiert, die die Dateigröße ungemein erweitern können. Die Größe der SVG entspricht der Größe der Zeichenfläche. Stellen Sie also sicher, dass die Zeichenfläche vor dem Speichern so angepasst wird, dass die Grafik hineinpasst.

Es gibt verschiedene Formate von SVG mit verschiedenen Einschränkungen. SVG 1.1 ist das vom W3C empfohlene Format.

GIF

GIF-Dateien sind nützlich, wenn Sie Animationen innerhalb Ihrer Grafik benötigen (z. B. einen Preloader.) GIF unterstützt auch Transparenz, aber mit denselben Einschränkungen wie PNG-8. PNGs verfügen im Allgemeinen über bessere Komprimierung mit einer höheren Qualität als GIF. Daher wird empfohlen, GIF nur zu verwenden, wenn Sie Animationen innerhalb der Grafik verwenden möchten.

Bildabmessungen

Egal für welches Dateiformat Sie sich entscheiden: Es wird beim Verwenden von Grafiken im Internet in bestimmten Situationen einige Probleme geben.

Grafiken für iOS

Derzeit werden Bilder auf iOS verzerrt und skaliert, wenn sie 1024 x 1024 Pixel überschreiten. Wenn Sie größere Bilder auf iOS verwenden möchten, schneiden Sie das Bild zu, sodass Sie mindestens zwei kleinere Bilder erhalten. Dann setzen Sie diese mithilfe eines Symbols oder einer Gruppe in Edge Animate zusammen.

Bekannte Probleme bei der Bildanimation

Derzeit gibt es aufgrund von Browsereinschränkungen noch einige Probleme mit bestimmten Animationsstilen.

  • Bei der Animation eines Elements über einen langen Zeitraum hinweg und in sehr kleinen Schritten kann die Animation zittrig werden. Beispielsweise bei einer Animation eines Bild von 100 auf 103 % über eine Zeitspanne von 2 Sekunden. Um dieses Problem zu umgehen, erhöhen Sie die Übergangsdauer oder den Übergangswert.
  • Durch die Animation von sehr großen Bildern oder durch das Erstellen von Übergängen, durch die das Bild skaliert wird, können in einigen Browsern Probleme auftreten.

Weitere Informationen

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie