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: 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: 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: 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: 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: 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: 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