Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Bilder

Ein Bild sagt mehr als 1000 Worte, und Bilder spielen eine sehr wichtige Rolle auf jeder einzelnen Seite. Leider stellen sie aber ebenso einen Großteil des Volumens dar, das heruntergeladen wird. Mit einem responsiven Webdesign können sich nicht nur unsere Layouts Gerätecharakteristiken anpassen, sondern ebenso die Bilder.

Responsive Bilder

Mit responsivem Webdesign können sich nicht nur unsere Layouts Gerätecharakteristiken anpassen, sondern ebenso die Inhalte. So sind zum Beispiel auf Anzeigen mit hoher Auflösung (2x) Grafiken mit hoher Auflösung nötig, um eine scharfe Darstellung zu gewährleisten. Ein Bild, das 50 % der Breite einnimmt, ist gut geeignet, wenn der Browser 800 Pixel in der Breite aufweist. So ein Bild belegt auf einem Telefon mit kleinem Display jedoch zu viel Platz und verursacht darüber hinaus die gleiche Belastung der Bandbreite, wenn es zur Anzeige auf kleineren Bildschirmen herunterskaliert wird.

Art Direction

Beispiel für Art Direction

In anderen Fällen sind möglicherweise noch drastischere Änderungen erforderlich: Änderung der Proportionen, Zuschneiden und sogar der Austausch des gesamten Bilds. In solchen Fällen wir der Prozess zur Änderung des Bilds in der Regel als Art Direction bezeichnet. Weitere Beispiele finden Sie unter responsiveimages.org/demos/.

Responsive Images

Did you know that images account for more than 60% of the bytes on average needed to load a web page?

In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device.

Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.

This is a free course offered through Udacity

Take Course

Bilder im Markup

Das img-Element erfüllt viele Funktionen. Es lädt Inhalte herunter, decodiert sie und zeigt sie an. Darüber hinaus unterstützen moderne Browser eine große Anzahl an Bildformaten. Die Nutzung von Bildern, die auf allen Geräten funktionieren, unterscheidet sich im Vergleich zu Desktopcomputern nicht. Es sind lediglich ein paar kleinere Handgriffe nötig, um eine gute Erfahrung zu gewährleisten.

TL;DR

  • Nutzen Sie relative Größen für Bilder, um zu verhindern, dass diese sich versehentlich über die Container-Grenzen hinweg erstrecken.
  • Verwenden Sie das picture-Element, wenn Sie verschiedene Bilder auf Grundlage von Gerätecharakteristiken festlegen, auch Art Direction genannt.
  • Verwenden Sie srcset und den x-Deskriptor im img-Element, um den Browser darauf hinzuweisen, welches das am besten geeignete Bild bei der Auswahl aus verschiedenen Pixeldichten ist.

Relative Größen für Bilder verwenden

Denken Sie daran, relative Größen zu nutzen, wenn Sie Breiten für Bilder festlegen, um zu verhindern, dass sie sich über die Grenzen des Darstellungsbereichs hinweg erstrecken. So bleibt die Bildgröße bei width: 50% stets bei 50 % des Container-Elements - nicht des Darstellungsbereichs oder der tatsächlichen Pixelgröße.

Da es die CSS-Syntax zulässt, dass sich Inhalte über Container-Grenzen hinweg erstrecken, kann es erforderlich sein, die Angabe max-width: 100% einzufügen, damit Bilder und andere Inhalte innerhalb des Containers bleiben. Beispiel:

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

Achten Sie darauf, dem alt-Attribut des img-Elements aussagekräftige Beschreibungen hinzuzufügen. Hierdurch wird Ihre Website zugänglicher, denn die Beschreibungen bieten einer Bildschirmsprachausgabe und anderen Hilfstechnologien Kontext.

Bilddarstellung mit srcset auf Geräten mit hohem DPI-Wert verbessern

Das srcset-Attribut erweitert das img-Element, indem es dafür sorgt, dass auf einfache Weise mehrere Bilddateien für verschiedene Gerätecharakteristiken bereitgestellt werden können. Ähnlich wie die native CSS-Funktion image-set erlaubt srcset Browsern, abhängig von den Charakteristiken des jeweiligen Geräts das beste Bild auszuwählen, zum Beispiel ein 2x-Bild für ein 2x-Display, und in Zukunft möglicherweise auch ein 1x-Bild für ein 2x-Gerät, wenn nur eine geringe Bandbreite zur Verfügung steht.

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

Browser, die srcset nicht unterstützen, nutzen einfach die Standardbilddatei, die im src-Attribut festgelegt ist. Aus diesem Grund ist es wichtig, immer ein 1x-Bild zur Verfügung zu stellen, das auf allen Geräten unabhängig von jeglichen Funktionen angezeigt werden kann. Bei srcset-Unterstützung wird die kommagetrennte Liste mit Bild/Bedingungen vor dem Senden von Anfragen analysiert und nur das am besten geeignete Bild heruntergeladen und angezeigt.

Während die Bedingungen viele verschiedene Elemente wie Pixeldichte, Breite und Höhe enthalten können, ist aktuell nur die Unterstützung der Pixeldichte weit verbreitet. Der beste Kompromiss zwischen aktuellem Verhalten und künftigen Funktionen ist es, einfach das 2x-Bild im Attribut anzugeben.

Art Direction in responsiven Bildern mit picture

Das Ändern von Bildern auf Grundlage von Gerätecharakteristiken ist auch als Art Direction bekannt und kann mithilfe des picture-Elements bewerkstelligt werden. Das picture-Element definiert eine deklarative Lösung für die Bereitstellung verschiedener Versionen eines Bilds auf Grundlage verschiedener Charakteristiken wie Gerätegröße, Geräteauflösung, Ausrichtung usw.

Beispiel für Art Direction

Das picture-Element sollte verwendet werden, wenn eine Bildquelle mit verschiedenen Pixeldichten verfügbar ist oder ein responsives Design nach leicht unterschiedlichen Bildern auf einigen Bildschirmarten verlangt. Ähnlich wie beim video-Element können mehrere source-Elemente verwendet werden, wodurch abhängig von Medienabfragen oder dem Bildformat die Angabe verschiedener Bilddateien möglich wird.

<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>

Im vorherigen Beispiel wird bei einer Browserbreite von mindestens 800 Pixeln entweder head.jpg oder head-2x.jpg verwendet, abhängig von der Auflösung des Geräts. Wenn der Browser zwischen 450 und 800 Pixeln breit ist, kommt entweder head-small.jpg oder head-small-2x.jpg zum Einsatz, wieder abhängig von der Auflösung des Geräts. Für Bildschirmbreiten mit weniger als 450 Pixeln und Rückwärtskompatibilität, bei denen das picture-Element nicht unterstützt wird, stellt der Browser stattdessen das img-Element dar, das immer verwendet werden sollte.

Bilder mit relativer Größe

Wenn die endgültige Größe des Bilds nicht bekannt ist, kann es schwierig sein, einen Deskriptor für die Pixeldichte der Bildquellen anzugeben. Dies gilt vor allem für Bilder, die sich über eine proportionale Breite des Browsers erstrecken und abhängig von der Größe des Browsers frei verschiebbar sind.

Statt eine feste Größe und Pixeldichte für Bilder festzulegen, kann die Größe aller bereitgestellten Bilder über das Hinzufügen eines Breitendeskriptors zusammen mit der Größe des Bildelements angegeben werden. 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">

Im vorherigen Beispiel wird ein Bild dargestellt, das die Hälfte der Breite des Darstellungsbereichs (sizes=50vw) aufweist. Abhängig von der Breite des Browsers und seinem Gerätepixelverhältnis wird ihm ermöglicht, das richtige Bild unabhängig davon auszuwählen, wie groß das Browserfenster ist. In der folgenden Tabelle ist zu sehen, welches Bild er Browser auswählen würde:

Browserbreite Gerätepixelverhältnis Verwendetes Bild Effektive Auflösung
400 px 1 200.png 1x
400 px 2 400.png 2x
320 px 2 400.png 2,5x
600 px 2 800.png 2,67x
640 px 3 1000.png 3,125x
1100 px 1 1400.png 1,27x

Übergangspunkte in responsiven Bildern berücksichtigen

In vielen Fällen ändert sich die Größe oder das Bild abhängig von den Layoutübergangspunkten der Website. So kann es bei kleinen Bildschirmen wünschenswert sein, die volle Breite des Darstellungsbereichs mit einem Bild abzudecken, während auf größeren Bildschirmen nur ein kleiner proportionaler Teil genutzt werden 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">

Das sizes-Attribut im vorherigen Beispiel nutzt mehrere Medienabfragen, um die Größe des Bilds festzulegen. Wenn die Breite des Browsers über 600 Pixeln liegt, wird das Bild mit 25 % der Breite des Darstellungsbereichs angezeigt. Bei einer Breite zwischen 500 und 600 Pixeln nimmt es 50 % der Breite des Darstellungsbereichs ein. Unter 500 Pixeln wird die volle Breite in Anspruch genommen.

Produktbilder maximierbar machen

Kunden möchten sehen, was sie kaufen. Auf Einzelhändler-Websites erwarten Nutzer, sich Nahaufnahmen von Produkten in hoher Auflösung ansehen zu können, um einen besseren Eindruck von Einzelheiten zu bekommen. Studienteilnehmer wurden frustriert, wenn sie dazu keine Gelegenheit erhielten.

Website von J. Crews mit maximierbarem Produktbild
Website von J. Crews mit maximierbarem Produktbild

Ein gutes Beispiel für ein maximierbares Bild, das angetippt werden kann, lässt sich auf der Website von J. Crew finden. Ein Overlay, das verschwindet, gibt einen Hinweis darauf, dass das Bild angetippt werden kann. Beim Antippen erhält der Nutzer anschließend ein gezoomtes Bild, auf dem Einzelheiten betrachtet werden können.

Andere Bildmethoden

Komprimierte Bilder

Die Methode für Komprimierte Bilder stellt ein stark komprimiertes 2x-Bild für alle Geräte bereit, unabhängig von den tatsächlichen Funktionen des Geräts. Abhängig vom Bildtyp und der Komprimierungsstufe ist möglicherweise keine Veränderung am Bild wahrnehmbar, die Dateigröße verringert sich jedoch beträchtlich.

Siehe Beispiel

JavaScript-Bildersetzung

Die JavaScript-Bildersetzung prüft die Funktionen des Geräts und entscheidet sich dann für das passende Bild. Sie können das Gerätepixelverhältnis mithilfe von window.devicePixelRatio ermitteln, die Bildschirmhöhe und -breite abrufen und mit navigator.connection oder einer Fake-Anfrage möglicherweise sogar mehr über die Netzwerkverbindung herausfinden. Nachdem Sie diese Informationen gesammelt haben, können Sie entscheiden, welches Bild geladen werden soll.

Ein großer Nachteil dieses Ansatzes ist, dass das Bild bei der Verwendung von JavaScript erst dann geladen wird, wenn zumindest der look-ahead-Parser durchlaufen wurde. Das bedeutet, dass der Ladevorgang für das Bild nicht einmal gestartet wird, bis das pageload-Ereignis ausgelöst wurde. Zudem lädt der Browser mit hoher Wahrscheinlichkeit sowohl die 1x- als auch die 2x-Varianten des Bilds herunter, wodurch die Seite zusätzlich Speicher belegt.

Bilder in CSS

Die CSS-Eigenschaft background ist ein leistungsstarkes Tool für das Hinzufügen von komplexen Bildern zu Elementen. Es können damit mehrere Bilder hinzugefügt und vervielfältigt werden und vieles mehr. Wenn die Eigenschaft zusammen mit Medienabfragen genutzt wird, ergeben sich sogar noch weitere Möglichkeiten. So können Bilder nur unter bestimmten Bedingungen auf Grundlage von Bildschirmauflösung, Größe des Darstellungsbereichs oder anderen Faktoren geladen werden.

TL;DR

  • Verwenden Sie das am besten zu den Charakteristiken der Anzeige passende Bild. Berücksichtigen Sie die Bildschirmgröße, die Geräteauflösung und das Seitenlayout.
  • Ändern Sie für Anzeigen mit hohem DPI-Wert die background-image-Eigenschaft in CSS, indem Sie Medienabfragen mit min-resolution und -webkit-min-device-pixel-ratio verwenden.
  • Verwenden Sie srcset zur Bereitstellung von Bildern mit hoher Auflösung zusätzlich zu den 1x-Bildern im Markup.
  • Berücksichtigen Sie den Berechnungsaufwand beim Einsatz von JavaScript-Methoden zum Ersetzen von Bildern oder der Bereitstellung von stark komprimierten Bildern mit hoher Auflösung auf Geräten mit geringerer Auflösung.

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

Medienabfragen wirken sich nicht nur auf das Seitenlayout aus, sondern können auch dazu genutzt werden, Bilder unter bestimmten Bedingungen zu laden oder Art Direction auf Grundlage der Breite des Darstellungsbereichs bereitzustellen.

So wird im folgenden Beispiel für kleinere Bildschirme nur small.png heruntergeladen und auf die Inhalte des div-Containers angewendet, während für größere background-image: url(body.png) auf den Hauptteil und background-image: url(large.png) auf den Inhalt im div-Container angewendet wird.

.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);
  }
}

image-set zur Bereitstellung von Bildern mit hoher Auflösung verwenden

Die CSS-Funktion image-set() erweitert die Funktionalität der background-Eigenschaft, sodass die Bereitstellung mehrerer Bilddateien für verschiedene Gerätecharakteristiken problemlos bewerkstelligt werden kann. Damit kann der Browser das für die Charakteristiken des jeweiligen Geräts am besten geeignete Bild auswählen, etwa ein 2x-Bild für ein 2x-Display oder ein 1x-Bild für ein 2x-Gerät, falls nur eine geringe Bandbreite zur Verfügung steht.

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

Der Browser lädt das richtige Bild nicht nur, sondern skaliert es auch entsprechend. Anders ausgedrückt: Der Browser geht davon aus, dass 2x-Bilder doppelt so groß wie 1x-Bilder sind und reduziert das 2x-Bild um den Faktor 2, sodass das Bild in der gleichen Größe auf der Seite erscheint.

Die Unterstützung für image-set() ist relativ neu und wird aktuell nur von Chrome und Safari mit dem Anbieterpräfix -webkit unterstützt. Darüber hinaus muss Sorge dafür getragen werden, dass ein Ersatzbild zur Verfügung steht, 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  
  );
}

Im vorherigen Beispiel wird das passende Element in Browsern, die image-set unterstützen, und ansonsten das 1x-Element geladen. Das Problem hierbei ist natürlich, dass in den meisten Browsern das 1x-Element geladen wird, solange die image-set()-Unterstützung bei Browsern gering ist.

Medienabfragen für die Bereitstellung von Bildern mit hoher Auflösung oder Art Direction verwenden

Medienabfragen können Regeln auf Grundlage des Gerätepixelverhältnisses erstellen, womit verschiedene Bilder für 2x- und 1x-Displays festgelegt werden können.

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

Chrome, Firefox und Opera unterstützen alle standardmäßig (min-resolution: 2dppx), während Safari und Android-Browser beide die ältere Syntax mit Anbieterpräfix ohne dppx-Einheit benötigen. Denken Sie daran, dass diese Stile nur dann geladen werden, wenn das Gerät der Medienabfrage entspricht, und Sie Stile für den Grundfall festlegen müssen. Dies hat den Vorteil, dass eine Darstellung auch in dem Fall gewährleistet ist, dass 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);
  }
}

Sie können auch die min-width-Syntax nutzen, um abhängig von der Größe des Darstellungsbereichs alternative Bilder anzeigen zu lassen. Der Vorteil bei dieser Methode ist, dass das Bild nicht heruntergeladen wird, wenn keine Übereinstimmung mit der Medienabfrage gegeben ist. So wird bg.png nur dann heruntergeladen und auf das body-Element angewendet, wenn die Browserbreite mindestens 500 Pixel beträgt:

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

SVG für Symbole verwenden

Wenn Sie Ihrer Seite Symbole hinzufügen, sollten Sie falls möglich SVG-Symbole oder gegebenenfalls Unicode-Zeichen verwenden.

TL;DR

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

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 immer gut aus, egal, wie klein oder groß sie auf dem Bildschirm dargestellt werden.

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

Unicode-Zeichen werden wie benannte Zeichen verwendet: &#XXXX, wobei XXXX der Zahl des Unicode-Zeichens entspricht. Beispiel:

Du bist ein echter &#9733;

Du bist ein echter ★

Komplexe Symbole durch SVG ersetzen

Für komplexere Symbolanforderungen eignen sich SVG-Symbole. Sie sind in der Regel simpel, nutzerfreundlich und können mit CSS gestaltet werden. SVG bietet im Vergleich zu Rasterbildern folgende Vorteile:

  • Die Vektorgrafiken lassen sich unendlich skalieren.
  • CSS-Effekte wie Farbe, Schattierung, Transparenz und Animationen sind unkompliziert.
  • SVG-Bilder können in direkt in das Dokument integriert werden.
  • Die Vektorgrafiken sind semantisch.
  • Mit den passenden Attributen sind sie besser zugänglich.

 

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">.

Symbolschriften mit Vorsicht verwenden

Symbolschriften sind zwar beliebt und leicht anwendbar, einige bergen jedoch im Vergleich zu SVG-Symbolen Nachteile.

  • Es handelt sich um Vektorgrafiken, die unendlich skalierbar sind. Es kann jedoch zu einer Kantenglättung kommen, in deren Folge die Symbole nicht so scharf dargestellt werden wie erwartet.
  • Die Gestaltungsmöglichkeiten mit CSS sind begrenzt.
  • Die perfekte Positionierung der Pixel kann schwierig sein, je nach Zeilenhöhe, Buchstabenabstand usw.
  • Sie sind nicht semantisch und die Verwendung mit Screenreadern oder anderen Bedienungshilfen kann sich als schwierig erweisen.
  • Wenn der Bereich nicht ordnungsgemäß festgelegt ist, kann die Datei riesig werden, obwohl nur eine kleine Teilmenge der verfügbaren Symbole verwendet wird.

Beispiel einer Seite, die Font Awesome für die Schriftartensymbole verwendet

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>).

Es gibt Hunderte kostenloser und kostenpflichtiger Symbolschriften, darunter Font Awesome, Pictos und Glyphicons.

Achten Sie darauf, dass die Last der zusätzlichen HTTP-Anfrage und Dateigröße mit dem Symbolbedarf im Verhältnis steht. Wenn Sie zum Beispiel nur eine Handvoll Symbole benötigen, ist ein Bild oder Sprite unter Umständen die bessere Wahl.

Bilder auf Leistung optimieren

Bilder belegen in der Regel die meiste Bandbreite und darüber hinaus oft auch einen großen Teil des visuellen Bereichs einer Seite. Aus diesem Grund kann die Bandbreite oft durch die Optimierung von Bildern am besten entlastet und so die Leistung Ihrer Website erhöht werden: Je weniger der Browser herunterladen muss, desto weniger Bandbreitebelastung entsteht, wodurch der Browser sämtliche Inhalte schneller herunterladen und anzeigen kann.

TL;DR

  • Verwenden Sie nicht einfach irgendein Bildformat. Setzen Sie sich mit den verschiedenen verfügbaren Formaten auseinander und nutzen Sie das am besten geeignete.
  • Nehmen Sie Schritte zur Bildoptimierung und -komprimierung in Ihren Prozess auf, um die Größe der Dateien zu reduzieren.
  • Reduzieren Sie die Anzahl an HTTP-Anfragen, indem Sie häufig genutzte Bilder in Bild-Sprites platzieren.
  • Ziehen Sie in Betracht, Bilder erst dann laden zu lassen, wenn sie sichtbar sind. So kann die Seite schneller geladen werden und belegt zu Anfang weniger Speicher.

Das richtige Format wählen

Es bestehen zwei relevante Bildtypen: Vektorbilder and Rasterbilder. Für Rasterbilder muss zudem das richtige Kompressionsformat gewählt werden, etwa GIF, PNG oder JPG.

Rasterbilder sind zum Beispiel Fotos und andere Bilder, die aus einem Raster einzelner Punkte oder Pixel bestehen. Sie stammen in der Regel von einer Kamera oder einem Scanner oder können in einem Browser mithilfe des canvas-Elements erstellt werden. Je größer das Bild, desto größer auch die Dateigröße. Wenn Rasterbilder hochskaliert werden, werden Sie verschwommen, da der Browser nicht weiß, womit die fehlenden Pixel aufgefüllt werden sollen.

Vektorbilder wie Logos und Grafiken werden durch eine Anzahl an Kurven, Linien, Formen und Füllfarben definiert. Vektorbilder können mit Programmen wie Adobe Illustrator oder Inkscape erstellt und in einem Vektorformat wie SVG gespeichert werden. Da Vektorbilder auf einfachen Grundtypen basieren, können sie beliebig skaliert werden, ohne dass sich die Qualität oder Dateigröße ändert.

Beim Auswählen des Formats ist es wichtig, sowohl den Ursprung des Bilds - Raster oder Vektor - als auch die Inhalte - Farben, Animation, Text usw. - zu berücksichtigen. Ein Format stellt niemals die Ideallösung für sämtliche Bildtypen dar. Jedes hat seine Stärken und Schwächen.

Orientieren Sie sich an den folgenden Richtlinien, wenn Sie das Format wählen:

  • Verwenden Sie JPG für Fotos.
  • Verwenden Sie SVG für Vektorgrafiken und Grafiken mit Volltonfarbe wie etwa Logos.
  • Verwenden Sie WebP oder PNG, falls Vektorgrafiken nicht zur Verfügung stehen.
  • Verwenden Sie PNG statt GIF, da das Format mehr Farben unterstützt und eine bessere Kompression bietet.
  • Verwenden Sie für längere Animationen das <video>-Element, da dieses eine bessere Bildqualität und Funktionen zur Wiedergabesteuerung auf Nutzerseite bietet.

Dateigröße reduzieren

Die Dateigröße von Bildern kann stark reduziert werden, indem sie nach dem Speichern zusätzlich komprimiert werden. Es besteht eine große Auswahl an Tools zur Bildkompression: verlustbehaftete und verlustfreie, online, GUI, Befehlszeile. Wann immer möglich sollte die Bildoptimierung automatisch erfolgen, damit sie problemlos in Ihren Prozess integriert werden kann.

Viele Tools bieten die Möglichkeit, eine weitere, verlustfreie Komprimierung für JPG- und PNG-Dateien vorzunehmen, was sich nicht weiter auf die Bildqualität auswirkt. Für JPG kann jpegtran oder jpegoptim verwendet werden. Diese Programme stehen nur unter Linux zur Verfügung und sollten mit der Option --strip-all ausgeführt werden. Für PNG kann OptiPNG oder PNGOUT verwendet werden.

Bild-Sprites verwenden

CSS-Spriting ist eine Methode, bei der eine Anzahl an Bildern zu einem einzelnen Sprite-Block zusammengefügt wird. Einzelne Bilder können anschließend verwendet werden, indem das Hintergrundbild - der Sprite-Block - für ein Element angegeben und um eine Positionsangabe ergänzt wird, damit der richtige Abschnitt erscheint.

Im Beispiel verwendeter Sprite-Block

.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;
}

Spriting hat den Vorteil, dass die Anzahl an einzelnen Downloads reduziert wird, die bei mehreren Bildern anfallen, während eine Zwischenspeicherung weiterhin möglich ist.

Lazy Loading in Betracht ziehen

Lazy Loading kann die Ladezeiten für lange Seiten mit vielen Bildern, die nur beim Scrollen sichtbar werden, stark reduzieren, indem Bilder entweder nur bei Bedarf oder erst dann geladen werden, wenn die Hauptinhalte fertig heruntergeladen und dargestellt wurden. Zusätzlich zur Leistungsverbesserung kann Lazy Loading Erfahrungen bieten, bei denen unbegrenztes Scrollen möglich ist.

Achten Sie beim Erstellen von Seiten mit unbegrenztem Scrollen jedoch darauf, dass Inhalte erst dann geladen werden, wenn sie sichtbar werden. Suchmaschinen finden diese Inhalte möglicherweise nicht. Zudem bekommen Nutzer, die nach Informationen in der Fußzeile suchen, diese nie zu Gesicht, da ständig weitere Inhalte geladen werden.

Bilder nach Möglichkeit vermeiden

Manchmal ist es besser, Bilder gar nicht zu nutzen. Verwenden Sie wann immer möglich die nativen Funktionen des Browsers, um gleiche oder ähnliche Funktionalität bereitzustellen. Browser bieten heute optische Möglichkeiten, für die früher Bilder notwendig gewesen währen. So müssen Browser keine separaten Bilddateien mehr herunterladen und es besteht keine Gefahr, dass falsch skalierte Bilder erscheinen. Symbole können mithilfe von Unicode oder speziellen Symbolschriftarten dargestellt werden.

TL;DR

  • Verzichten Sie wann immer möglich auf Bilder und nutzen Sie stattdessen Browserfunktionen für Schatten, Farbverläufe, abgerundete Ecken usw.

Text in Markup statt auf eingebetteten Bildern platzieren

Wann immer möglich sollte Text in Text und nicht in Bilder eingebettet sein, wie etwa bei der Nutzung von Bildern für Titel oder Kontaktinformationen wie Telefonnummern und Adressen. Von Bildern können Nutzer die Informationen nicht kopieren und einfügen, außerdem ist der Text für eine Bildschirmsprachausgabe nicht verfügbar und auch nicht responsiv. Fügen Sie den Text stattdessen in Ihr Markup ein und verwenden Sie bei Bedarf Webschriftarten, um den gewünschten Stil umzusetzen.

CSS als Bildersatz verwenden

Moderne Browser können auf CSS-Funktionen zurückgreifen, um Stile zu erschaffen, für die zuvor Bilder erforderlich waren. So können mit der background-Eigenschaft komplexe Farbverläufe erstellt und mit der box-shadow-Eigenschaft Schatten und der border-radius-Eigenschaft abgerundete Ecken hinzugefügt 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 bei diesen Verfahren Renderingzyklen anfallen, deren Berechnung für Mobilgeräte ein Problem darstellen kann. Bei einer übermäßigen Inanspruchnahme gehen die Vorteile verloren und die Leistung wird möglicherweise zusätzlich beeinträchtigt.