Bewegtes Bild

Das bewegtes Bild als Blickfang oder Aufmerksamkeitsfänger

INFO: Im Internet oder in E-Books erzeugt ein bewegtes Bild mehr Aufmerksamkeit als ein statisches Bild. Meist sind bewegte Bilder Video-Dateien. Doch da gibt es das Problem, dass nicht alle Videoformate bzw. Codierungsverfahren von allen System abgespielt werden. Dies kann man für kurze Animationen dadurch lösen, in dem auf ein Bildformat setzt, das Animationen erlaubt: GIF, PNG, ACHTUNG: JPEG2000, WebP, ACHTUNG: HEIF und SVG.

GIF-Animation erstellt in Adobe Illustrator

GIF: Graphics Interchange Format wurde bereits 1987 erfunden. Es »versteht« nur 256 Farben und ist daher für normale Fotos eher ungeeignet. Jedoch ist es auch das älteste Dateiformat, das Animationen enthalten kann. Die Bilder wirken meist unscharf. Farbverläufe, Schatten oder Halbtranzparenzen sind nicht möglich.

Keine Steuerung

Da es im Gegensatz zu Videoplayern keine Steuerung für das bewegte Bild gibt, muss der Ersteller vorher überlegen, wie bzw. wie oft der Clip abgespielt wird. In der Regel laufen bewegte Bilder in einer Endlosschleife. Wenn das letzte Bild sich vom ersten stark unterscheidet, kommt es zu einem unschönen Sprung.

PNG-Animation erstellt mit Adobe Illustrator

PNG: Portable Network Graphics wurde bereits 1995 als Ersatz für GIF eingeführt und hob die Grenze von 256 Farben pro Bild auf. Farbverläufe, Schatten oder Halbtranzparenzen sind möglich. Im Gegensatz zu JPG ist die Kompression besser, ein transparenter Hintergrund und Animationen möglich. Animierte PNG werden auch als »aPNG« bezeichnet.

2D-Animationsprogramme

Ein bewegtes Bild läßt sich mit vielen Bildbearbeitungsprogrammen erstellen. Dies ist zum Beispiel mit Adobe Photoshop oder FireAlpaca möglich. Trickfilm- oder 2D-Animationsprogramme wie Adobe Animate, Moho, CartoonAnimator oder SynfigStudio erleben ebenfalls den Export als Bildsequenzen und GIF-Animationen.

JPEG2000-Animationen können in WordPress nicht geladen und abgespielt werden

JPEG2000: Wurde als Nachfolger des Bildformats JPEG im Jahr 2000 eingeführt. Es verfügt über Alpha-Kanäle und kann Bilder darstellen, die größer als 64000 x 64000 Pixel groß sind. JP2-Dateien können auch Animationen enthalten.
ACHTUNG: Bilder oder Bildsequenzen im Format JEPG2000 lassen sich in WordPress 5.7 nicht aufladen und darstellen.

Dateigröße (Speicherplatz)

Die Dateigröße (Speicherplatz) eines bewegten Bildes hängt von der Auflösung (Anzahl der Pixel: Höhe und Breite) ab und von der Anzahl der Bilder, die enthalten sind.

HEIF-Animationen können in WordPress nicht geladen und abgespielt werden

HEIF: High Efficiency Image File Format (HEIF) ist ein flexibles Dateiformat für Bilder und Bildsequenzen. Im Jahr 2000 wurde es von der Moving Picture Experts Group (MPEG) auf den Markt gebracht. Es wird von macOS 10.13 (High Sierra) oder höher unterstützt und ebenso von Windows 10 (Update 1809).
ACHTUNG: Bilder oder Bildsequenzen im Format HEIF (HEIC) lassen sich in WordPress 5.7 nicht aufladen und darstellen.

Geschwindigkeit und Dauer

Die Geschwindigkeit, in der ein bewegtes Bild ab spielt, hängt von der Dauer der Bilddarstellung für jedes Bild ab. Normale Videos laufen mit 24 Bilder pro Sekunde ab, also ist jedes Bild 0,4 Sekunden sichtbar. Bewegte Bilder sind in der Regel auch mit 12 Bilder pro Sekunde noch ruckelfrei, also bei einer Bilddarstellungszeit von 0,8 Sekunden. Durch diese Reduzierung kann man die Dateigröße (Speicherplatz) erheblich reduzieren.

WebP-Animationen können ab WordPress 5.8 geladen und abgespielt werden

WebP: WebP ist ein Grafikformat für komprimierte statische oder animierte Bilder, die auch verlustfrei sein können. Dieses Format kam erst 2010 auf den Markt und wird von modernen Webbrowsern unterstützt.
TIPP: Bilder oder Bildsequenzen im Format WebP lassen sich seit WordPress 5.8 aufladen und darstellen.

WebM: WebM ist ein Videoformat und ein »Bruder« von WebP. 2011 ist WebM erschienen und wird nur von modernen Webbrowsern unterstützt. Apple Safari unterstützt es erst mit Version 15 unter macOS 11.
TIPP: Videos im Format WebM lassen sich in WordPress aufladen und darstellen. Zur Wiedergabe sollte man jedoch ein passendes Plug-In wie Videojs HTML5 Player verwenden. Dann können Sie per »Shortcut« das Video in die Webseite einbinden; zum Beispiel so: [ videojs_video url="http:// … WebM.mp4" webm="http:// … WebM.webm" height="101" controls="false" autoplay="true" loop="true" muted="true" ]. Wobei ein Fall-Back über ein .mp4-Video angegeben werden muss.

Animierte Vektorgrafik

Nicht nur Bitmapgrafiken können bewegte Bilder sein, sondern auch Vektorgrafiken. Neben Lösungen in HTML mit JavaScript ist es auch Bildformat für bewegte Vektorgrafiken: SVG.

SVG-Animation erstellt mit Keyshape

SVG: Scalable Vector Graphics wurde 1999 vom World Wide Web Consortium (W3C) auf den Markt gebracht. Es kann ein 2D-Vektor-Grafiken und -Animationen anzeigen oder auch interaktiv auf den Benutzer reagieren.
TIPP: Animierte SVG funktionieren in WordPress nur mit eingebundenen CSS. Dazu später mehr in einem eigenen Artikel.

Fazit

Auch wenn es mehrere Dateiformate für bewegte Bilder gibt. Wirklich verwenden kann man als Webmaster nur (GIF, ) PNG und SVG.

Das passende Programm?

Während viele Programme, die Animationen erstellen können, GIF exportieren können, wird es für die anderen Dateiformate wie aPNG und aSVG schwierig(er) ein passendes Programm zu finden. Doch das soll das Thema eines anderen Artikels sein.

ENDE

Jetzt sind Sie gefragt!

FAQ: Klicken Sie auf den Link »Kontakt«, wenn Sie eine Anregungen, Ergänzungen oder einen Fehler gefunden haben.

Obacht Klicken Sie auf den Link »Newsletter«, wenn Sie wollen gerne auf dem Laufenden bleiben?

OK Klicken Sie auf den Link »Spende«, wenn Sie die Website mit einer kleinen Zuwendung unterstützen möchten.