Responsive Bilder

Ein Bild sagt mehr als tausend Worte und Bilder sind ein wesentlicher Bestandteil jeder Seite. Sie machen aber auch oft den größten Teil der heruntergeladenen Byte aus. Mit responsivem Webdesign können sich nicht nur unsere Layouts, sondern auch Bilder je nach Geräteeigenschaften ändern.

Pete LePage

Responsives Webdesign bedeutet, dass sich nicht nur unsere Layouts, sondern auch die Inhalte je nach Geräteeigenschaften ändern können. Auf Displays mit hoher Auflösung (2x) sorgen Grafiken mit hoher Auflösung beispielsweise für Schärfe. Ein Bild mit einer Breite von 50 % kann bei einer Browserbreite von 800 Pixeln gut funktionieren, nimmt aber auf einem schmalen Smartphone zu viel Platz ein und erfordert denselben Bandbreitenaufwand, wenn es auf einen kleineren Bildschirm herunterskaliert wird.

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 normalerweise als Art Direction bezeichnet. Weitere Beispiele finden Sie unter responsiveimages.org/demos/.

Responsive Bilder

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

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

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

Dies ist ein kostenloser Kurs, der über Udacity angeboten wird.

Zum Kurs

Bilder im Markup

Das img-Element ist leistungsstark – es lädt Inhalte herunter, decodiert sie und rendert sie. Moderne Browser unterstützen eine Reihe von Bildformaten. Das Einbinden von Bildern, die auf allen Geräten funktionieren, unterscheidet sich nicht von der Einbindung auf dem Computer. Es sind nur ein paar kleine Anpassungen erforderlich, um ein gutes Nutzererlebnis zu schaffen.

Zusammenfassung

• Verwenden Sie relative Größen für Bilder, um zu verhindern, dass sie versehentlich über den Container hinausgehen.
• Verwende das picture-Element, wenn du je nach Geräteeigenschaften unterschiedliche Bilder angeben möchtest (auch als Art Direction bezeichnet).
• Verwende srcset und den Deskriptor x im Element img, um dem Browser Hinweise darauf zu geben, welches Bild bei der Auswahl aus verschiedenen Dichten am besten geeignet ist.
• Wenn deine Seite nur ein oder zwei Bilder hat und diese nicht an anderer Stelle auf deiner Website verwendet werden, solltest du Inline-Bilder verwenden, um die Anzahl der Dateianfragen zu reduzieren.

Relative Größen für Bilder verwenden

Verwenden Sie relative Einheiten, wenn Sie die Breite von Bildern angeben, damit sie nicht versehentlich über den Darstellungsbereich hinausgehen. Beispiel: width: 50%; bewirkt, dass die Bildbreite 50 % des übergeordneten Elements beträgt (nicht 50 % des Darstellungsbereichs oder 50 % der tatsächlichen Pixelgröße).

Da CSS es ermöglicht, dass Inhalte über ihren Container hinausgehen, müssen Sie möglicherweise „max-width: 100%“ verwenden, um zu verhindern, dass Bilder und andere Inhalte überlaufen. Beispiel:

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

Achte darauf, aussagekräftige Beschreibungen über das Attribut alt für img-Elemente anzugeben. Dadurch wird deine Website barrierefreier, da Screenreadern und anderen Hilfstechnologien Kontext bereitgestellt wird.

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

Mit dem Attribut srcset wird das Verhalten des Elements img verbessert, sodass du ganz einfach mehrere Bilddateien für verschiedene Geräteeigenschaften bereitstellen kannst. Ähnlich wie die in CSS native CSS-Funktion image-set ermöglicht srcset dem Browser, das beste Bild je nach den Eigenschaften des Geräts auszuwählen, z. B. ein 2x-Bild auf einem 2x-Display und möglicherweise in Zukunft ein 1x-Bild auf einem 2x-Gerät, wenn es sich in einem Netzwerk mit begrenzter Bandbreite befindet.

<img src="photo.png" srcset="[e-mail] 2x" ...>

In Browsern, die srcset nicht unterstützen, wird einfach die Standardbilddatei verwendet, die im Attribut src angegeben ist. Deshalb ist es wichtig, immer ein 1x-Bild einzufügen, das auf jedem Gerät angezeigt werden kann, unabhängig von den Funktionen. Wenn srcset unterstützt wird, wird die durch Kommas getrennte Liste der Bilder/Bedingungen vor dem Senden von Anfragen geparst und nur das am besten geeignete Bild wird heruntergeladen und angezeigt.

Die Bedingungen können alles von der Pixeldichte bis hin zu Breite und Höhe umfassen, aber nur die Pixeldichte wird derzeit gut unterstützt. Um das aktuelle Verhalten mit zukünftigen Funktionen in Einklang zu bringen, solltest du einfach das 2x-Bild im Attribut angeben.

Art Direction in responsiven Bildern mit picture

Wenn Sie Bilder basierend auf Geräteeigenschaften ändern möchten, verwenden Sie das picture-Element. Dies wird auch als Art Direction bezeichnet. Das picture-Element definiert eine deklarative Lösung, um mehrere Versionen eines Bildes basierend auf verschiedenen Merkmalen wie Gerätegröße, Geräteauflösung, Ausrichtung und mehr bereitzustellen.

Hinweis: Das picture-Element wird nach und nach in Browsern eingeführt. Obwohl es noch nicht in jedem Browser verfügbar ist, empfehlen wir die Verwendung aufgrund der starken Abwärtskompatibilität und der potenziellen Verwendung des Picturefill-Polyfills. Weitere Informationen findest du auf der Website ResponsiveImages.org.

Verwenden Sie das picture-Element, wenn eine Bildquelle in mehreren Pixeldichten vorhanden ist oder wenn ein responsives Design auf einigen Bildschirmtypen ein etwas anderes Bild erfordert. Ähnlich wie beim video-Element können mehrere source-Elemente enthalten sein, sodass je nach Medienabfragen oder Bildformat unterschiedliche Bilddateien angegeben werden können.

<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 px beträgt, wird je nach Geräteauflösung entweder head.jpg oder head-2x.jpg verwendet. Wenn die Browserbreite zwischen 450 px und 800 px liegt, wird je nach Geräteauflösung entweder head-small.jpg oder head-small- 2x.jpg verwendet. Bei Bildschirmbreiten unter 450 Pixel und zur Abwärtskompatibilität, wenn das picture-Element nicht unterstützt wird, rendert der Browser stattdessen das img-Element. Dieses 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. Das 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 Bildes angeben, indem Sie einen Breitenbezeichner zusammen mit der 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 halb so breit ist wie der Darstellungsbereich (sizes="50vw"). Je nach Breite des Browsers und dem Gerätepixelverhältnis kann der Browser das richtige Bild auswählen, unabhängig davon, wie groß das Browserfenster ist. In der folgenden Tabelle sehen Sie beispielsweise, welches Bild der Browser auswählen würde:

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

Breakpoints in responsiven Bildern berücksichtigen

In vielen Fällen kann sich die Bildgröße je nach den Layout-Breakpoints der Website ändern. Auf einem kleinen Bildschirm soll das Bild beispielsweise die gesamte Breite des Darstellungsbereichs einnehmen, während es auf größeren Bildschirmen nur einen kleinen Teil einnehmen soll.

<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

Im obigen Beispiel werden für das Attribut sizes mehrere Medienabfragen verwendet, um die Größe des Bildes anzugeben. Wenn die Browserbreite mehr als 600 Pixel beträgt, nimmt das Bild 25 % der Breite des Darstellungsbereichs ein. Liegt die Breite zwischen 500 und 600 Pixeln, nimmt das Bild 50 % der Breite des Darstellungsbereichs ein. Bei einer Breite von weniger als 500 Pixeln wird das Bild in voller Breite angezeigt.

Produktbilder maximierbar machen

J. Website von Crew mit maximierbarem Produktbild.

Kunden möchten sehen, was sie kaufen. Auf Einzelhandelswebsites erwarten Nutzer, dass sie hochauflösende Nahaufnahmen von Produkten sehen können, um sich Details genauer anzusehen. Studienteilnehmer waren frustriert, wenn dies nicht möglich war.

Ein gutes Beispiel für antippbare, maximierbare Bilder ist die Website von J. Crew-Website. Ein Overlay, das nach kurzer Zeit ausgeblendet wird, zeigt an, dass ein Bild angetippt werden kann, um eine vergrößerte Ansicht mit feinen Details zu sehen.

Andere Bildtechniken

Komprimierte Bilder

Bei der komprimierenden Bildtechnik wird ein stark komprimiertes 2x-Bild an alle Geräte gesendet, unabhängig von den tatsächlichen Funktionen des Geräts. Je nach Bildtyp und Komprimierungsgrad ändert sich die Bildqualität möglicherweise nicht, die Dateigröße sinkt jedoch erheblich.

Ausprobieren

Achtung: Seien Sie vorsichtig bei der Verwendung der Komprimierungstechnik, da sie mehr Arbeitsspeicher und Decodierungskosten erfordert. Das Anpassen der Größe großer Bilder an kleinere Bildschirme ist aufwendig und kann insbesondere auf Geräten mit geringer Leistung, bei denen sowohl der Arbeitsspeicher als auch die Rechenleistung begrenzt sind, problematisch sein.

JavaScript-Bildersetzung

Beim JavaScript-Bildersatz werden die Funktionen des Geräts geprüft und die richtigen Maßnahmen ergriffen. Sie können das Pixelverhältnis des Geräts über window.devicePixelRatio ermitteln, die Breite und Höhe des Bildschirms abrufen und möglicherweise sogar die Netzwerkverbindung über navigator.connection oder eine gefälschte Anfrage ausspionieren. Wenn Sie alle diese Informationen gesammelt haben, können Sie entscheiden, welches Image geladen werden soll.

Ein großer Nachteil dieses Ansatzes ist, dass die Verwendung von JavaScript das Laden von Bildern verzögert, bis zumindest der Look-Ahead-Parser fertig ist. Das bedeutet, dass Bilder erst heruntergeladen werden, nachdem das pageload-Ereignis ausgelöst wurde. Außerdem lädt der Browser höchstwahrscheinlich sowohl die 1x- als auch die 2x-Bilder herunter, was zu einer größeren Webseitengröße führt.

Inlining von Bildern: Raster und Vektor

Es gibt zwei grundlegend unterschiedliche Möglichkeiten, Bilder zu erstellen und zu speichern. Dies wirkt sich darauf aus, wie Sie Bilder responsiv bereitstellen.

Rasterbilder: Fotos und andere Bilder werden als Raster aus einzelnen Farbpunkten 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.

Vektor-Images wie Logos und Strichzeichnungen werden als eine Reihe von Kurven, Linien, Formen, Füllfarben und Farbverläufen definiert. Vektor-Images können mit Programmen wie Adobe Illustrator oder Inkscape erstellt oder manuell in einem Vektorformat wie SVG codiert 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, also wie es aus Linien, Kurven, Farben usw. aufgebaut ist. Rasterformate hingegen enthalten nur Informationen zu einzelnen Farbpunkten. Der Browser muss also beim Skalieren erraten, wie die Lücken gefüllt werden sollen.

Unten sehen Sie zwei Versionen desselben Bildes: links ein PNG-Bild und rechts ein SVG-Bild. Die SVG-Grafik sieht in jeder Größe gut aus, während die PNG-Grafik daneben bei größeren Darstellungen unscharf wird.

Wenn ihr die Anzahl der Dateianfragen auf eurer Seite reduzieren möchtet, könnt ihr Bilder inline im SVG- oder Data-URI-Format codieren. Wenn Sie sich den Quellcode dieser Seite ansehen, werden Sie feststellen, dass beide Logos unten inline deklariert sind: ein Daten-URI und ein SVG.

SVG wird auf Mobilgeräten und Computern gut unterstützt und mit Optimierungstools lässt sich die SVG-Größe erheblich reduzieren. Die folgenden beiden Inline-SVG-Logos sehen identisch aus, aber eines ist etwa 3 KB groß und das andere nur 2 KB:

Daten-URI

Mit Daten-URIs kannst du eine Datei, z. B. ein Bild, inline einbinden, indem du das src-Attribut eines img-Elements als Base64-codierten String angibst. Verwende dafür das folgende Format:

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

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

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

(Die Vollversion ist über 5.000 Zeichen lang!)

Es gibt Drag-and-drop-Tools wie jpillora.com/base64-encoder, mit denen du Binärdateien wie Bilder in Daten-URIs umwandeln kannst. Genau wie SVGs werden Daten-URIs in mobilen und Desktop-Browsern gut unterstützt.

Inlining in CSS

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

Vor- und Nachteile von Inlining

Inline-Code für Bilder kann sehr umfangreich sein, insbesondere Daten-URIs. Warum sollte man ihn also verwenden? Um 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.

Nachteile:

• Auf Mobilgeräten kann die Anzeige von Daten-URIs deutlich langsamer sein als die von Bildern von einer externen src.
• Daten-URIs können die Größe einer HTML-Anfrage erheblich erhöhen.
• Sie machen das Markup und den Workflow komplexer.
• Das Daten-URI-Format ist erheblich größer als das Binärformat (bis zu 30 %) und reduziert daher nicht die Gesamtgröße des Downloads.
• Daten-URIs können nicht im Cache gespeichert werden und müssen daher für jede Seite, auf der sie verwendet werden, heruntergeladen werden.
• Sie werden in IE 6 und 7 nicht unterstützt und in IE 8 nur unvollständig.
• Mit HTTP/2 wird die Reduzierung der Anzahl von Asset-Anfragen weniger wichtig.

Wie bei allen responsiven Elementen müssen Sie testen, was am besten funktioniert. Verwenden Sie Entwicklertools, um die Downloadgröße der Datei, die Anzahl der Anfragen und die Gesamtlatenz zu messen. Daten-URIs können manchmal für Rasterbilder nützlich sein, z. B. auf einer Startseite, die nur ein oder zwei Fotos enthält, die nicht an anderer Stelle verwendet werden. Wenn Sie Vektorbilder inline einbinden müssen, ist SVG eine viel bessere Option.

Bilder in CSS

Die CSS-Eigenschaft background ist ein leistungsstarkes Tool, mit dem Sie Elementen komplexe Bilder hinzufügen können. So lassen sich ganz einfach mehrere Bilder hinzufügen, wiederholen und mehr. In Kombination mit Medienabfragen wird die Hintergrund-Property noch leistungsfähiger, da sie das bedingte Laden von Bildern basierend auf der Bildschirmauflösung, der Größe des Darstellungsbereichs und mehr ermöglicht.

Zusammenfassung

• Verwende das beste Bild für die Eigenschaften des Displays und berücksichtige dabei die Bildschirmgröße, die Geräteauflösung und das Seitenlayout.
• Ändern Sie das Attribut background-image in CSS für Displays mit hoher DPI-Zahl mithilfe von Medienabfragen mit min-resolution und -webkit-min-device-pixel-ratio.
• Verwende „srcset“, um zusätzlich zum 1x-Bild im Markup Bilder mit hoher Auflösung bereitzustellen.
• Berücksichtige die Leistungskosten, wenn du JavaScript-Techniken zum Ersetzen von Bildern verwendest oder stark komprimierte, hochauflösende Bilder auf Geräten mit niedrigerer Auflösung bereitstellst.

Medienabfragen für bedingtes Laden von Bildern oder Art Direction verwenden

Medienabfragen wirken sich nicht nur auf das Seitenlayout aus. Sie können sie auch verwenden, um Bilder bedingt zu laden oder die Art Direction je nach Breite des Darstellungsbereichs anzupassen.

Im folgenden Beispiel wird auf kleineren Bildschirmen nur small.png heruntergeladen und auf den Inhalt div angewendet. Auf größeren Bildschirmen wird dagegen background-image: url(body.png) auf den Textkörper 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

Mit „image-set“ Bilder mit hoher Auflösung bereitstellen

Die Funktion image-set() in CSS erweitert das Verhalten des Attributs background, sodass Sie ganz einfach mehrere Bilddateien für verschiedene Geräteeigenschaften bereitstellen können. So kann der Browser das beste Bild je nach den Eigenschaften des Geräts auswählen, z. B. ein 2x-Bild auf einem 2x-Display oder ein 1x-Bild auf einem 2x-Gerät, wenn die Bandbreite des Netzwerks begrenzt ist.

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

Der Browser lädt nicht nur das richtige Bild, sondern skaliert es auch entsprechend. Mit anderen Worten: Der Browser geht davon aus, dass 2x-Bilder doppelt so groß sind wie 1x-Bilder, und skaliert das 2x-Bild um den Faktor 2 herunter, sodass das Bild auf der Seite die gleiche Größe zu haben 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. Achte darauf, ein Fallback-Bild für den Fall einzufügen, dass 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

In Browsern, die „image-set“ unterstützen, wird das entsprechende Asset geladen. Andernfalls wird auf das 1x-Asset zurückgegriffen. Der offensichtliche Nachteil ist, dass die meisten Browser das 1x-Asset erhalten, da die Browserunterstützung für image-set() gering ist.

Medienabfragen verwenden, um hochauflösende Bilder oder Art Direction bereitzustellen

Mit Medienabfragen können Regeln basierend auf dem Gerätepixelverhältnis erstellt werden. So lassen sich unterschiedliche Bilder für 2x- und 1x-Displays angeben.

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

Chrome, Firefox und Opera unterstützen alle den Standard (min-resolution: 2dppx), während die Browser Safari und Android die ältere Syntax mit Anbieterpräfix ohne die Einheit dppx erfordern. Diese Stile werden nur geladen, wenn das Gerät der Medienabfrage entspricht. Sie müssen Stile für den Standardfall angeben. Das 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

Du kannst auch die Syntax „min-width“ verwenden, um je nach Größe des Darstellungsbereichs alternative Bilder anzuzeigen. Diese Technik hat den Vorteil, dass das Bild nicht heruntergeladen wird, wenn die Medienabfrage nicht übereinstimmt. Beispielsweise wird bg.png 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

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

Zusammenfassung

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

Einfache Symbole durch Unicode ersetzen

Viele Schriftarten unterstützen die unzähligen Unicode-Glyphen, die anstelle von Bildern verwendet werden können. Im Gegensatz zu Bildern lassen sich Unicode-Schriftarten gut skalieren und sehen unabhängig von ihrer Größe auf dem Bildschirm gut aus.

Neben dem normalen Zeichensatz kann Unicode Symbole für Pfeile (←), mathematische Operatoren (√), geometrische Formen (★), Steuerzeichen (▶), Musiknotation (♬), griechische Buchstaben (Ω) und sogar Schachfiguren (♞) enthalten.

Unicode-Zeichen werden auf dieselbe Weise wie benannte Entitäten eingefügt: &#XXXX, wobei XXXX die Nummer des Unicode-Zeichens darstellt. Beispiel:

You're a super ★

Du bist ein Super-★

Komplexe Symbole durch SVG ersetzen

Für komplexere Anforderungen an Symbole sind SVG-Symbole im Allgemeinen einfach zu verwenden und können mit CSS formatiert werden. SVG-Dateien haben gegenüber Rasterbildern eine Reihe von Vorteilen:

• Es handelt sich um Vektorgrafiken, die unendlich skaliert werden können.
• CSS-Effekte wie Farbe, Schatten, Transparenz und Animationen sind unkompliziert.
• SVG-Bilder können direkt in das Dokument eingebunden werden.
• Sie sind semantisch.
• Sie bieten mit den entsprechenden Attributen eine bessere Barrierefreiheit.

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 Schriftartsymbole verwendet wird.

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

• Es handelt sich um Vektorgrafiken, die unendlich skaliert werden können, aber möglicherweise mit Anti-Aliasing versehen sind, was zu Symbolen führt, die nicht so scharf sind wie erwartet.
• Eingeschränkte Gestaltungsmöglichkeiten mit CSS.
• Eine pixelgenaue Positionierung kann je nach Zeilenhöhe, Buchstabenabstand usw. schwierig sein.
• Sie sind nicht semantisch und können mit Screenreadern oder anderen Hilfstechnologien nur schwer verwendet werden.
• Wenn sie nicht richtig dimensioniert sind, kann dies zu einer großen Datei führen, obwohl nur ein kleiner Teil 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.

Wägen Sie die zusätzliche HTTP-Anfrage und Dateigröße gegen die Notwendigkeit der Symbole ab. Wenn Sie beispielsweise nur eine Handvoll Symbole benötigen, ist es möglicherweise besser, ein Bild oder ein Bild-Sprite zu verwenden.

Bilder für die Leistung optimieren

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

Zusammenfassung

• Wähle nicht einfach ein beliebiges Bildformat aus, sondern informiere dich über die verschiedenen verfügbaren Formate und verwende das am besten geeignete Format.
• Integrieren Sie Tools zur Bildoptimierung und -komprimierung in Ihren Workflow, um die Dateigröße zu reduzieren.
• Reduzieren Sie die Anzahl der HTTP-Anfragen, indem Sie häufig verwendete Bilder in Bild-Sprites platzieren.
• Um die anfängliche Seitenladezeit zu verbessern und die anfängliche Webseitengröße zu reduzieren, sollten Sie Bilder erst laden, wenn sie in den sichtbaren Bereich gescrollt wurden.

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 oder 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 im Browser mit dem canvas-Element erstellt werden. Mit zunehmender Bildgröße steigt auch die Dateigröße. Wenn Rasterbilder über ihre Originalgröße hinaus vergrößert werden, werden sie unscharf, da der Browser die fehlenden Pixel schätzen muss.

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

Bei der Auswahl des geeigneten Formats ist es wichtig, sowohl den Ursprung des Bildes (Raster oder Vektor) als auch den Inhalt (Farben, Animation, Text usw.) zu berücksichtigen. Es gibt kein Format, das für alle Bildtypen geeignet ist, und jedes hat seine eigenen Stärken und Schwächen.

Beachten Sie bei der Auswahl des geeigneten Formats die folgenden Richtlinien:

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

Dateigröße verringern

Sie können die Größe von Bilddateien erheblich reduzieren, indem Sie die Bilder nach dem Speichern „nachbearbeiten“. Es gibt eine Reihe von Tools für die Bildkomprimierung – verlustbehaftet und verlustfrei, online, GUI, Befehlszeile. Wenn möglich, solltest du die Bildoptimierung automatisieren, damit sie in deinen Workflow integriert ist.

Es gibt mehrere Tools, mit denen JPG- und PNG-Dateien weiter verlustfrei komprimiert werden können, ohne dass die Bildqualität beeinträchtigt wird. Für JPG können Sie jpegtran oder jpegoptim verwenden (nur unter Linux verfügbar; mit der Option „--strip-all“ ausführen). Für PNG können Sie OptiPNG oder PNGOUT verwenden.

Bild-Sprites verwenden

CSS-Spriting 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) und einen Versatz angeben, um den richtigen Teil anzuzeigen.

.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

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

Lazy Loading in Betracht ziehen

Durch Lazy Loading kann das Laden langer Seiten mit vielen Bildern „below the fold“ (mit Scrollen sichtbar) erheblich beschleunigt werden, da sie entweder nach Bedarf oder nach dem Laden und Rendern des primären Inhalts geladen werden. Neben Leistungsverbesserungen kann die Verwendung von Lazy Loading auch zu unendlichem Scrollen führen.

Seid vorsichtig, wenn ihr Seiten mit unendlichem Scrollen erstellt. Da Inhalte erst geladen werden, wenn sie sichtbar sind, sehen Suchmaschinen diese Inhalte möglicherweise nie. Außerdem sehen Nutzer, die nach Informationen suchen, die sie in der Fußzeile erwarten, die Fußzeile nie, weil immer neue Inhalte geladen werden.

Bilder vollständig vermeiden

Manchmal ist das beste Bild gar kein Bild. Verwenden Sie nach Möglichkeit die nativen Funktionen des Browsers, um dieselbe oder eine ähnliche Funktionalität bereitzustellen. Browser generieren visuelle Elemente, für die früher Bilder erforderlich gewesen wären. Das bedeutet, dass Browser keine separaten Bilddateien mehr herunterladen müssen, wodurch unschön skalierte Bilder vermieden werden. Sie können Unicode- oder spezielle Symbolschriftarten verwenden, um Symbole zu rendern.

Text im Markup platzieren, anstatt ihn in Bilder einzubetten

Text sollte nach Möglichkeit als Text und nicht in Bildern eingebettet sein. Wenn ihr beispielsweise Bilder für Überschriften verwendet oder Kontaktinformationen wie Telefonnummern oder Adressen direkt in Bilder einfügt, können Nutzer die Informationen nicht kopieren und einfügen. Außerdem sind die Informationen für Screenreader nicht zugänglich und nicht responsiv. Fügen Sie den Text stattdessen in Ihr Markup ein und verwenden Sie bei Bedarf Webfonts, um den gewünschten Stil zu erzielen.

Bilder mit CSS ersetzen

Moderne Browser können CSS-Funktionen verwenden, um Stile zu erstellen, für die früher Bilder erforderlich gewesen wären. Beispiel: Komplexe Farbverläufe können mit der Property background, Schatten mit box-shadow und abgerundete Ecken mit der Property border-radius erstellt werden.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta 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>

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