Anzeige
Anzeige
News
Artikel merken

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.

Von Ilja Zaglov
2 Min. Lesezeit
Anzeige
Anzeige

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?

Anzeige
Anzeige

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.

Anzeige
Anzeige
.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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
.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.

Mehr zu diesem Thema
GIF
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
33 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Andreas Kempe

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!

Antworten
Lars M

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

Antworten
marc.tissler

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.

Antworten
Ralle

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

Antworten
Aechtler

was für ein Mist!

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige