Heute werden wir über responsive Webbilder sprechen, ein sehr beliebtes und ziemlich problematisches Thema.

Wenn Sie dieses Thema suchen, finden Sie unzählige Artikel mit allen möglichen Erklärungen, aber ich werde diese nicht wiederholen und Ihnen etwas anderes beibringen.

Laden Sie Bilder korrekt, verbessern Sie Ihr SEO-Ranking und bieten Sie eine bessere Benutzererfahrung für Ihre Website.

Was sind responsive Bilder?

Responsive Bilder werden (sollten) sich automatisch an die Bildschirmgröße anpassen. Aber… ist das der richtige Weg? Nun, ja und nein. Wenn Sie dies googeln oder moderne Frameworks wie Bootstrap betrachten, werden Sie feststellen, dass deren Definition von “responsiven Bildern” ein einfaches CSS ähnlich wie dieses ist:

1max-width: 100%;
2height: auto;

Während das “funktioniert”, ist es nicht ganz korrekt. Es gibt mehrere Gründe dafür, aber der wichtigste ist die Bildgröße. Ich spreche nicht von der “Breite/Höhe” des Bildes, ich spreche von der tatsächlichen Bildgröße in Kilobyte/Megabyte.

Die meisten Websites (etwa 80% der Websites, die ich in all den Jahren gesehen habe), verwenden unglaublich große Bilder und “skalieren” sie einfach hoch und runter. Ein solches Bild reicht gewöhnlich von 1000px bis sogar 4000px, und ich habe sogar 8000px gesehen!!! (wie verrückt ist das).

Diese Bilder sind tendenziell sehr groß, von 1 MB bis 10 und sogar 20 MB. Ich habe sehr selten gesehen, dass Menschen ihre Bilder beim Exportieren komprimieren. Stellen Sie sich also vor, wenn Sie eine bildlastige Website mit 5, 10, 20 oder mehr Bildern haben und ein Benutzer Ihre Website auf dem Mobilgerät besucht. Selbst bei 5G ist das eine Menge Daten, die nur für die Bilder heruntergeladen werden müssen, ganz zu schweigen vom Rest.

Wie erstellt man responsive Bilder?

Browser helfen uns mit der Unterstützung von Image Source Sets (srcset). Mit dieser Funktion können wir effektiv mehrere Versionen des Bildes in verschiedenen Größen haben und der Browser wählt die richtige basierend auf der Bildschirmgröße. Das ist responsive!

Die meisten Menschen können jedoch aus verschiedenen Gründen nicht mit Image Source Sets umgehen, von “Ich habe keine Ahnung” bis “Ich verstehe es nicht” und vieles mehr.

Da die Technologie sich weiterentwickelt hat, können wir jetzt Online-Tools und APIs verwenden, um diese Source Sets automatisch zu erstellen. Aber nicht so schnell, automatisches Erstellen bedeutet nicht, dass Sie einfach das Ergebnis kopieren und einfügen können und erwarten, dass es richtig funktioniert.

Aus all meiner Arbeit und Tests gibt es keine “eine Lösung für alles” und es ist immer zusätzliche Arbeit erforderlich.

Die richtigen HTML-Tags für Bilder wählen

Dies ist das Erste und Wichtigste, das Sie verstehen müssen. Sie können das traditionelle <img />-Tag oder das moderne <picture>-Tag verwenden.

Jedes hat seine eigenen Fallstricke, aber aus meiner Erfahrung gewinnt <picture> immer. Dieses Tag wird von Browsern weitgehend unterstützt, das sollte also kein Problem sein.

Es gibt keinen automatischen Weg, die korrekten Größen (soweit ich weiß) für eine dynamische Website zu generieren. Nehmen Sie zum Beispiel das bekannte WordPress, es wird je nach hochgeladenem Bild und Platzierung unregelmäßige und falsche Größen generieren.

Verwendung von img-Tags

Die img -Tags sind auf der Mehrheit der Websites da draußen; für responsive Bilder werden die <img />-Tags mit dem srcset-Attribut kombiniert, aber ich kann Ihnen mit Sicherheit sagen, dass keines davon korrekt funktioniert.

Eines der Probleme ist, dass das <img />-Tag in einigen Browsern, beispielsweise Chrome, nicht korrekt funktioniert. Ich habe tatsächlich ein offenes Problem auf stackoverflow.com dazu, ohne Erklärung warum.

Ein weiteres Problem ist, dass es mühsam ist, das sizes-Attribut richtig hinzubekommen. Es gibt viele Artikel mit sehr stumpfen und unvollständigen Erklärungen, die ich ehrlich gesagt sehr frustrierend fand.

Damit werde ich die Verwendung von <img /> für responsive Bilder nicht besprechen, weil es meiner Meinung nach sinnlos ist.

Verwendung von picture-Tags

Die picture -Tags sind meiner Meinung nach die besten, sie ermöglichen es uns, den Browser zu manipulieren und anzuweisen, das gewünschte Bild zu laden.

Sie unterstützen auch viele andere Funktionen wie die Angabe der Art Direction, alternative Bildformate und mehr. Mit diesen netten Fähigkeiten können wir unser Ziel erreichen.

Kein Problem allerdings, es war Zeit für diesen Browser, dieses Jahr zu sterben .

Responsive Bilddimensionen generieren

Wie oben erwähnt, können wir viele Online-Tools verwenden, um die richtigen Bilder und den Quellcode für uns mit nur wenigen Klicks zu erstellen und zu generieren.

Ich empfehle Ihnen dieses zu verwenden: https://responsivebreakpoints.com/ als Ausgangspunkt. Das Tool wird Ihre Bilder in der Größe ändern und die Breakpoints generieren, um responsive Bilder zu haben.

Zum Beispiel wird das Hundebild auf deren Website mehrere verschiedene Bilder in verschiedenen Größen und den entsprechenden HTML-Code haben:

 1<picture>
 2
 3<source
 4		media="(max-width: 767px)"
 5		sizes="(max-width: 1534px) 100vw, 1534px"
 6		srcset="
 7		dog_ar_1_1,c_fill,g_auto__c_scale,w_200.jpg 200w,
 8		dog_ar_1_1,c_fill,g_auto__c_scale,w_493.jpg 493w,
 9		dog_ar_1_1,c_fill,g_auto__c_scale,w_707.jpg 707w,
10		dog_ar_1_1,c_fill,g_auto__c_scale,w_877.jpg 877w,
11		dog_ar_1_1,c_fill,g_auto__c_scale,w_1032.jpg 1032w,
12		dog_ar_1_1,c_fill,g_auto__c_scale,w_1108.jpg 1108w,
13		dog_ar_1_1,c_fill,g_auto__c_scale,w_1259.jpg 1259w,
14		dog_ar_1_1,c_fill,g_auto__c_scale,w_1353.jpg 1353w,
15		dog_ar_1_1,c_fill,g_auto__c_scale,w_1468.jpg 1468w,
16		dog_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
17<source
18		media="(min-width: 768px) and (max-width: 991px)"
19		sizes="(max-width: 1983px) 70vw, 1388px"
20		srcset="
21		dog_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
22		dog_ar_4_3,c_fill,g_auto__c_scale,w_793.jpg 793w,
23		dog_ar_4_3,c_fill,g_auto__c_scale,w_1004.jpg 1004w,
24		dog_ar_4_3,c_fill,g_auto__c_scale,w_1198.jpg 1198w,
25		dog_ar_4_3,c_fill,g_auto__c_scale,w_1238.jpg 1238w,
26		dog_ar_4_3,c_fill,g_auto__c_scale,w_1384.jpg 1384w,
27		dog_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
28<source
29		media="(min-width: 992px) and (max-width: 1199px)"
30		sizes="(max-width: 2400px) 60vw, 1440px"
31		srcset="
32		dog_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
33		dog_ar_16_9,c_fill,g_auto__c_scale,w_877.jpg 877w,
34		dog_ar_16_9,c_fill,g_auto__c_scale,w_1086.jpg 1086w,
35		dog_ar_16_9,c_fill,g_auto__c_scale,w_1314.jpg 1314w,
36		dog_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
37<img
38		sizes="(max-width: 7000px) 40vw, 2800px"
39		srcset="
40		dog_c_scale,w_480.jpg 480w,
41		dog_c_scale,w_713.jpg 713w,
42		dog_c_scale,w_1036.jpg 1036w,
43		dog_c_scale,w_1180.jpg 1180w,
44		dog_c_scale,w_1313.jpg 1313w,
45		dog_c_scale,w_1433.jpg 1433w,
46		dog_c_scale,w_1606.jpg 1606w,
47		dog_c_scale,w_1748.jpg 1748w,
48		dog_c_scale,w_1884.jpg 1884w,
49		dog_c_scale,w_2015.jpg 2015w,
50		dog_c_scale,w_2133.jpg 2133w,
51		dog_c_scale,w_2260.jpg 2260w,
52		dog_c_scale,w_2377.jpg 2377w,
53		dog_c_scale,w_2345.jpg 2345w,
54		dog_c_scale,w_1871.jpg 1871w,
55		dog_c_scale,w_2800.jpg 2800w"
56		src="dog_c_scale,w_2800.jpg"
57		alt="">
58</picture>

Beachten Sie, wie viele Bildschirmdimensionen es für uns abdeckt, cool oder? Aber ist es gut genug, es einfach auf Ihre Website zu kopieren? NEIN.

Das größte Problem mit diesen Image Source Sets sind die Attribute sizes und media. Es ist ziemlich kompliziert zu verstehen und noch komplizierter, es richtig zum Laufen zu bringen.

Damit müssen Sie den Code kürzer und verständlicher machen. Auf meiner Website (die, die Sie gerade lesen) habe ich die allgemeinen responsiven Breakpoints von Bootstrap verwendet und meine eigenen Sets erstellt.

Erstellen Sie responsive Bilddimensionen selbst

Die beste (und ehrlich gesagt einzige Lösung) ist, die Bild-Tags selbst zu erstellen.

Das funktioniert gut, wenn Sie eine maßgeschneiderte Website von Grund auf entwickeln, aber wenn Sie etwas wie WordPress haben, ist das eine andere Geschichte und es wird einen weiteren Artikel dazu geben.

Als Ausgangspunkt brauchte ich eine klare und einfache Möglichkeit, Geräte-Breakpoints zu verstehen; also habe ich die von Bootstrap bereitgestellten verwendet, die äußerst zuverlässig sind:

BreakpointGerätDimension
X-SmallKleine Geräte (Hochformat-Handys, unter 576px)<576px
SmallKleine Geräte (Querformat-Handys, ab 576px)≥576px
MediumMittlere Geräte (Tablets, ab 768px)≥768px
LargeGroße Geräte (Desktops, ab 992px)≥992px
Extra largeGroße Geräte (große Desktops, ab 1200px)≥1200px
Extra extra largeGroße Geräte (größere Desktops, ab 1400px)≥1400px

Mit dem Obigen habe ich meine “eigenen” Image Source Sets erstellt, die das entsprechende Bild gemäß den obigen Gerätegrößen laden:

 1<picture>
 2
 3<source srcset="" media="(min-width: 1400px)">
 4<source srcset="" media="(min-width: 1200px)">
 5<source srcset="" media="(min-width: 992px)">
 6<source srcset="" media="(min-width: 768px)">
 7<source srcset="" media="(min-width: 576px)">
 8<source srcset="" media="(min-width: 320px)">
 9<img src="" width="" height="" class="" alt="" >
10</picture>

Dies gibt mir eine klare Übersicht und Verständnis dessen, was passieren soll und wie. Mit anderen Worten, ich weiß, welches Bild auf jedem Gerät geladen werden soll und es wird so funktionieren.

Obwohl dies einsatzbereit erscheint, ist es noch nicht ganz fertig. Das Laden dieser Bilder auf einem bestimmten Gerät reicht nicht aus, weil das Bild immer noch zu groß sein könnte.

Beispiel 1:

  • Auf einem großen Gerät (große Desktops, 1200px und höher) hat Ihr Container, in dem Sie das Image-Set einbetten, eine feste Größe von 800px
  • Der Browser betrachtet Ihren Viewport, der beispielsweise 1920px beträgt, und lädt das 1400px große Bild (wenn Sie tatsächlich die 768px Bildgröße bräuchten…)

Beispiel 2:

  • Auf jedem Gerät hat Ihr Container, in dem Sie das Image-Set einbetten, eine feste Größe von 400px (das kann z.B. eine Karte oder eine einfache Box sein)
  • Der Browser betrachtet Ihren Viewport, der beispielsweise 1920px beträgt, und lädt das 1400px große Bild (wenn Sie tatsächlich die 320px Bildgröße bräuchten…)

Damit laden Sie das falsche Bild, das kostet Sie und Ihren Benutzer. Erstens verlieren Sie Geschwindigkeit (was übrigens Ihr SEO-Ranking beeinflusst) und dann wartet Ihr Benutzer ewig auf das Laden des Bildes, wenn er auf einem Mobilgerät oder mit langsamer Bandbreite ist.

Die richtige Lösung ist, Ihren Container zu untersuchen, in dem Sie das Bild einbetten, und die richtige Größe dafür zu bestimmen.

Sie können dies sehr einfach tun, indem Sie die Seite inspizieren und verschiedene Geräte emulieren; Container bleiben normalerweise mehr oder weniger gleich.

Also habe ich für das obige Beispiel 1 meinen Code wie folgt angepasst:

1<picture>
2
3<source srcset="" media="(min-width: 1200px), (min-width: 1400px), (min-width: 2500px)">
4<source srcset="" media="(min-width: 992px)">
5<source srcset="" media="(min-width: 768px)">
6<source srcset="" media="(min-width: 576px)">
7<source srcset="" media="(min-width: 320px)">
8<img src="" width="" height="" class="" alt="">
9</picture>

Was bedeutet das? Es ist ziemlich selbsterklärend, aber ich werde es trotzdem erklären:

  • Auf einem Gerät mit mindestens 320px Breite, lade das 320px Bild
  • Auf einem Gerät mit mindestens 576px Breite, lade das 576px Bild
  • Auf einem Gerät mit mindestens 768px Breite, lade das 768px Bild
  • Auf einem Gerät mit mindestens 992px Breite, lade das 992px Bild
  • Auf einem Gerät mit mindestens 1200px ODER 1400px ODER 2500px Breite, lade das 1200px Bild

Die letzte Zeile stellt sicher, dass der Browser keine größere Bildgröße lädt, wenn die Containergröße nur 800px beträgt (oder 1200px in meinem Fall, wenn Sie den Artikel erweitern)

Ich finde das Obige nahezu perfekt in Bezug auf das Laden der richtigen Bildgröße. Sogar Google Pagespeed gefällt es und generiert keine Warnungen, da wir die richtige Bildgröße laden.

Testen Ihrer responsiven Bilder

Ich bin mir ziemlich sicher, dass Sie nach dem Lesen des Obigen eine allgemeine Vorstellung haben, wie Sie testen können, ob Ihre Bilder korrekt geladen werden, aber ich werde es trotzdem erklären.

Der Testprozess kann entmutigend sein, wenn Sie viele Bilder haben, aber es lohnt sich.

Was Sie tun müssen, ist einfach, es braucht nur etwas Zeit:

  • Öffnen Sie Ihren gewünschten Browser und laden Sie Ihre Seite
  • Öffnen Sie die Entwicklertools und gehen Sie zum Netzwerk-Tab und wählen Sie nur den “Bilder”-Filter
  • Aktualisieren Sie Ihre Seite über verschiedene Geräte (Mobil, Tablets usw.) und sehen Sie, welche Bilder geladen werden

Das ist wirklich alles, nichts Ausgefallenes.

Tipps und Tricks

  • Wenn Sie viele Bilder haben (mehr als einen Header), verwenden Sie das Attribut loading=lazy. Sie können mehr darüber hier lesen.
  • Wenn Sie Ihre Bilder nicht selbst exportieren/verkleinern können, können Sie Online-Dienste dafür nutzen. Sie bieten auch CDN an, das Ihre Bilder extrem schnell lädt. Ich empfehle Cloudflare Images .
  • Benennen Sie Ihre Bilder richtig, das ist sehr wichtig. Wenn Sie Ihre Bilder nicht richtig benennen (wie image-small.jpg oder image-320.jpg), können Sie beim Testen nicht leicht herausfinden, welches Bild geladen wird.

Das war’s, ich hoffe dieser Artikel hat Ihnen geholfen.