Responsive Bilder

Ein Bild sagt mehr als 1.000 Wörter und Bilder spielen auf jeder Seite eine wichtige Rolle. Aber sie machen auch oft den Großteil der heruntergeladenen Byte aus. Mit responsivem Webdesign können sich unsere Layouts nicht nur basierend auf den Geräteeigenschaften, sondern auch den Bildern ändern.

Responsives Webdesign bedeutet, dass sich unsere Layouts nicht nur je nach Geräteeigenschaften ändern, sondern auch die Inhalte ändern können. Auf hochauflösenden Bildschirmen (2x) sorgen hochauflösende Grafiken beispielsweise für Schärfe. Ein Bild mit einer Breite von 50% funktioniert möglicherweise gut, wenn der Browser 800 Pixel breit ist, aber auf einem schmalen Smartphone viel Platz einnimmt und bei der Verkleinerung auf einen kleineren Bildschirm verkleinert wird, ist der gleiche Bandbreiten-Overhead erforderlich.

Art Direction

Beispiel für Art Direction

In anderen Fällen muss das Bild möglicherweise drastischer geändert werden, z. B. durch Ändern der Proportionen, Zuschneiden oder sogar Ersetzen des gesamten Bildes. In diesem Fall wird das Ändern des Bildes als Art Direction bezeichnet. Weitere Beispiele findest du unter responsiveimages.org/demos/.

Responsive Bilder

Screenshot des Udacity-Kurses

Wussten Sie, dass Bilder durchschnittlich mehr als 60% der Bytes ausmachen, die zum Laden einer Webseite erforderlich sind?

In diesem Kurs lernen Sie, wie Sie mit Bildern im modernen Web arbeiten, damit Ihre Bilder auf jedem Gerät ansprechend aussehen und schnell geladen werden.

Dabei erwerben Sie eine Reihe von Fähigkeiten und Techniken, um responsive Bilder reibungslos in Ihren Entwicklungsworkflow zu integrieren. Am Ende des Kurses entwickeln Sie mit Bildern, die sich an verschiedene Größen des Darstellungsbereichs und Nutzungsszenarien anpassen und darauf reagieren.

Dieser kostenlose Kurs wird über Udacity angeboten.

Kurs ansehen

Bilder im Markup

Das img-Element ist leistungsstark. Es lädt Inhalte herunter, decodiert und rendert sie. Moderne Browser unterstützen eine Reihe von Bildformaten. Das Einbeziehen von Bildern, die geräteübergreifend funktionieren, ist nicht anders als für Computer. Es sind nur wenige Anpassungen erforderlich, um eine gute User Experience zu schaffen.

Zusammenfassung

  • Verwenden Sie relative Größen für Bilder, um zu verhindern, dass sie den Container versehentlich überlaufen.
  • Verwenden Sie das Element picture, wenn Sie verschiedene Bilder je nach Geräteeigenschaften (auch als Art Direction) angeben möchten.
  • Verwenden Sie srcset und den Deskriptor x im Element img, um dem Browser Hinweise zu dem besten Bild zur Auswahl verschiedener Dichten zu geben.
  • Wenn Ihre Seite nur ein oder zwei Bilder enthält und diese nirgendwo sonst auf der Website verwendet werden, sollten Sie eventuell Inline-Bilder verwenden, um Dateianfragen zu reduzieren.

Relative Größen für Bilder verwenden

Verwenden Sie relative Einheiten, wenn Sie die Breite von Bildern festlegen, damit sie nicht versehentlich den Darstellungsbereich überschreiten. Zum Beispiel führt width: 50%; dazu, dass die Bildbreite 50% des enthaltenen Elements beträgt (nicht 50% des Darstellungsbereichs oder 50% der tatsächlichen Pixelgröße).

Da bei CSS das Überlaufen von Inhalten im Container ermöglicht wird, müssen Sie möglicherweise "max-width: 100%" verwenden, damit Bilder und andere Inhalte nicht überlaufen. Beispiel:

img, embed, object, video {
    max-width: 100%;
}

Gib über das Attribut alt für img-Elemente aussagekräftige Beschreibungen an. Diese helfen, die Barrierefreiheit deiner Website zu verbessern, indem Screenreader und andere Hilfstechnologien Kontext hinzugefügt werden.

imgs mit srcset für Geräte mit hoher DPI optimieren

Das Attribut srcset verbessert das Verhalten des img-Elements. So können Sie ganz einfach mehrere Bilddateien für unterschiedliche Geräteeigenschaften bereitstellen. Ähnlich wie bei der CSS-Funktion image-set für CSS ermöglicht srcset dem Browser die Auswahl des besten Bilds je nach Gerät. So kann beispielsweise bei einem Netzwerk mit begrenzter Bandbreite ein 2‐faches Bild auf einem 2‐fachen Display und in Zukunft möglicherweise ein einzelnes Bild auf einem 2‐fachen Gerät verwendet werden.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

In Browsern, die srcset nicht unterstützen, verwendet der Browser einfach die durch das Attribut src angegebene Standard-Image-Datei. Deshalb ist es wichtig, immer ein 1x-Bild anzugeben, das unabhängig von den Funktionen auf jedem Gerät angezeigt werden kann. Wenn srcset unterstützt wird, wird die durch Kommas getrennte Liste der Bilder/Bedingungen vor Anfragen geparst und nur das geeignete Bild heruntergeladen und angezeigt.

Während die Bedingungen alles von der Pixeldichte bis hin zur Breite und Höhe umfassen können, wird derzeit nur die Pixeldichte gut unterstützt. Um ein Gleichgewicht zwischen dem aktuellen Verhalten und zukünftigen Funktionen herzustellen, geben Sie einfach das 2‐fache Bild im Attribut an.

Art Direction in responsiven Bildern mit picture

Beispiel für Art Direction

Verwenden Sie das Element picture, um Bilder basierend auf den Geräteeigenschaften (auch als Artrichtung bezeichnet) zu ändern. Mit dem Element picture wird eine deklarative Lösung definiert, um mehrere Versionen eines Bildes basierend auf verschiedenen Eigenschaften wie Gerätegröße, Geräteauflösung und Ausrichtung bereitzustellen.

Verwenden Sie das Element picture, wenn eine Bildquelle in mehreren Dichten vorhanden ist oder wenn ein responsives Design auf einigen Bildschirmtypen ein etwas anderes Bild vorschreibt. Ähnlich wie beim video-Element können mehrere source-Elemente enthalten sein, wodurch es möglich ist, je nach Medienabfragen oder dem Bildformat unterschiedliche Bilddateien anzugeben.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Ausprobieren

Wenn im obigen Beispiel die Browserbreite mindestens 800 Pixel beträgt, wird je nach Geräteauflösung entweder head.jpg oder head-2x.jpg verwendet. Wenn die Größe des Browsers zwischen 450 und 800 Pixeln liegt, wird je nach Geräteauflösung wieder head-small.jpg oder head-small- 2x.jpg verwendet. Bei Bildschirmbreiten unter 450 Pixeln und Abwärtskompatibilität, bei denen das picture-Element nicht unterstützt wird, rendert der Browser stattdessen das img-Element und sollte immer enthalten sein.

Bilder mit relativer Größe

Wenn die endgültige Größe des Bildes nicht bekannt ist, kann es schwierig sein, einen Dichtedeskriptor für die Bildquellen anzugeben. Dies gilt insbesondere für Bilder, die sich über eine proportionale Breite des Browsers erstrecken und je nach Größe des Browsers fließend sind.

Anstatt feste Bildgrößen und -dichten anzugeben, können Sie die Größe jedes bereitgestellten Bilds angeben, indem Sie eine Beschreibung für die Breite und die Größe des Bildelements hinzufügen. So kann der Browser die effektive Pixeldichte automatisch berechnen und das beste Bild zum Herunterladen auswählen.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Ausprobieren

Im obigen Beispiel wird ein Bild gerendert, das die Hälfte der Breite des Darstellungsbereichs (sizes="50vw") hat. Je nach Breite des Browsers und dessen Gerätepixelverhältnis kann der Browser unabhängig von der Größe des Browserfensters das richtige Bild auswählen. Die folgende Tabelle zeigt, welches Bild der Browser auswählen würde:

Browserbreite Pixel-Verhältnis des Geräts Verwendetes Bild Effektive Lösung
400 Pixel 1 200.jpg 1x
400 Pixel 2 400.jpg 2x
320 Pixel 2 400.jpg 2,5-mal
600 Pixel 2 800.jpg 2,67x
640 Pixel 3 1000.jpg 3,125 x
1.100 Pixel 1 800.png 1,45 x

Haltepunkte in responsiven Bildern berücksichtigen

In vielen Fällen kann die Bildgröße abhängig von den Layout-Haltepunkten der Website variieren. Auf einem kleinen Bildschirm soll das Bild beispielsweise die volle Breite des Darstellungsbereichs einnehmen, während es auf größeren Bildschirmen nur einen kleinen Anteil einnehmen sollte.

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

Ausprobieren

Das Attribut sizes im obigen Beispiel verwendet mehrere Medienabfragen, um die Größe des Bildes anzugeben. Ist der Browser größer als 600 Pixel, entspricht das Bild 25% der Breite des Darstellungsbereichs. Zwischen 500 und 600 Pixeln liegt das Bild zu 50% und unter 500 Pixeln in voller Breite.

Produktbilder maximierbar machen

J. Crews-Website mit maximierbarem Produktbild
J. Crew-Website mit maximierbarem Produktbild

Kunden möchten sehen, was sie kaufen. Auf Websites von Einzelhändlern erwarten Nutzer, hochauflösende Nahaufnahmen von Produkten ansehen zu können, um Details besser nachvollziehen zu können. Außerdem sind Studienteilnehmer frustriert, wenn sie dies nicht können.

Ein gutes Beispiel für antippbare, maximierbare Bilder liefert das J. Crew-Website Ein ausgeblendetes Overlay weist darauf hin, dass ein Bild angetippt werden kann. Es wird ein herangezoomtes Bild mit feinen Details angezeigt.

Andere Bildtechniken

Komprimierte Bilder

Beim Komprimierungsbild wird für alle Geräte ein hoch komprimiertes, 2-faches Bild bereitgestellt, unabhängig von den tatsächlichen Funktionen des Geräts. Je nach Bildtyp und Komprimierungsgrad scheint sich die Bildqualität möglicherweise nicht zu ändern, aber die Dateigröße verringert sich erheblich.

Ausprobieren

JavaScript-Bildersatz

Der JavaScript-Bildersatz prüft die Funktionen des Geräts und „arbeitet das Richtige“. Sie können das Pixelverhältnis des Geräts über window.devicePixelRatio bestimmen, die Bildschirmbreite und -höhe abrufen und eventuell sogar ein Netzwerkverbindungs-Sniffing über navigator.connection durchführen oder eine gefälschte Anfrage senden. Wenn Sie alle diese Informationen erfasst haben, können Sie entscheiden, welches Bild geladen werden soll.

Ein großer Nachteil dieses Ansatzes ist, dass bei der Verwendung von JavaScript das Laden des Bildes verzögert wird, bis der Look-Ahead-Parser zumindest abgeschlossen ist. Das bedeutet, dass der Download von Images erst nach dem Auslösen des Ereignisses pageload gestartet wird. Außerdem lädt der Browser höchstwahrscheinlich sowohl das 1- als auch das 2x-Bild herunter, was zu einer größeren Seitengröße führt.

Bilder inline anzeigen: Raster- und Vektorbilder

Es gibt zwei grundsätzlich unterschiedliche Möglichkeiten zum Erstellen und Speichern von Images. Dies wirkt sich darauf aus, wie Sie Bilder responsiv bereitstellen.

Rasterbilder wie Fotos und andere Bilder werden als Raster einzelner Farbpunkte dargestellt. Rasterbilder können von einer Kamera oder einem Scanner stammen oder mit dem HTML-Canvas-Element erstellt werden. Formate wie PNG, JPEG und WebP werden zum Speichern von Rasterbildern verwendet.

Vektorbilder wie Logos und Strichzeichnungen sind definiert als eine Reihe von Kurven, Linien, Formen, Füllfarben und Farbverläufen. Vektorbilder können mit Programmen wie Adobe Illustrator oder Inkscape erstellt oder mit einem Vektorformat wie SVG handschriftlich in Code geschrieben werden.

SVG

Mit SVG können responsive Vektorgrafiken in eine Webseite eingebunden werden. Der Vorteil von Vektordateiformaten gegenüber Rasterdateiformaten besteht darin, dass der Browser ein Vektorbild in jeder Größe rendern kann. Vektorformate beschreiben die Geometrie des Bildes – wie es aus Linien, Kurven, Farben usw. besteht. Rasterformate hingegen bieten nur Informationen über einzelne Farbpunkte, sodass der Browser raten muss, wie die Lücken bei der Skalierung gefüllt werden sollen.

Unten sehen Sie zwei Versionen desselben Bildes: ein PNG-Bild auf der linken Seite und eine SVG-Datei auf der rechten Seite. Das SVG-Bild sieht in jeder Größe gut aus, während die PNG daneben auf größeren Bildschirmen verschwommen aussieht.

HTML5-Logo, PNG-Format
HTML5-Logo, SVG-Format

Wenn Sie die Anzahl der Dateianfragen Ihrer Seite reduzieren möchten, können Sie Bilder inline im SVG- oder Daten-URI-Format codieren. Im Quelltext dieser Seite sehen Sie, dass die beiden folgenden Logos inline deklariert sind: ein Daten-URI und ein SVG.

SVG wird auf Mobilgeräten und Computern hervorragend unterstützt. Mit Optimierungstools kann die SVG-Größe erheblich reduziert werden. Die folgenden beiden SVG-Inline-Logos sehen identisch aus, aber eines ist ungefähr 3 KB, das andere nur 2 KB groß:

Daten-URI

Mit Daten-URIs können Sie eine Datei, z. B. ein Bild, inline einbinden. Dazu legen Sie den „src“ eines img-Elements als Base64-codierten String im folgenden Format fest:

<img src="data:image/svg+xml;base64,[data]">

Der Anfang des Codes für das HTML5-Logo oben sieht wie folgt aus:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(Die Vollversion ist über 5000 Zeichen lang!)

Zum Konvertieren von Binärdateien wie Bildern in Daten-URIs stehen Drag-and-drop-Tools wie jpillora.com/base64-encoder zur Verfügung. Genau wie SVGs werden auch Daten-URIs in mobilen und Desktop-Browsern gut unterstützt.

Inlineing in CSS

Daten-URIs und SVGs können auch in CSS inline eingefügt werden. Dies wird sowohl auf Mobilgeräten als auch auf Computern unterstützt. Hier sehen Sie zwei identisch aussehende Bilder, die in CSS als Hintergrundbilder implementiert sind: einen Daten-URI und ein SVG:

Vor- und Nachteile von Inline-Inline-Videos

Inline-Code für Bilder kann umfangreich sein, insbesondere für Daten-URIs. Warum sollten Sie ihn verwenden? Um die Anzahl der HTTP-Anfragen zu reduzieren! Mit SVGs und Daten-URIs kann eine ganze Webseite, einschließlich Bildern, CSS und JavaScript, mit einer einzigen Anfrage abgerufen werden.

Nachteil:

  • Auf Mobilgeräten können Daten-URIs deutlich langsamer angezeigt werden als Bilder aus einem externen src.
  • Daten-URIs können die Größe einer HTML-Anfrage erheblich erhöhen.
  • Sie erhöhen die Komplexität Ihres Markups und Ihres Workflows.
  • Das Daten-URI-Format ist erheblich größer als im Binärformat (bis zu 30%), sodass die Gesamtgröße des Downloads nicht reduziert wird.
  • Daten-URIs können nicht im Cache gespeichert werden und müssen daher für jede Seite, auf der sie verwendet werden, heruntergeladen werden.
  • In IE 6 und 7 werden sie nicht unterstützt, in IE8 ist die Unterstützung unvollständig.
  • Bei HTTP/2 hat die Reduzierung der Anzahl von Asset-Anfragen eine geringere Priorität.

Wie bei allen responsiven Seiten müssen Sie testen, was am besten funktioniert. Verwenden Sie Entwicklertools, um die Downloaddateigröße, die Anzahl der Anfragen und die Gesamtlatenz zu messen. Daten-URIs können manchmal bei Rasterbildern nützlich sein, z. B. auf einer Startseite, die nur ein oder zwei Fotos enthält, die nirgendwo sonst verwendet werden. Wenn Sie Vektorbilder inline einfügen müssen, ist SVG eine weitaus bessere Option.

Bilder in CSS

Die CSS-Eigenschaft background ist ein leistungsstarkes Tool, mit dem Sie unter anderem komplexe Bilder in Elemente einfügen können. So lassen sich z. B. ganz einfach mehrere Bilder hinzufügen und sie wiederholen. In Kombination mit Medienabfragen wird die Hintergrundeigenschaft noch leistungsfähiger und ermöglicht das bedingte Laden von Bildern basierend auf Bildschirmauflösung, Größe des Darstellungsbereichs usw.

Zusammenfassung

  • Verwenden Sie das beste Bild für die Eigenschaften des Bildschirms und berücksichtigen Sie die Bildschirmgröße, die Geräteauflösung und das Seitenlayout.
  • Ändern Sie die background-image-Eigenschaft in der CSS für Anzeigen mit hoher DPI-Werten, wenn Medienabfragen mit min-resolution und -webkit-min-device-pixel-ratio verwendet werden.
  • Verwenden Sie „srcset“, um zusätzlich zum 1x-Bild im Markup hochauflösende Bilder bereitzustellen.
  • Berücksichtigen Sie die Leistungskosten, wenn Sie Techniken zum Ersetzen von JavaScript-Bildern verwenden oder stark komprimierte Bilder mit hoher Auflösung auf Geräten mit geringerer Auflösung bereitstellen.

Medienabfragen für das bedingte Laden von Bildern oder für die Art Direction verwenden

Medienabfragen wirken sich nicht nur auf das Seitenlayout aus. Sie können sie auch verwenden, um Bilder unter bestimmten Bedingungen zu laden oder Art Direction (Art Direction) basierend auf der Breite des Darstellungsbereichs anzugeben.

Im Beispiel unten wird auf kleineren Bildschirmen nur small.png heruntergeladen und auf den Inhalt div angewendet. Auf größeren Bildschirmen wird background-image: url(body.png) auf den Text und background-image: url(large.png) auf den Inhalt div angewendet.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Ausprobieren

Bildset verwenden, um hochauflösende Bilder bereitzustellen

Die Funktion image-set() in der CSS verbessert die Verhaltenseigenschaft background. Dadurch ist es einfach, mehrere Bilddateien für unterschiedliche Geräteeigenschaften bereitzustellen. Auf diese Weise kann der Browser das beste Bild für die Eigenschaften des Geräts auswählen, z. B. ein 2-faches Bild auf einem 2-fachen Display oder ein 1-x-Bild auf einem 2-fachen Gerät in einem Netzwerk mit begrenzter Bandbreite.

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

Der Browser lädt nicht nur das richtige Bild, sondern skaliert es entsprechend. Mit anderen Worten, der Browser geht davon aus, dass 2-fache Bilder doppelt so groß sind wie 1-fache Bilder, und skaliert das 2-fache Bild also um den Faktor 2 herunter, sodass es auf der Seite gleich groß zu sein scheint.

Die Unterstützung für image-set() ist noch neu und wird nur in Chrome und Safari mit dem Anbieterpräfix -webkit unterstützt. Fügen Sie ein Fallback-Image ein, falls image-set() nicht unterstützt wird. Beispiel:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

Ausprobieren

Mit dem obigen Code wird das entsprechende Asset in Browsern geladen, die "image-set" unterstützen. Andernfalls wird das 1x-Asset verwendet. Der offensichtliche Nachteil ist, dass die image-set()-Browserunterstützung gering ist, die meisten Browser jedoch nur ein einziges Asset erhalten.

Verwende Medienabfragen für hochauflösende Bilder oder Art Direction

Medienabfragen können Regeln erstellen, die auf dem Pixelverhältnis des Geräts basieren, wodurch es möglich ist, unterschiedliche Bilder für 2- und 1x-Bildschirme anzugeben.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome, Firefox und Opera unterstützen alle den standardmäßigen (min-resolution: 2dppx). Der Safari- und der Android-Browser hingegen erfordern beide die ältere Syntax mit Präfixen des Anbieters ohne die dppx-Einheit. Denken Sie daran, dass diese Stile nur geladen werden, wenn das Gerät der Medienabfrage entspricht. Außerdem müssen Sie Stile für den Basisfall angeben. Dies hat auch den Vorteil, dass etwas gerendert wird, wenn der Browser keine auflösungsspezifischen Medienabfragen unterstützt.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Ausprobieren

Mit der Syntax „Minimale Breite“ können Sie auch alternative Bilder abhängig von der Größe des Darstellungsbereichs anzeigen lassen. Diese Methode hat den Vorteil, dass das Bild nicht heruntergeladen wird, wenn die Medienabfrage nicht übereinstimmt. bg.png wird beispielsweise nur heruntergeladen und auf body angewendet, wenn die Browserbreite mindestens 500 Pixel beträgt:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

SVG für Symbole verwenden

Verwenden Sie beim Hinzufügen von Symbolen zu Ihrer Seite nach Möglichkeit SVG-Symbole oder in einigen Fällen Unicode-Zeichen.

Zusammenfassung

  • Verwenden Sie SVG oder Unicode für Symbole anstelle von Rasterbildern.

Einfache Symbole durch Unicode ersetzen

Viele Schriftarten unterstützen die Vielzahl von Unicode-Glyphen, die anstelle von Bildern verwendet werden können. Im Gegensatz zu Bildern sind Unicode-Schriftarten gut skalierbar und sehen gut aus, egal wie klein oder groß sie auf dem Bildschirm erscheinen.

Über den normalen Zeichensatz hinaus kann Unicode auch Symbole für Pfeile (†), mathematische Operatoren (√), geometrische Formen (★), Steuerbilder (▶), Musiknotation (♬), griechische Buchstaben (Ω) und sogar Schachfiguren (♞) enthalten.

Ein Unicode-Zeichen wird auf die gleiche Weise wie benannte Entitäten eingefügt: &#XXXX, wobei XXXX für die Nummer des Unicode-Zeichens steht. Beispiel:

You're a super &#9733;

Du bist ein Superstar ★

Komplexe Symbole durch SVG ersetzen

Bei komplexeren Symbolanforderungen sind SVG-Symbole in der Regel schlank, einfach zu verwenden und können mit CSS formatiert werden. SVG hat gegenüber Rasterbildern eine Reihe von Vorteilen:

  • Es sind Vektorgrafiken, die unendlich skaliert werden können.
  • CSS-Effekte wie Farbe, Schatten, Transparenz und Animationen sind einfach.
  • SVG-Bilder können direkt im Dokument inline eingefügt werden.
  • Sie sind semantisch.
  • Sie bieten eine bessere Zugänglichkeit mit den entsprechenden Attributen.
With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Ausprobieren

Symbolschriftarten mit Vorsicht verwenden

Beispiel für eine Seite, auf der FontAwesome für die Schriftsymbole verwendet wird.
Beispiel für eine Seite, auf der FontAwesome für die Schriftsymbole verwendet wird.

Symbolschriftarten sind beliebt und können einfach zu verwenden sein, haben aber im Vergleich zu SVG-Symbolen einige Nachteile:

  • Es sind Vektorgrafiken, die unbegrenzt skaliert werden können, aber Kantenglättung aufweisen, wodurch Symbole nicht so scharf wie erwartet sind.
  • Eingeschränkte Stile mit CSS.
  • Die genaue Positionierung kann je nach Zeilenhöhe, Buchstabenabstand usw. schwierig sein.
  • Sie sind nicht semantisch und können mit Screenreadern oder anderen Hilfstechnologien schwierig zu verwenden sein.
  • Sofern sie nicht angemessen begrenzt sind, können sie zu einer großen Dateigröße führen, wenn nur eine kleine Teilmenge der verfügbaren Symbole verwendet wird.
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Ausprobieren

Es gibt Hunderte von kostenlosen und kostenpflichtigen Symbolschriftarten, darunter Font Awesome, Pictos und Glyphicons.

Achten Sie darauf, die Gewichtung der zusätzlichen HTTP-Anfrage und die Dateigröße mit der Notwendigkeit der Symbole abzuwägen. Wenn Sie beispielsweise nur wenige Symbole benötigen, ist es möglicherweise besser, ein Bild oder ein Sprite zu verwenden.

Leistung von Bildern optimieren

Bilder machen oft den größten Teil der heruntergeladenen Byte aus und nehmen häufig auch einen erheblichen Teil des sichtbaren Bereichs auf der Seite ein. Daher kann die Optimierung von Bildern häufig zu den größten Byteeinsparungen und Leistungsverbesserungen für Ihre Website führen: Je weniger Byte der Browser herunterladen muss, desto geringer ist die Konkurrenz um die Bandbreite des Clients und desto schneller kann der Browser alle Assets herunterladen und anzeigen.

Zusammenfassung

  • Wählen Sie nicht einfach ein Bildformat nach dem Zufallsprinzip aus. Machen Sie sich mit den verschiedenen verfügbaren Formaten vertraut und verwenden Sie das am besten geeignete Format.
  • Binden Sie Bildoptimierungs- und Komprimierungstools in Ihren Workflow ein, um die Dateigröße zu reduzieren.
  • Reduzieren Sie die Anzahl von HTTP-Anfragen, indem Sie häufig verwendete Bilder in Bild-Sprites platzieren.
  • Um die anfängliche Seitenladezeit zu verbessern und die anfängliche Seitengröße zu reduzieren, sollten Bilder erst nach dem Scrollen geladen werden.

Das richtige Format auswählen

Es gibt zwei Arten von Bildern: Vektorbilder und Rasterbilder. Bei Rasterbildern müssen Sie auch das richtige Komprimierungsformat auswählen, z. B. GIF, PNG, JPG.

Rasterbilder wie Fotos und andere Bilder werden als Raster aus einzelnen Punkten oder Pixeln dargestellt. Rasterbilder stammen in der Regel von einer Kamera oder einem Scanner oder können mit dem Element canvas im Browser erstellt werden. Mit zunehmender Bildgröße nimmt auch die Dateigröße zu. Wenn sie größer als ihre ursprüngliche Größe werden, werden die Rasterbilder verschwommen, da der Browser raten muss, wie die fehlenden Pixel ergänzt werden sollen.

Vektorbilder wie Logos und Strichzeichnungen werden durch eine Reihe von Kurven, Linien, Formen und Füllfarben definiert. Vektorbilder werden mit Programmen wie Adobe Illustrator oder Inkscape erstellt und in einem Vektorformat wie SVG gespeichert. Da Vektorbilder auf einfachen Primitiven basieren, können sie ohne Qualitätsverlust oder Änderung der Dateigröße skaliert werden.

Bei der Auswahl des richtigen Formats müssen sowohl die Herkunft des Bildes (Raster oder Vektor) als auch der Inhalt (Farben, Animation, Text usw.) berücksichtigt werden. Kein Format passt zu allen Bildtypen und jedes Format hat seine eigenen Stärken und Schwächen.

Orientieren Sie sich bei der Auswahl des geeigneten Formats an den folgenden Richtlinien:

  • Verwenden Sie JPG für Fotos.
  • SVG für Vektorgrafiken und einfarbige Grafiken wie Logos und Strichzeichnungen verwenden. Wenn keine Vektorgrafiken verfügbar sind, versuchen Sie es mit WebP oder PNG.
  • Verwenden Sie PNG anstelle von GIF, da dies mehr Farben ermöglicht und bessere Komprimierungsverhältnisse bietet.
  • Für längere Animationen sollten Sie <video> verwenden. Diese Funktion bietet eine bessere Bildqualität und gibt dem Nutzer die Kontrolle über die Wiedergabe.

Dateigröße reduzieren

Sie können die Größe der Bilddateien erheblich reduzieren, indem Sie die Bilder nach dem Speichern "nachverarbeiten". Es gibt eine Reihe von Tools für die Bildkomprimierung: verlustbehaftet und verlustfrei, online, GUI, Befehlszeile. Wenn möglich, sollten Sie die automatische Bildoptimierung ausprobieren, damit sie in Ihren Workflow integriert ist.

Es gibt verschiedene Tools, die eine weitere, verlustfreie Komprimierung für JPG- und PNG-Dateien ohne Auswirkung auf die Bildqualität durchführen. Versuchen Sie für JPG jpegtran oder jpegoptim (nur unter Linux verfügbar; führen Sie es mit der Option „--strip-all“) aus. Versuchen Sie es für PNG mit OptiPNG oder PNGOUT.

Bild-Sprites verwenden

Im Beispiel verwendetes Sprite Sheet für Bilder

CSS-Sprite ist eine Technik, bei der mehrere Bilder zu einem einzigen "Sprite Sheet"-Bild kombiniert werden. Sie können dann einzelne Bilder verwenden, indem Sie das Hintergrundbild für ein Element (das Sprite Sheet) sowie einen Versatz zur Anzeige des richtigen Teils angeben.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

Ausprobieren

Das Spriting hat den Vorteil, dass die Anzahl der Downloads reduziert wird, die zum Abrufen mehrerer Bilder erforderlich sind, und gleichzeitig das Caching ermöglicht.

Lazy Loading verwenden

Bei langen Seiten mit vielen Bildern „below the fold“ (mit Scrollen sichtbar) kann Lazy Loading das Laden von Seiten entweder nach Bedarf oder nach dem Laden und Rendern des Hauptinhalts erheblich beschleunigen. Mit Lazy Loading können aber nicht nur die Leistung verbessert werden, sondern auch unendliches Scrollen möglich.

Gehen Sie beim Erstellen von Seiten mit unendlichem Scrollen vorsichtig vor: Da Inhalte so geladen werden, wie sie sichtbar werden, können Suchmaschinen sie möglicherweise nie sehen. Darüber hinaus wird Nutzern, die nach Informationen suchen, die sie in der Fußzeile erwarten, diese nie angezeigt, da immer neue Inhalte geladen werden.

Bilder vollständig vermeiden

Manchmal ist das beste Bild gar kein Bild. Nutzen Sie nach Möglichkeit die nativen Funktionen des Browsers, um dieselbe oder eine ähnliche Funktionalität bereitzustellen. Browser generieren Bilder, für die zuvor Bilder erforderlich waren. Das bedeutet, dass Browser keine separaten Bilddateien mehr herunterladen müssen, und unpassende skalierte Bilder verhindern. Sie können Unicode- oder spezielle Symbolschriftarten zum Rendern von Symbolen verwenden.

Text im Markup und nicht in Bildern platzieren

Wenn möglich, sollte Text aus Text bestehen und nicht in Bilder eingebettet sein. Wenn Sie beispielsweise Bilder für Überschriften verwenden oder Kontaktdaten wie Telefonnummern oder Adressen direkt in Bilder einfügen, verhindern Sie, dass Nutzer die Informationen kopieren und einfügen. Die Informationen sind für Screenreader nicht zugänglich und die Website kann nicht responsiv sein. Platzieren Sie den Text stattdessen in Ihrem Markup und verwenden Sie gegebenenfalls Webschriftarten, um den gewünschten Stil zu erreichen.

Bilder durch CSS ersetzen

In modernen Browsern können mit CSS-Funktionen Stile erstellt werden, für die zuvor Bilder erforderlich waren. Komplexe Farbverläufe lassen sich beispielsweise mit der Eigenschaft background, Schatten mit box-shadow und abgerundete Ecken mit der Eigenschaft border-radius hinzufügen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

Beachte, dass die Verwendung dieser Techniken Rendering-Zyklen erfordert, die auf Mobilgeräten wichtig sein können. Bei übermäßiger Nutzung gehen alle Vorteile verloren, die Sie möglicherweise erzielt haben, und die Leistung kann beeinträchtigt werden.