Layout, Webdesign & Gestaltung

Große Hintergrundbilder serverseitig skalieren




Große Hintergrundbilder
Große und bestenfalls den Bildschirm ausfüllende Hintergrundbilder bieten Website-Betreibern einen Vorteil: Sie wirken professionell und eindrucksvoll. Doch bei dieser Idee gibt es einen Haken: Um tatsächlich bildschirmfüllende Grafiken zu benutzen, müssen die Bilder meist in einer Auflösung von mindestens 1920px Breite vorliegen. Bilder in dieser Größe haben nicht selten mehrere MBit Dateigröße.

Für den Fall, dass der Besucher mit einem hochauflösenden Retina-Bildschirm auf Ihre Seite geht, muss die Datei in entsprechender Größer vorliegen - Doch was ist, wenn der Benutzer nur einen kleineren Bildschirm, einen Laptop oder gar ein Tablet-PC oder Smartphone hat?

Die Originaldatei wird auf jeden Fall in voller Größe geladen. Das ist gerade bei langsamen Internetverbindungen oder im mobilen Netz eine wahre Zumutung für den Nutzer. So wird die Internetverbindung mit unglaublich großen Datenpaketen beansprucht, die Seite lädt langsam und letztendlich muss der Browser die geladene Datei doch wieder nur an die aktuelle Browsergröße des benutzten Mediums anpassen.

Angepasste Hintergrundbilder durch Adaptive Images


Diesem Problem kann man jedoch begegnen, indem man den Ansatz der "Adaptive Images" nutzt. Das "Adaptive Images"-Skript, was ohne Probleme auf jedem Webserver installiert werden kann, stellt serverseitig eine Art Bilder-Cache zur Verfügung.

Sobald die Besucher auf die Seite zugreifen, wird ein Cookie gesetzt und übertragen, welches die maximale Browsergröße beinhaltet. Werden nun im zweiten Schritt die Bilder vom Server angefordert, wird die Anfrage auf ein Skript umgeleitet, welches diese Daten ausliest und die Bilder auf die maximale vom Nutzer benötigte Größe skaliert. Damit die Skalierung nicht jedes mal neu ausgeführt werden muss, werden die Bilder am Server zwischengespeichert, sodass beim erneuten Aufruf mit dieser Browsergröße die Bilder direkt ausgeliefert werden können.

Mit den Adaptive Images können Sie die Ladezeiten für Ihre Website auf das Mindestmaß reduzieren und eine fehlerfreie Anzeige dennoch garantieren.



Über den Artikel

Beitrag veröffentlicht am von Daniel Kemen, in den Kategorien:


(281 Wörter, 2114 Buchstaben)



Über den Autor


Software-Design Autor

Mein Name ist Daniel Kemen und ich bin IT-Berater und Entwickler bei der SD Software-Design GmbH. Ich schreibe im IT-Blog über interessante Themen rund um Technologien, Entwicklungen und IT-News. Zudem bearbeite ich als zertifizierter Google Partner für AdWords und Analytics viele Themen zum Thema Onlinemarketing, AdWords und Suchmaschinenoptimierung.



Teilen & Verlinken

Verlinken Sie auf diesen Artikel:

Share on...
| |



Wir auf Facebook
Wir auf Twitter
  Wir auf Google+




  Sie wollen diesen Artikel in Ihrem eigenen Blog zitieren? Kein Problem!


Bitte verwenden Sie dazu <cite> oder <blockquote> Tags um den zitierten Text und setzen Sie einen Verweis auf diesen Artikel: