Sie benötigen weitere Informationen zu einer bestimmten Leistung?
Sie haben eine konkrete Projektanfrage oder möchten einen Gesprächstermin vereinbaren?
Dann sind Sie hier genau richtig. Schreiben Sie uns ein paar Zeilen und wir melden uns schnellstmöglich bei Ihnen.
Ja, ich habe die Datenschutzerklärung zur Kenntnis genommen und bin damit einverstanden, dass die von mir angegebenen Daten elektronisch erhoben und gespeichert werden. Meine Daten werden dabei nur streng zweckgebunden zur Bearbeitung und Beantwortung meiner Anfrage benutzt.
Mit dem Absenden des Kontaktformulars erkläre ich mich mit der Verarbeitung einverstanden.
Bilder sind aus Webseiten nicht mehr wegzudenken. Sie veranschaulichen Inhalte, laden zum Weiterlesen ein oder helfen in Form von Icons bei der Bedienung der Webseite.
Jedoch machen Bilder auf vielen modernen Webseiten einen Großteil der Datenmenge aus. Auf der Startseite von wiro-consultants.com sind es beispielsweise 80%, bei lediglich 20% der übertragenen Daten handelt es sich also um Textinhalte und Programmcode (HTML, CSS und JavaScript). Dies wird insbesondere dann zum Problem, wenn der Nutzer die Website auf einem Smartphone in einem langsamen mobilen Netz öffnet. In Extremfällen kann sich der Aufbau einer einzigen Seite über Minuten hinziehen, wozu kaum ein Nutzer die Geduld aufbringt. Auch Suchmaschinen tolerieren besonders große Webseiten nicht und werten sie in ihren Suchergebnissen ab (siehe Web Performance Optimization).
Hingegen erwarten Nutzer mit besonders hoch aufgelösten High-DPI-Bildschirmen (z. B. iPad mit Retina-Display) auch besonders hoch aufgelöste Grafiken, die normalerweise nicht ausgeliefert werden. Bilder sollen also einerseits möglichst hoch aufgelöst sein, andererseits aber eine geringe Dateigröße aufweisen und schnell laden.
Dieses Dilemma lässt sich mit verschiedenen Technologien lösen, die WiRo Consultants bereits mehrfach erfolgreich eingesetzt haben. Da jede Technologie ihre Vor- und Nachteile mitbringt, wägen wir bei der Umsetzung ab, welche Methode sich am besten für den konkreten Fall eignet.
Normale Bilddateien im PNG-, JPEG- oder GIF-Dateiformat basieren auf einem Pixelraster. Jeder Pixel in diesem Raster hat eine definierte Farbe, wodurch letztendlich das Bild entsteht. Während diese Art der Speicherung bei Fotos oder aufwändig erstellten Grafiken Sinn ergibt, bietet sich für einfachere Grafiken die Speicherung in einem Vektorformat (z. B. SVG) an.
Hierbei werden die Bildinformationen nicht in Form eines Pixelrasters, sondern mithilfe von Vektoren gespeichert (z. B. die Richtung und Länge einer Linie). Dies führt dazu, dass sich eine Vektorgrafik ohne Qualitätsverlust beliebig vergrößern und verkleinern lässt. In den meisten Fällen reicht also eine Datei aus, um alle Darstellungsgrößen abzudecken, während bei Rasterbildern separate Dateien erzeugt werden müssen. Hinzu kommt, dass SVG-Grafiken – insbesondere im Vergleich zu Rastergrafiken in hohen Auflösungen – eine geringere Dateigröße haben, also auch deutlich schneller geladen werden.
Vektorgrafiken bieten sich insbesondere für ein- oder mehrfarbige Icons, aber auch für dynamisch erstellte Grafiken an. Für die Erstellung von dynamischen Grafiken kann auf verschiedene JavaScript-Bibliotheken zurückgegriffen werden, um beispielsweise Tortendiagramme aus Eingaben des Benutzers zu generieren.
Die sogenannten Icon-Fonts sind eine Sonderform von Vektorgrafiken. Während Fonts im Normalfall dazu verwendet werden, mehrere Schriftzeichen zu einem Zeichensatz zu bündeln, werden bei Icon-Fonts Icons anstelle der Schriftzeichen gebündelt. Dies hat den Vorteil, dass mehrere Icons in einer Abfrage vom Server heruntergeladen werden können, was deutlich schneller geht, als jedes Icon separat herunterzuladen. Außerdem ist die Unterstützung bei Webbrowsern größer als für reine SVG-Grafiken, wodurch sie eine gute Übergangstechnologie darstellen, bis ältere Webbrowser nicht mehr relevant sind.
Je nach Website kann entweder eine bereits fertige Icon-Font oder eine selbst erstellte eingebunden und verwendet werden. Dank verschiedener Web-Tools zum Erstellen und Bearbeiten von Icon-Fonts sind auch Kombinationen mehrerer Fonts möglich.
Wenn Vektorgrafiken nicht infrage kommen, wie zum Beispiel bei Fotos oder Screenshots, gibt es weitere Möglichkeiten, die Dateigröße zu optimieren. Die Möglichkeiten sind hierbei je nach Bildformat (PNG, JPEG oder GIF) verschieden.
PNG-Dateien lassen sich hinsichtlich der Anzahl an verfügbaren Farben und ihrer Transparenz-Eigenschaften optimieren. Außerdem können für die Darstellung überflüssige Meta-Informationen aus den Bilddateien entfernt werden, was wiederum die Dateigröße reduziert. Durch diese Optimierungen lässt sich häufig zwischen 60% und 80% der Dateigröße einsparen.
Bei JPEG-Dateien kann durch eine stärkere, allerdings auch verlustbehaftete Komprimierung ein Kompromiss aus Bildqualität und Dateigröße erreicht werden, welcher je nach Bild anders ausfällt. Auch hier lassen sich Meta-Informationen entfernen, um zusätzlich Dateigröße zu reduzieren.
Je nach Anwendungsfall kann es auch Sinn machen, mehrere Bilder zusammenzufassen. Vom Hintergedanken verhalten sich die sogenannten Image-Sprites also ähnlich wie die oben erläuterten Icon-Fonts, allerdings werden hier mehrere Bilder in einer Bilddatei zusammengefasst. Anschließend lässt sich dieses zusammengefasste Bild so positionieren, dass nur das gewünschte Einzelbild angezeigt wird. Wie bei Icon-Fonts ist der Zweck hiervon, dass nur eine Datei vom Server zum Webbrowser des Nutzers übertragen werden muss, was die Geschwindigkeit der Website verbessert.
Nicht alle Bilder, die beim Aufruf einer Webseite sichtbar sind, dienen der unmittelbaren Vermittlung des Inhalts der Seite. Es gibt auch Bilder, die lediglich zu Designzwecken dargestellt werden. Diese Bilder werden üblicherweise über das CSS-Stylesheet der Seite eingebunden.
Um sowohl hochaufgelöste Displays als auch kleine Geräte optimal zu unterstützen, kann auf sogenannte Media Queries zurückgegriffen werden. Mit ihnen lässt sich definieren, bei welcher Displaygröße welches Bild verwendet werden soll. Außerdem lassen sich hierüber bestimmte Bilder auf mobilen Geräten ausblenden, zum Beispiel weil die dahinter liegende Funktionalität dort nicht vorhanden ist.
Auch ein hochaufgelöstes Display, wie zum Beispiel ein iPad mit Retina-Display, lässt sich über Media Queries ansprechen. So können nur für diese Displays höher aufgelöste Bilder bereitgestellt werden, während alle anderen Displays Bilder in geringerer Auflösung erhalten.
Um diese Funktionalität auch für Inhaltsbilder zu ermöglichen, kann auf Responsive Images zurückgegriffen werden:
Der Begriff "Responsive Images" bezeichnet eine Reihe von Techniken, die dazu dienen, je nach Bildschirmgröße unterschiedliche Bilddateien auszuliefern. Grundlage von Responsive Images ist, dass der Browser nicht nur ein Bild, sondern mehrere Varianten und Größen des Bildes erhält. Gleichzeitig wird für jede Variante definiert, unter welchen Bedingungen (Bildschirmgröße, Pixeldichte etc.) sie verwendet werden soll.
Das von WiRo Consultants eingesetzte Content Management System TYPO3 bringt die grundlegende Unterstützung für Responsive Images bereits mit. Nach einer anfänglichen Konfiguration geschieht die Erstellung der verschiedenen Bildgrößen automatisch. Durch Responsive Images entsteht also kein zusätzlicher Aufwand für die Redakteure.
Die Umsetzung von Responsive Images führt letztendlich auf allen Geräten – von Smartphones über Tablets bis hin zu Desktop-PCs – zu einer optimalen Darstellung bei gleichzeitig akzeptabler Dateigröße. Somit stellen Responsive Images einen guten Kompromiss zwischen Wartezeit und Darstellungsqualität für den Nutzer dar und sind ein elementarer Teil des Responsive Webdesign.
