Planung für responsive Bilder

Als ich ein Bild zum ersten Mal responsiv gemacht habe, war es so einfach wie das Codieren dieser vier Zeilen

img {
  max-width: 100%;
  height auto; /* default */
}

Obwohl das für mich als Entwickler funktionierte, war es für die Zielgruppe nicht optimal. Was passiert, wenn das Bild im `src`-Attribut schwer ist? Auf hochwertigen Entwicklergeräten (wie meinem mit 16 GB RAM) treten wenige oder keine Leistungsprobleme auf. Aber auf Geräten mit geringer Leistung? Das ist eine andere Geschichte.

Die obige Abbildung ist nicht detailliert genug. Ich komme aus Nigeria, und wenn Ihr Produkt in Afrika funktioniert, dann sollten Sie nicht darauf schauen. Betrachten Sie stattdessen diese Grafik

Heutzutage kostet das günstigste iPhone durchschnittlich 300 US-Dollar. Der durchschnittliche Afrikaner kann es sich nicht leisten, obwohl das iPhone ein Schwellenwert für die Messung von **schnellen** Geräten ist.

Das ist die gesamte Geschäfts­analyse, die Sie benötigen, um zu verstehen, dass die CSS-Breite für responsive Bilder nicht ausreicht. Was würde Ihnen, fragen Sie? Lassen Sie mich zunächst erklären, worum es bei Bildern geht.

Nuancen von Bildern

Bilder sind für Benutzer ansprechend, stellen aber eine mühsame Herausforderung für uns Entwickler dar, die die folgenden Faktoren berücksichtigen müssen

• Format
• Festplattengröße
• Render-Dimension (Layout-Breite und -Höhe im Browser)
• Original-Dimension (Original-Breite und -Höhe)
• Seitenverhältnis

Wie wählen wir also die richtigen Parameter aus und kombinieren sie geschickt, um ein optimales Erlebnis für Ihr Publikum zu bieten? Die Antwort hängt wiederum von den Antworten auf diese Fragen ab

• Werden die Bilder dynamisch vom Benutzer oder statisch von einem Designteam erstellt?
• Wenn die Breite und Höhe des Bildes unverhältnismäßig verändert werden, würde das die Qualität beeinträchtigen?
• Werden alle Bilder in der gleichen Breite und Höhe gerendert? Müssen sie beim Rendern ein bestimmtes Seitenverhältnis haben oder ein ganz anderes?
• Was muss bei der Darstellung der Bilder auf verschiedenen Viewports berücksichtigt werden?

Notieren Sie Ihre Antworten. Sie werden Ihnen nicht nur helfen, Ihre Bilder zu verstehen – ihre Quellen, technischen Anforderungen usw. –, sondern auch, die richtigen Entscheidungen bei der Bereitstellung zu treffen.

Vorläufige Strategien für die Bildbereitstellung

Die Bildbereitstellung hat sich von einer einfachen Ergänzung von URLs zum `src`-Attribut zu komplexen Szenarien entwickelt. Bevor wir uns damit befassen, sprechen wir über die verschiedenen Optionen zur Darstellung von Bildern, damit Sie eine Strategie entwickeln können, *wie* und *wann* Sie Ihre Bilder bereitstellen und rendern.

Identifizieren Sie zunächst die Quellen der Bilder. Dadurch kann die Anzahl der obskuren Randfälle reduziert und die Bilder können so effizient wie möglich behandelt werden.

Im Allgemeinen sind Bilder entweder

• Dynamisch: Dynamische Bilder werden vom Publikum hochgeladen und wurden durch andere Ereignisse im System generiert.
• Statisch: Ein Fotograf, Designer oder Sie (der Entwickler) erstellen die Bilder für die Website.

Lassen Sie uns die Strategie für jede dieser Bildtypen untersuchen.

Strategie für dynamische Bilder

Statische Bilder sind relativ einfach zu handhaben. Dynamische Bilder hingegen sind schwierig und anfällig für Probleme. Was kann getan werden, um ihre dynamische Natur zu mildern und sie vorhersehbarer wie statische Bilder zu machen? Zwei Dinge: **Validierung** und **intelligentes Zuschneiden**.

Validierung

Legen Sie ein paar Regeln für die Zielgruppe fest, was akzeptabel ist und was nicht. Heutzutage können wir alle Eigenschaften eines Bildes validieren, nämlich

• Format
• Festplattengröße
• Dimension
• Seitenverhältnis

Hinweis: Die Rendergröße eines Bildes wird während des Renderns bestimmt, daher ist keine Validierung von unserer Seite möglich.

Nach der Validierung entsteht ein vorhersehbarer Satz von Bildern, die leichter zu verarbeiten sind.

Intelligentes Zuschneiden

Eine weitere Strategie für den Umgang mit dynamischen Bildern ist das intelligente Zuschneiden, um wichtige Inhalte nicht zu löschen und sich auf den primären Inhalt zu konzentrieren (oder ihn neu zu zentrieren). Das ist schwierig. Sie können jedoch die künstliche Intelligenz nutzen, die von Open-Source-Tools oder SaaS-Unternehmen angeboten wird, die sich auf Bildverwaltung spezialisiert haben. Ein Beispiel finden Sie in den folgenden Abschnitten.

---

Sobald eine Strategie für dynamische Bilder festgelegt wurde, erstellen Sie eine Regeltabelle mit allen Layout-Optionen für die Bilder. Unten ist ein Beispiel. Es lohnt sich sogar, Analysen zu prüfen, um die wichtigsten Geräte und Viewport-Größen zu ermitteln.

Browser-Viewport	HP Laptop	PS4 Slim	Kameraobjektiv / Seitenverhältnis
< 300	100 vw	100 vw	100 vw/1:2
300 – 699	100 vw	100 vw	100 vw/1:1
700 – 999	50 vw	50 vw	50 vw/1:1
> 999	33 vw	33 vw	100 vw/1:2

Das absolute (suboptimale) Minimum

Lassen wir nun die Komplexität der Responsivität beiseite und tun wir, was wir am besten können – einfache HTML-Struktur mit CSS für maximale Breite.

Der folgende Code rendert einige Bilder

<main>

<figure>
    <img src="https://res.cloudinary.com/...w700/ps4-slim.jpg" alt="PS4 Slim">
</figure>

      

<figure>
    <img src="https://res.cloudinary.com/...w700/x-box-one-s.jpg" alt="X Box One S">
</figure>

      
  <!-- More images -->
    

<figure>
    <img src="https://res.cloudinary.com/...w700/tv.jpg" alt="Tv">
</figure>

</main>

Hinweis: Die Ellipsen (...) in der Bild-URL geben den Ordner, die Dimension und die Zuschneidestrategie an, was zu detailliert ist, um hier aufgenommen zu werden, daher die Kürzung, um sich auf das zu konzentrieren, was jetzt wichtig ist. Die vollständige Version finden Sie im CodePen-Beispiel unten.

Dies ist das kürzeste CSS-Beispiel im Internet, das Bilder responsiv macht

/* The parent container */
main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

img {
  max-width: 100%;
}

Wenn die Bilder keine einheitliche Breite und Höhe haben, ersetzen Sie `max-width` durch `object-fit` und setzen Sie den Wert auf `cover`.

Jo Franchettis Blogbeitrag über gängige responsive Layouts mit CSS Grid erklärt, wie der Wert von `grid-template-columns` das gesamte Layout adaptiv (responsiv) macht.

Sehen Sie den Pen
Grid Gallery von Chris Nwamba (@codebeast)
auf CodePen.

Das Obige ist jedoch nicht das, wonach wir suchen, weil…

• die Bildgröße und das Gewicht sind auf High-End- und Low-End-Geräten gleich, und
• wir möchten die Bildbreite strenger festlegen, anstatt sie auf 250 zu setzen und sie wachsen zu lassen.

Nun, dieser Abschnitt deckt das „absolute Minimum“ ab, also ist das alles.

Layout-Variationen

Das Schlimmste, was einem Bildlayout passieren kann, ist das Missmanagement von Erwartungen. Da Bilder unterschiedliche Dimensionen (Breite und Höhe) haben können, müssen wir angeben, wie die Bilder gerendert werden sollen.

Sollen wir alle Bilder intelligent auf eine einheitliche Dimension zuschneiden? Sollen wir das Seitenverhältnis für einen Viewport beibehalten und das Verhältnis für einen anderen ändern? Der Ball liegt bei uns.

Bei Bildern in einem Raster, wie in der obigen Beispiel mit unterschiedlichen Seitenverhältnissen, können wir die Technik der künstlerischen Gestaltung anwenden, um die Bilder zu rendern. Künstlerische Gestaltung kann helfen, etwas wie dieses zu erreichen

Für Details zur Auflösungs­umschaltung und künstlerischen Gestaltung bei responsiven Bildern lesen Sie Jason Grigsbys Serie. Eine weitere informative Referenz ist Eric Portis' Responsive Images Guide, Teile 1, 2 und 3.

Siehe das Codebeispiel unten.

<main>

<figure>
    <picture>
      <source media="(min-width: 900px)" srcset="https://res.cloudinary.com/.../c_fill,g_auto,h_1400,w_700/camera-lens.jpg">
      
      <img src="https://res.cloudinary.com/.../c_fill,g_auto,h_700,w_700/camera-lens.jpg" alt="Camera lens">
    </picture>
</figure>

  

<figure>
    <picture>
      <source media="(min-width: 700px)" srcset="https://res.cloudinary.com/.../c_fill,g_auto,h_1000,w_1000/ps4-pro.jpg">
    </picture>
    <img src="https://res.cloudinary.com/.../c_fill,g_auto,h_700,w_700/ps4-pro.jpg" alt="PS4 Pro">
</figure>

</main>

Anstatt nur ein 700 Pixel breites Bild zu rendern, rendern wir 700 Pixel x 700 Pixel nur, wenn die Viewport-Breite 700 Pixel überschreitet. Wenn der Viewport größer ist, erfolgt die folgende Darstellung

• Kameraobjektiv-Bilder werden als Hochformatbilder mit einer Breite von 700 Pixeln und einer Höhe von 1000 Pixeln (700 Pixel x 1000 Pixel) gerendert.
• PS4 Pro-Bilder werden mit 1000 Pixel x 1000 Pixel gerendert.

Künstlerische Gestaltung

Durch das Zuschneiden von Bildern zur Anpassung an die Responsivität könnten wir versehentlich den primären Inhalt löschen, wie z. B. das Gesicht des Motivs. Wie bereits erwähnt, können KI-Open-Source-Tools helfen, intelligent zuzuschneiden und sich auf die primären Objekte von Bildern zu konzentrieren. Darüber hinaus ist Nadav Sofermans Beitrag zu Smart Cropping ein nützlicher Einstiegsleitfaden.

Strikte Raster und Spanning

Das erste Beispiel für responsive Bilder in diesem Beitrag ist flexibel. Bei einer Mindestbreite von 300 Pixeln fließen die Rasterelemente automatisch entsprechend der Viewport-Breite an ihren Platz. Großartig.

Andererseits möchten wir möglicherweise eine strengere Regel auf die Rasterelemente anwenden, basierend auf den Designspezifikationen. In diesem Fall sind Media Queries hilfreich.

Alternativ können wir die `grid-span`-Funktion nutzen, um Rasterelemente mit unterschiedlichen Breiten und Längen zu erstellen

@media(min-width: 700px) {
  main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(min-width: 900px) {
  main {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
  }
  figure:nth-child(3) {
    grid-row: span 2;
  }
  figure:nth-child(4) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

Für ein quadratisches Bild von 1000 Pixel x 1000 Pixel auf einem breiten Viewport können wir es so spannen, dass es auf Zeile und Spalte zwei Rasterzellen einnimmt. Das Bild, das auf einem breiteren Viewport in Hochformat-Ausrichtung (700 Pixel x 1000 Pixel) wechselt, kann zwei Zellen auf einer Zeile einnehmen.

Sehen Sie den Pen
Grid Gallery [Art Direction] von Chris Nwamba (@codebeast)
auf CodePen.

Progressive Optimierung

Blinde Optimierung ist so lahm wie keine Optimierung. Konzentrieren Sie sich nicht auf die Optimierung, ohne die richtigen Messungen vordefiniert zu haben. Und optimieren Sie nicht, wenn die Optimierung nicht durch Daten gestützt wird.

Dennoch gibt es in den obigen Beispielen viel Spielraum für Optimierung. Wir haben mit dem absoluten Minimum begonnen, Ihnen einige coole Tricks gezeigt und jetzt haben wir ein funktionierendes, responsives Raster. Die nächste Frage ist: „Wie gut wird das Benutzererlebnis sein, wenn die Seite 20-100 Bilder enthält?“

Hier ist die Antwort: Wir müssen sicherstellen, dass die Größe der Bilder, wenn es viele zu rendern gibt, auf das Gerät passt, auf dem sie gerendert werden. Um das zu erreichen, müssen wir die URLs mehrerer Bilder angeben, anstatt nur einer. Der Browser wählt das richtige (optimale) Bild nach Kriterien aus. Diese Technik wird bei responsiven Bildern als **Auflösungs­umschaltung** bezeichnet. Siehe dieses Codebeispiel

<img srcset="https://res.cloudinary.com/.../h_300,w_300/v1548054527/ps4.jpg 300w,
          https://res.cloudinary.com/.../h_700,w_700/v1548054527/ps4.jpg 700w,
          https://res.cloudinary.com/.../h_1000,w_1000/v1548054527/ps4.jpg 1000w" sizes="(max-width: 700px) 100vw, (max-width: 900px) 50vw, 33vw" src="https://res.cloudinary.com/.../h_700,w_700/v1548054527/ps4.jpg 700w" alt="PS4 Slim">

Harry Roberts' Tweet erklärt intuitiv, was passiert

Der einfachste Weg, den ich (bisher) gefunden habe, um `srcset` und `sizes` zu destillieren/erklären: pic.twitter.com/I6YW0AqKfM

— Harry Roberts (@csswizardry) 1. März 2017

Als ich zum ersten Mal die Auflösungs­umschaltung ausprobierte, war ich verwirrt und tweetete

Ich weiß, dass Breiten­deskriptoren in den img srcset-Attributen die Bild­quell­breite (Original­dateibreite) darstellen.

Was ich nicht weiß ist, warum ist es notwendig? Was macht der Browser mit diesem Wert? cc @grigs 🤓

— Christian Nwamba (@codebeast) 5. Oktober 2018

Hut ab vor Jason Grigsby für die Klärung in seinen Antworten.

Dank der Auflösungs­umschaltung lädt der Browser das richtige Bild für den richtigen Viewport herunter, wenn der Browser neu dimensioniert wird; daher kleine Bilder für kleine Handys (gut für CPU und RAM) und größere Bilder für größere Viewports.

Die obige Tabelle zeigt, dass der Browser das gleiche Bild (blauer Rechteck) mit unterschiedlichen Festplattengrößen (roter Rechteck) herunterlädt.

Sehen Sie den Pen
Grid Gallery [Optimized] von Chris Nwamba (@codebeast)
auf CodePen.

Cloudinarys Open-Source und kostenloser Responsive Image Breakpoints Generator ist äußerst nützlich, um Website-Bilder an verschiedene Bildschirm­größen anzupassen. In vielen Fällen reicht es jedoch aus, nur `srcset` und `sizes` einzustellen.

Fazit

Dieser Artikel zielt darauf ab, einfache, aber effektive Richtlinien für die Einrichtung responsiver Bilder und Layouts angesichts der vielen – und potenziell verwirrenden – verfügbaren Optionen zu geben. Machen Sie sich mit CSS Grid, künstlerischer Gestaltung und Auflösungs­umschaltung vertraut, und Sie werden im Handumdrehen ein Ninja sein. Üben Sie weiter!