Drücke die Tasten ◄ ► für weitere Artikel  

Animierte GIFs statt Hintergrundvideos – warum eigentlich nicht?

Videohintergründe bei Webseiten sind Alltag. Hohe Bandbreiten und Browserunterstützung von diversen Videoformaten sei Dank. Vor kurzem haben wir euch einige Webseiten mit Vollbild-Videohintergründen vorgestellt – doch Videos sind nicht alles: Ein viel älteres Element des Webs, das ebenfalls Bewegtbilder bietet, kann ähnlich beeindruckende Ergebnisse liefern: das GIF.

Animierte GIFs statt Hintergrundvideos – warum eigentlich nicht?
gif_css_filter
Webseite mit animiertem GIF im Hintergrund.

Man muss nur selten die volle Detailtiefe eines Videos ausnutzen und Ton auf Webseiten ist auch in den seltensten Fällen erwünscht. Warum also nicht zu einem GIF greifen, um die Hintergründe der Webseite interessanter zu machen?

In Sachen Größe hat ein GIF beim Einsatz als Hintergrundvideo in der Regel einen Vorteil. Das Konvertieren in andere Videoformate (nicht alle Browser unterstützen die gleichen Formate) fällt weg. Wer nicht zu viel komprimieren will, wird bei einem Video-Clip deutlich größere Dateien produzieren müssen. Und in den meisten Fällen werden sowieso kleine Videos eingesetzt und mit Overlays maskiert um den Qualitätsverlust zu kaschieren. Warum also nicht ein GIF verwenden?

GIFs als Vollbild Webseiten-Hintergrund

Das Einbinden eines GIFs als Hintergrundbild ist einfach. Die schwache Qualität des Bildes zu kaschieren, erweist sich als etwas komplizierter. Die einzige Möglichkeit, relativ kleine Dateigrößen bei vorgetäuscht hoher Qualität zu gewährleisten ist, den Hintergrund zu verwischen.

.datGif {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://stream1.gifsoup.com/view/609536/beach-waves-o.gif);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-filter: blur(2px) grayscale(0.8) brightness(0.8);
}

Das Ergebnis dürfte weder optisch, noch technisch überzeugen. Zwar haben wir dezente Bewegtbilder im Hintergrund, die aber dürften selbst bei bester Hardware nur ruckelnd daherkommen und die CPU-Auslastung in unvertretbare Bereiche katapultieren. Das Problem: Der momentan nur von Webkit unterstützte Blur-Filter steckt noch in den Kinderschuhen und verliert, je größer die Anwendungsfläche wird, sehr viel Leistung. Ein Problem, das sich mit einem kleinen Trick umschiffen lässt.

Setzt man Webkit eine kleine Fläche zum Weichzeichnen vor und vergrößert diese anschließend, läuft das GIF ruckelfrei und dank GPU-Beschleunigung beim Hochskalieren, ohne die CPU voll für sich einzunehmen, durch.

.datGif {
position: absolute;
top: 0;
left: 0;
width: 20%;
height: 20%;
background-image: url(http://stream1.gifsoup.com/view/609536/beach-waves-o.gif);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-filter: blur(2px) grayscale(0.4) brightness(0.6);
-webkit-transform-origin: top left;
-webkit-transform: scale(5);
}

Es bleibt also nur, ein weiteres Overlay über das DIV zu legen, um zumindest das Absoften des Hintergrunds zu ermöglichen:

.no-filter-overlay {
position:absolute;
background-color:rgba(255,255,255,0.5);
top:0px;
left:0px;
width:100%;
height:100%;
}

Dass das Ganze dann auch noch gut aussehen kann, zeigt Glen Maden anhand einer Präsentation.

Weiterführende Links

52 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
34 Antworten
  1. von James Tiberius Curk via facebook am 10.07.2013 (08:38Uhr)

    Oh nein, man soll doch bitte das GIF dort lassen, wo es hingehört, im Datennirvana!

  2. von James Tiberius Curk via facebook am 10.07.2013 (08:38Uhr)

    Oh nein, man soll doch bitte das GIF dort lassen, wo es hingehört, im Datennirvana!

  3. von Jens Hille via facebook am 10.07.2013 (08:43Uhr)

    also bei cinemagraphie ist das gif-format wieder im kommen...

  4. von Daniel Vogt via facebook am 10.07.2013 (08:45Uhr)

    Läuft nicht flüssig ... So einen Quatsch sollte man auf keinen Fall auf professionellen Websites einbauen.

  5. von Daniel Vogt via facebook am 10.07.2013 (08:45Uhr)

    Läuft nicht flüssig ... So einen Quatsch sollte man auf keinen Fall auf professionellen Websites einbauen.

  6. von San Kukai via facebook am 10.07.2013 (08:47Uhr)

    gehört GIF immer noch Compuserve?

  7. von San Kukai via facebook am 10.07.2013 (08:47Uhr)

    gehört GIF immer noch Compuserve?

  8. von James Tiberius Curk via facebook am 10.07.2013 (08:54Uhr)

    Jens, das mag sein, ist auch Kunst, dort ist alles erlaubt, im professionellen Webdesign hat sowas aber tatsächlich GAR NIX mehr zu suchen!

  9. von James Tiberius Curk via facebook am 10.07.2013 (08:54Uhr)

    Jens, das mag sein, ist auch Kunst, dort ist alles erlaubt, im professionellen Webdesign hat sowas aber tatsächlich GAR NIX mehr zu suchen!

  10. von Andreas Kempe am 10.07.2013 (08:57Uhr)

    Man sollte gifs, wie schon erwähnt, da lassen wo sie schon seit jahren liegen und nicht wieder für solch einen schwachsinn ausgraben.

    es ruckelt, es belastet den browser sinnlos und es ist genau wie videos als hintergrund: UNNÖTIG! ne webseite sollte informativ, übersichtlich und im besten fall noch schlicht sein, ein video, respektive ein gif bild, fördert sowas in keiner weise!

    Und mit Verlaub: es sieht sehr besch...eiden aus... dann lieber ein HQ Bild gestochen scharf als son verpixeltes gif, nur damit auf der seite noch nen unnötiges wackelelement dargestellt wird!

  11. von Stefan Waidele via facebook am 10.07.2013 (08:58Uhr)

    Ob "Video im Hintergrund" so ein toller Trend ist bezweifle ich. Allerdings zeigt Google+ mit den Highlight-Effekten bei den vorgegebenen Profilbannern, dass eine dezente Animation oft eine aufwändige Slideshow ersetzen kann

  12. von Stefan Waidele via facebook am 10.07.2013 (08:58Uhr)

    Ob "Video im Hintergrund" so ein toller Trend ist bezweifle ich. Allerdings zeigt Google+ mit den Highlight-Effekten bei den vorgegebenen Profilbannern, dass eine dezente Animation oft eine aufwändige Slideshow ersetzen kann

  13. von Lin Kurzweg via facebook am 10.07.2013 (09:06Uhr)

    "Dass das Ganze dann auch noch gut aussehen kann, zeigt Glen Maden anhand einer Präsentation" - Was sieht denn daran bitte gut aus? Selten sowas überflüssiges und unschönes gesehen....

  14. von Lin Kurzweg via facebook am 10.07.2013 (09:06Uhr)

    "Dass das Ganze dann auch noch gut aussehen kann, zeigt Glen Maden anhand einer Präsentation" - Was sieht denn daran bitte gut aus? Selten sowas überflüssiges und unschönes gesehen....

  15. von Philipp M. W. Hoffmann via facebook am 10.07.2013 (09:08Uhr)

    Ruckelt und der CPU läuft auf Anschlag (MBP2009, zugegeben). Andererseits: so ein Strand im Hintergrund hat was beruhigendes, also ein cooles Element! Sollte man weiterverfolgen.

  16. von Philipp M. W. Hoffmann via facebook am 10.07.2013 (09:08Uhr)

    Ruckelt und der CPU läuft auf Anschlag (MBP2009, zugegeben). Andererseits: so ein Strand im Hintergrund hat was beruhigendes, also ein cooles Element! Sollte man weiterverfolgen.

  17. von Lars M am 10.07.2013 (09:19Uhr)

    Bandbreitentechnisch dürfte das Ganze erst wieder ab 2016 interessant werden.

  18. von André van Linn via facebook am 10.07.2013 (09:37Uhr)

    WTF ... das soll "gut" aussehen? Habt Ihr wieder mit Eurer Zeitmaschine rumgespielt?

  19. von André van Linn via facebook am 10.07.2013 (09:37Uhr)

    WTF ... das soll "gut" aussehen? Habt Ihr wieder mit Eurer Zeitmaschine rumgespielt?

  20. von marc.tissler am 10.07.2013 (10:32Uhr)

    Boah was ist das? Keines unserer Arbeitsmaschienen hier bekommt das wirklich flüssig hin. Die qualität durch einen Blur filter kascheiren? Wieso nicht einfach das Bild einmal vorgerendert bluren? ist doch schwachsinn das jedes mal neu zu machen wenn es immer gleich aussehen soll....

    Zudem ist der Sinn, wie schon oft erwähnt, zweifelhaft. Wenn man schon Animierten Hintergrund braucht kann man genauso gut sprites und JS verwenden, das dürfte wesentlich bessere Qualität geben und zudem eine bessere Kontrolle.

  21. von Feyzi Visions via facebook am 10.07.2013 (12:09Uhr)

    Auch die "FAST" Version verbraucht viel zu viel CPU. 20 % ist zuviel für nur im Internet eine Webseite ansurfen.

  22. von Feyzi Visions via facebook am 10.07.2013 (12:09Uhr)

    Auch die "FAST" Version verbraucht viel zu viel CPU. 20 % ist zuviel für nur im Internet eine Webseite ansurfen.

  23. von Sven Nnamsie via facebook am 10.07.2013 (13:00Uhr)

    sieht bescheiden aus und lenkt nur ab

  24. von Sven Nnamsie via facebook am 10.07.2013 (13:00Uhr)

    sieht bescheiden aus und lenkt nur ab

  25. von Marc Naumann via facebook am 10.07.2013 (14:18Uhr)

    nettes gimmick, nicht mehr :(

  26. von Marc Naumann via facebook am 10.07.2013 (14:18Uhr)

    nettes gimmick, nicht mehr :(

  27. von Claudio Panessa via facebook am 10.07.2013 (15:19Uhr)

    zZzzZzzZzzz

  28. von Claudio Panessa via facebook am 10.07.2013 (15:19Uhr)

    zZzzZzzZzzz

  29. von Sunny Oliver am 10.07.2013 (15:22Uhr)

    Bei mir wird's erst gar nicht angezeigt. Komisch eigentlich, wenn's sich nur um eine Gif-Datei handelt.

  30. von Ralle am 10.07.2013 (15:46Uhr)

    Pixelige, schlecht loopende Gifs im Hintergrund, das ist die Zukunft
    Was kommt als nächstes, "Der Tag ist zurück"?

  31. von Aechtler am 10.07.2013 (21:28Uhr)

    was für ein Mist!

  32. von Kai Stampe via facebook am 11.07.2013 (01:18Uhr)

    Naja dann lieber Flash ... das ist ja mehr als langsam ... solche Seiten verlasse ich im "Normaluser" Modus nach wenigen Sekunden, wenn ich nicht weiß, dass sich da wirklich interessante Informationen hinter verbergen und selbst dafür gäbe es zu viele Alternativen

  33. von web frontend | Annotary am 13.07.2013 (10:20Uhr)

    [...] from Patrick Kohan: android system general programming linux misc Sort Share t3n.de       2 minutes [...]

  34. von Die 10 beliebtesten Artikel der Woche: S… am 14.07.2013 (19:27Uhr)

    [...] Unser Artikel: Animierte GIFs statt Hintergrundvideos – warum eigentlich nicht? [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema
Die Geschichte des GIF – erzählt in GIFs auf Tumblr
Die Geschichte des GIF – erzählt in GIFs auf Tumblr

Ihr kennt nicht die Geschichte der GIFs? Macht nichts! In diesem Linktipp bekommt ihr sie auf eine etwas andere Art erzählt. » weiterlesen

Animierte GIFs auf Facebook posten? Kein Problem mit Giphy
Animierte GIFs auf Facebook posten? Kein Problem mit Giphy

Facebook unterstützt die Einbettung von animierten GIFs nicht – die Plattform Giphy aber hilft mit einem Trick. Wir sagen euch, wie das geht. » weiterlesen

Die 10 beliebtesten Artikel der Woche: So löscht du Facebook, iOS 7 Beta 3 und Galaxy S4 mini im Test
Die 10 beliebtesten Artikel der Woche: So löscht du Facebook, iOS 7 Beta 3 und Galaxy S4 mini im Test

Eine Woche mit vielen kleinen Neuerungen neigt sich dem Ende zu, weshalb wir erneut die beliebtesten Artikel der vergangenen Tage in einem Artikel zusammenfassen: Heute unter anderem mit einer... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen