GIF Bild: was es ist und wofür man es nutzt

 

Du hast eine kleine Bildschleife, vielleicht drei Sekunden deines Hundes beim Fangen oder ein drehendes Logo, und willst sie neben deinen Fotos in der Galerie zeigen. Dann landest du fast zwangsläufig bei einem GIF-Bild. Das Format ist älter als die meisten Webseiten, auf denen es heute auftaucht, und seine Eigenheiten erklären, warum dieselbe Datei als Ladesymbol winzig und gestochen scharf ist, als Urlaubsfoto aber fleckig und mehrere Megabyte schwer.

Was ist ein GIF Bild: Animationsframes in Endlosschleife und begrenzte Farbpalette mit wenigen Farbfeldern

Woraus ein GIF-Bild besteht

Ausgeschrieben heißt GIF Graphics Interchange Format. Der Kern ist eine Farbtabelle mit höchstens 256 Einträgen. Jedes Pixel speichert keine eigene Farbe, sondern nur die Nummer eines Eintrags in dieser Tabelle, also eine Zahl von 0 bis 255. Ein Einzelbild mit 480 × 270 Pixeln hat 129.600 solcher Nummern, roh also knapp 130 KB. Danach fasst das Packverfahren LZW wiederkehrende Folgen zusammen. Eine Grafik mit großen einfarbigen Flächen schrumpft dabei kräftig, ein Foto mit Rauschen in jeder Zeile kaum.

Wichtig für die Praxis: Innerhalb der Tabelle arbeitet GIF verlustfrei. Ein Logo mit zwölf Farben kommt Pixel für Pixel so wieder heraus, wie du es gespeichert hast. Verloren geht nur, was gar nicht erst in die Tabelle passt. Ein Sonnenuntergang enthält schnell zehntausende verschiedene Orangetöne, und beim Speichern als GIF muss das Programm sie auf 256 Vertreter verteilen. Entweder siehst du dann harte Stufen im Himmel oder ein feines Punktmuster, mit dem das Programm die fehlenden Zwischentöne vortäuscht.

Wie aus Einzelbildern eine Schleife wird

Ein animiertes GIF ist ein Stapel solcher Einzelbilder. Zu jedem steht in der Datei, wie lange es stehen bleibt, gemessen in Hundertstelsekunden, und ein Zusatzblock legt fest, wie oft die Folge wiederholt wird, meist endlos. Ein Abspielprogramm braucht der Browser dafür nicht, er spielt die Folge ab, sobald die Datei geladen ist.

Rechne deinen Hundeclip einmal durch: drei Sekunden mit zehn Bildern pro Sekunde ergeben 30 Einzelbilder. Bei 480 × 270 Pixeln sind das 30 × 129.600 = 3.888.000 Farbnummern, roh also knapp 3,9 MB. Weil sich zwischen zwei Bildern oft nur ein Teil ändert, darf ein Einzelbild auch nur den geänderten Ausschnitt enthalten, und LZW packt den Rest. Trotzdem bleibt ein gefilmtes Motiv selten unter einem Megabyte. Dieselben drei Sekunden als kurzes MP4-Video wären meist nur ein Bruchteil davon, weil Videoformate Bewegung zwischen den Bildern viel geschickter speichern.

Durchsichtig, aber ohne Zwischenstufen

Eine GIF-Datei kann genau einen Eintrag ihrer Farbtabelle als durchsichtig markieren. Ein Pixel ist damit ganz da oder ganz weg. Das reicht für ein Symbol mit geraden Kanten. Bei einem runden, geglätteten Logo fällt es auf: Die Kantenpixel wurden im Grafikprogramm mit dem Hintergrund gemischt, auf dem du es gezeichnet hast. Legst du das Logo, das auf Weiß entstanden ist, auf eine dunkle Seite, umgibt es ein heller Saum. Abhilfe schafft nur, das GIF gleich vor der passenden Hintergrundfarbe zu speichern oder für weiche Kanten PNG zu nehmen.

Welches Format für welches Motiv

In einer selbst betriebenen Galerie entscheidest du bei jedem Bild neu. Die Tabelle ordnet typische Motive dem Format zu, mit dem sie am kleinsten und am saubersten ankommen.

MotivPassendes FormatWarum
Foto vom Handy oder der KameraJPEGMillionen Farben, Dateigröße über die Qualität steuerbar
Bildschirmfoto mit SchriftPNGBuchstaben bleiben scharf, keine Farbgrenze
Logo mit weichen Kanten vor wechselndem GrundPNGstufenlose Durchsichtigkeit an der Kante
kleine Schleife mit wenigen FarbenGIFläuft überall ohne Abspielprogramm, bleibt klein
gefilmte Szene über mehrere SekundenVideo, nicht in der Galerieals GIF schnell mehrere MB und fleckig

Die Faustregel daraus: Ein GIF lohnt sich, wenn das Motiv sich bewegt und mit wenigen Farben auskommt. Statt eines stehenden GIF-Bildes ist PNG fast immer die bessere Wahl, denn es speichert dieselbe Grafik verlustfrei, ohne Farbgrenze und oft sogar kleiner.

Typische Fehler und woran du sie erkennst

Die meisten Probleme mit GIF zeigen sich schon im Browser, bevor ein Besucher etwas sagt. Diese vier begegnen Galeriebetreibern am häufigsten.

  • Foto als GIF gespeichert: Himmel und Hauttöne zeigen Stufen oder ein grieseliges Punktmuster. Speichere das Original noch einmal als JPEG.
  • Schleife mit mehreren Megabyte: Auf dem Handy erscheint das Bild erst nach Sekunden. Kürze die Folge, halbiere die Bildrate oder verkleinere die Fläche auf das, was sich bewegt.
  • Heller Rand um das Logo: Die Kanten wurden vor Weiß geglättet. Neu speichern vor der Farbe deiner Seite oder PNG verwenden.
  • Animation steht in der Übersicht still: Das ist bei der Galerie gewollt und kein Fehler der Datei. Warum, steht im nächsten Abschnitt.

Was das Bildergalerie-Script mit GIF-Bildern macht

Das Bildergalerie-Script nimmt drei Formate an: JPEG, PNG und GIF. Ob eine Datei wirklich ein GIF ist, erkennt die Galerie am Inhalt, nicht an der Endung. Heißt eine Datei logo.png, enthält aber GIF-Daten, wird sie als logo.gif gespeichert. Voraussetzung ist, dass die PHP-Erweiterung GD auf dem Server GIF verarbeiten kann. Fehlt nur diese Unterstützung, meldet der Installer beim Punkt „Bildbearbeitung GD mit JPEG, PNG und GIF“ „es fehlt: …“. Installieren lässt sich die Galerie dann trotzdem, GIF-Dateien nimmt sie aber nicht an. Beim Hochladen erscheint stattdessen „„…“ ist ein GIF-Bild. Dieses Format ist auf diesem Server nicht freigegeben“, und du bittest deinen Webhoster, GD vollständig zu aktivieren.

Aus jedem Bild erzeugt die Galerie ein Vorschaubild in bilder/tn/, etwa bilder/tn/tn3_ladesymbol.gif. Das Format bleibt dabei erhalten: Aus einem GIF wird wieder ein GIF mit höchstens 256 Farben, eine Qualitätsstufe wie bei JPEG gibt es dafür nicht. Hat das GIF eine durchsichtige Farbe, bleibt sie auch im verkleinerten Bild durchsichtig. Bei Animationen gilt eine Grenze, die du kennen solltest: Die Bildbearbeitung GD liest nur das erste Einzelbild. Den Weg einer animierten Datei durch die Galerie zeigt das Diagramm.

Animiertes Ablaufdiagramm: GD liest aus einem animierten GIF nur Einzelbild 1 für das stehende Vorschaubild; bis 1024 Pixel und bei Vergrößern = Nein zeigt die Lightbox das laufende Original, sonst eine stehende Kopie ob_ aus Einzelbild 1
Nur das unveränderte Original bewegt sich: Vorschaubild und Kopie ob_ entstehen beide aus Einzelbild 1.

Ob in der großen Ansicht die Animation läuft, hängt also davon ab, ob die Galerie eine Kopie anlegt. Die Regeln dafür stehen unter „Einstellungen“ im Abschnitt „Große Ansicht (Lightbox)“: „Maximale Breite der großen Ansicht“ und „Maximale Höhe der großen Ansicht“ haben den Standardwert 1024 Pixel, „Kleine Bilder vergrößern“ steht auf „Nein“. Ist das GIF größer als dieser Rahmen oder steht das Vergrößern auf „Ja“, schreibt die Galerie eine Kopie, und die steht still wie das Vorschaubild.

Beispiel-GIFVorschaubildGroße Ansicht (Standardwerte)
480 × 270 Pixel, animiertauf 200 Pixel Breite verkleinert, steht stillzeigt das Original, die Animation läuft
1920 × 1080 Pixel, animiertauf 200 Pixel Breite verkleinert, steht stillKopie ob_3_…gif mit 1024 × 576 Pixeln, steht still

Daraus ergeben sich drei Regeln, wenn du eine bewegte Grafik in der Galerie zeigen willst:

  • Größe begrenzen: Halte die Animation bei höchstens 1024 Pixel Kantenlänge und lass „Kleine Bilder vergrößern“ auf „Nein“. Dann bekommt die Lightbox das unveränderte Original. Setzt du beide Höchstmaße auf 0, zeigt die große Ansicht immer das Original, auch bei sehr großen Dateien.
  • Erstes Bild wählen: Da das Vorschaubild immer das erste Einzelbild zeigt, lass die Schleife mit einem aussagekräftigen Bild beginnen statt mit einem schwarzen Übergang.
  • Kein WebP als Ausweg: Animiertes WebP wäre kleiner, die Galerie lehnt solche Dateien aber mit „„…“ ist ein WebP-Bild und wurde nicht hochgeladen“ ab.

Wer ausprobieren möchte, wie seine animierten GIFs in Vorschau und großer Ansicht wirken, kann das Bildergalerie-Script kostenlos herunterladen und auf dem eigenen Webspace testen.

Häufige Fragen

Beim Thema GIF geht es fast immer um Farben, Animation und die Frage nach einer besseren Alternative, hier die kurzen Antworten.

Warum sehen Fotos als GIF schlecht aus?

Weil die Farbtabelle nach 256 Einträgen voll ist. Ein Foto bringt oft zehntausende Farbtöne mit, die das Programm auf diese 256 zusammenlegen muss. Das Ergebnis sind Stufen in Verläufen oder ein sichtbares Punktmuster. Für Fotos bleibt JPEG die richtige Wahl.

Was ist heute besser als ein GIF für Animationen?

Für gefilmte Szenen ein kurzes MP4-Video, für Bildschleifen mit vielen Farben animiertes WebP. Beide sind bei gleicher Länge deutlich kleiner. Auf einer eigenen Seite kannst du sie einbinden, in die Galerie selbst lädst du aber nur JPEG, PNG und GIF hoch.

Kann ein GIF transparent sein?

Ja, mit genau einer durchsichtigen Farbe. Halbdurchsichtige Kanten kennt das Format nicht, deshalb zeigt ein geglättetes Logo vor einem anderen Hintergrund oft einen hellen oder dunklen Saum.

Warum bewegt sich mein GIF in der Galerie nicht?

Das Vorschaubild zeigt bei einem animierten GIF immer nur das erste Einzelbild. In der großen Ansicht läuft die Animation nur, wenn das GIF nicht größer als die eingestellten Maße der großen Ansicht ist (Standard 1024 × 1024 Pixel) und „Kleine Bilder vergrößern“ auf „Nein“ steht. Ist es größer, zeigt die Lightbox eine verkleinerte, stehende Kopie.

Verwandte Themen

Wer GIF einordnet, vergleicht es schnell mit den anderen Web-Formaten, diese Beiträge liefern den direkten Gegenpart.