In Verbindung mit einem aktuellen Projekt habe ich eine kleine aber doch hilfreiche Idee entwickelt, die es mir als Webdesigner möglich macht Videos oder Bilder mit „schlechter“ Qualität und geringer Dateigröße in den Hintergrund einer Website einzubinden. Diese Erkenntnis würde ich gerne weitergeben und hoffe dem einen oder anderen hilft es vielleicht :).
Immer häufiger tauchen im Web Fullscreen-Layouts auf, entweder mit einem Video oder Bildern im Hintergrund. Diese Websites sind meistens nicht gerade performant und schnell, was auf der einen Seite verständlich ist wegen großen Dateigrößen, aber auch auf der anderen Seite nicht schön für die Besucher der Website ist. Mit diesem Problem habe ich mich ein Mal auseinandergesetzt und eine Möglichkeit gefunden das ein bisschen zu optimieren.
Mit einem Raster, welches man über das besagte Video oder Foto legt, kann man diese Medien in recht schlechter Qualität speichern, aber trotzdem noch gut für eine Website verwenden. Gerade bei Videos oder Fotos mit Graustufen kann man den Effekt sehr gut erkennen.
Im Folgenden seht ihr erst mal zwei Screenshots, die den Unterschied zwischen einem Bild mit schlechter Qualität ohne Raster und das Gegenteil in genauso schlechter Qualität mit Raster darstellen.
Ich habe zudem noch drei weitere Bilder vorbereitet, die drei verschiedene Rasterarten darstellen. Diese benutze ich. Natürlich könnte man da noch Hunderte weitere Varianten bauen, aber bisher bin ich immer mit drei Stück vollkommen ausgekommen. Je nach Bild und Motiv wähle ich dazwischen.
Das Raster erstelle ich immer auf einer Fläche von 3x3 Pixel. Das speichere ich dann als .png-Format und lege es in CSS über die komplette Fläche.
Wie schon erwähnt, wähle ich das Raster je nach Motiv, Farbe und Qualität aus. Zudem variiere ich die Deckkraft der Raster, um die optimale Qualität der Videos und Fotos anhand der Raster rauszuholen.
In dem ersten Beispiel habe die dritte Variante verwendet mit einer Deckkraft von 30%.
Okay, dann wünsche ich viel Spaß beim Rumprobieren ;).