Verwalten von Bildhaltepunkten mit Angular

Als Webentwickler müssen wir häufig Anwendungen erstellen, die sowohl reaktionsschnell als auch medienreich sind. Das Vorhandensein solcher Anforderungen bedeutet, dass wir mit Bildhaltepunkten sowie Medienabfragen arbeiten müssen, da wir den Endbenutzern die beste Erfahrung bieten möchten. Zusätzlich zur Liste der Anforderungen müssen wir möglicherweise ein Front-End-Framework wie Angular verwenden, das sich hervorragend zum Erstellen von SPAs und anderen Anwendungstypen eignet.

In diesem Artikel werfen wir einen Blick auf Bildhaltepunkte, ihre Anwendungsfälle und ein praktisches Beispiel; Wir implementieren sie in einer Angular-Anwendung mit Angulars eigenem BreakPoint Observer. Während wir diesen Ansatz verwenden, werden wir auch hervorheben, warum dieses beliebte Framework uns hilft, nahtlos mit den oben genannten Techniken zu arbeiten.

Bildhaltepunkte und responsive Bilder

Im Zeitalter der responsiven Layouts (wo wir Breakpoints basierend auf der Viewport-Größe erfassen und basierend auf dem Breakpoint das Layout der Seite ändern) müssen wir auch sicherstellen, dass Bilder mit den richtigen Abmessungen angezeigt werden können – auch nach einem Layout Veränderung. Die Auswahl des richtigen Bildes ist für moderne responsive Websites eine ziemliche Herausforderung.

Lassen Sie uns zwei Optionen besprechen, die Entwickler im Moment nutzen können.

srcset

srcset können wir eine Liste von Bildern definieren, zwischen denen der Browser basierend auf der gerenderten <img> -Größe und der Dichte der Anzeige umschaltet.

Schauen wir uns ein Beispiel an:

 <img src="tuscany.jpg" />

Oben geben wir 3 Bilder an, wobei das w die Pixelbreite für das Bild angibt. Wenn wir das Obige mit srcset , müssen wir auch das sizes angeben (dies ist erforderlich, weil die Spezifikation vorschreibt, dass wir bei Verwendung srcset und w auch ein Größenattribut haben müssen). Was ist der Zweck dieses Attributs? Browser müssen auswählen, welche Ressource aus einem Quellsatz geladen werden soll, bevor sie die Seite gestalten (bevor sie wissen, wie groß das Bild am Ende sein wird). Wir können uns sizes als Hinweis für den Browser vorstellen, dass das Bild nach dem Layout 100 % der Breite des Ansichtsfensters einnehmen wird (darauf bezieht sich vw ). Der Browser kennt die tatsächliche Viewport-Breite (sowie die DPR des Bildes) zur Ladezeit, sodass er rechnen kann, um herauszufinden, welche Ressourcengröße er benötigt, und eine aus dem Quellsatz auszuwählen.

Die Elementkombinationen <picture> und <source media=""> ermöglichen es uns, Bildressourcen als Reaktion auf Medienanfragen auszutauschen, z. B. an Layout-Haltepunkten.

Schauen wir uns dazu auch ein Beispiel an:

 <picture> <source media="(min-width: 1440px)"> <source media="(min-width: 900px)"> <source media="(min-width: 600px)"> <img src="../assets/images/tuscany-sm.jpg" /> </picture>

Ändern Sie den obigen Code lokal mit einem Bild Ihrer Wahl, das eine kleine, mittlere und große Größe hat. Beachten Sie, wie Sie durch Ändern der Browsergröße ein anderes Bild erhalten.

Die wichtigste Erkenntnis aus all dem oben Gesagten ist, dass wir, wenn wir Bilder an bestimmten Haltepunkten austauschen möchten, das <picture> -Element verwenden können, um Medienabfragen direkt in das Markup einzufügen.

Hinweis : Wenn Sie daran interessiert sind, die Unterschiede zwischen sizes <picture> und srcset + size zu untersuchen, empfehle ich Ihnen, den großartigen Artikel von Eric Portis zu lesen: srcset und sizes .

Bisher haben wir besprochen, wie man Bildhaltepunkte zusammen mit Medienabfragen in einer reinen HTML-Umgebung verwendet. Wäre es nicht viel besser, eine bequeme, fast halbautomatische Möglichkeit zu haben, Bildhaltepunkte sowie die entsprechenden Bilder für die Haltepunkte zu generieren, auch ohne überhaupt Medienabfragen angeben zu müssen? Zum Glück für uns hat Angular einen eingebauten Mechanismus, der uns hilft, und wir werden uns auch ansehen, wie die entsprechenden Bilder dynamisch basierend auf bestimmten Bedingungen mithilfe eines Drittanbieterdienstes generiert werden.

Eckiges Layout-Modul

Angular wird mit einem Layout-Modul geliefert, das im CDK-Toolset (Component Dev Kit) enthalten ist. Das Angular CDK enthält bewährte Tools zur Unterstützung der Komponentenentwicklung. Ein Teil des CDK ist das Layout-Modul, das einen BreakpointObserver enthält. Dieser Helfer ermöglicht den Zugriff auf Haltepunkte für Medienabfragen, was bedeutet, dass sich Komponenten (und ihre Inhalte) an Änderungen anpassen können, wenn die Browsergröße (Bildschirmgröße) intuitiv geändert wird.

Empfohlene Lektüre : Layout-Modul

Nachdem wir nun die Theorie aus dem Weg geräumt haben, können wir zur Sache kommen und eine Anwendung erstellen, die reaktionsschnelle Bildhaltepunkte implementiert. In dieser ersten Iteration erstellen wir die Shell der Anwendung über die Angular-CLI: ng new bpo und wählen die erforderlichen Optionen aus.

Um den BreakpointObserver zu verwenden, müssen wir auch das CDK-Layout-Modul von Angular installieren, was wir über npm tun können: npm i @angular/cdk .

Nach der Installation können wir jeder gewünschten Komponente die erforderlichen Importanweisungen hinzufügen:

 // app.component.ts import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

Mit dem BreakpointObserver können wir Änderungen in der Viewport-Breite abonnieren und Angular gibt uns praktische Accessoren, was bedeutet, dass wir überhaupt keine Medienabfragen verwenden müssen! Lass uns weitermachen und das ausprobieren:

 // app.component.ts constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle XSmall breakpoint } if (result.breakpoints[Breakpoints.Small]) { // handle Small breakpoint } if (result.breakpoints[Breakpoints.Medium]) { // handle Medium breakpoint } if (result.breakpoints[Breakpoints.Large]) { // handle Large breakpoint } if (result.breakpoints[Breakpoints.XLarge]) { // handle XLarge breakpoint } }); }

Wie bereits erwähnt, spiegeln die obigen Accessor-Eigenschaften Medienabfragen auf folgende Weise wider:

• Breakpoints.XSmall : maximale Breite = 599,99 Pixel
• Breakpoints.Small : Mindestbreite = 600 Pixel und Höchstbreite = 959,99 Pixel
• Breakpoints.Medium : Mindestbreite = 960 Pixel und Höchstbreite = 1279,99 Pixel
• Breakpoints.Large : Mindestbreite = 1280 Pixel und Höchstbreite = 1919,99 Pixel
• Breakpoints.XLarge : Mindestbreite = 1920px

Wir haben jetzt alles an Ort und Stelle, was bedeutet, dass wir beginnen können, die entsprechenden Bilder zu generieren.

Responsive Breakpoints für Bilder

Wir haben einige Optionen, um responsive Bilder zu generieren:

1. Responsive Image Breakpoints Generator
   Mit diesem Tool können wir jedes Bild hochladen, verschiedene Optionen einstellen, zB die Anzahl der Bilder, die wir generieren möchten. Nach dem Ausführen des Tools haben wir eine visuelle Darstellung der generierten Bilder und können sie zusammen mit generiertem Code, der das zuvor erwähnte <picture> -Element verwendet, als ZIP-Datei herunterladen.
2. Eine andere Lösung wäre, einen Build-Schritt für unser Projekt zu erstellen, um Haltepunkte über einige im NPM-Repository verfügbare Pakete zu generieren, z. B. gulp-responsive oder grunt-responsive-images . Beide hängen von zusätzlichen Bibliotheken ab, die wir für unser Betriebssystem installieren müssen. (Weitere Informationen finden Sie in den entsprechenden Repositories.)
3. Eine weitere Lösung wäre die Verwendung eines Dienstes wie Cloudinary, um die Bilder zu speichern und sie in einer Größe und einem Format bereitzustellen, die wir benötigen, indem wir lediglich die URL für die angeforderte Ressource ändern. Dies wird unser Ansatz sein, da uns dies die größte Flexibilität bietet.

Empfohlene Lektüre : Automating Art Direction With The Responsive Image Breakpoints Generator von Eric Portis

Ich habe das Originalbild in mein Cloudinary-Konto hochgeladen, was bedeutet, dass ich über die folgende URL auf dieses Bild zugreifen kann:

 https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg

Dies ist das rohe, originale und unveränderte Bild in voller Größe, mit dem wir arbeiten werden.

Wir können die URL des Bildes ändern, um eine viel kleinere Version zu generieren. Wenn wir beispielsweise ein Bild mit einer Breite von 600 Pixel haben möchten, könnten wir die Cloudinary-URL* wie folgt aktualisieren:

 https://res.cloudinary.com/tamas-demo/image/upload/w_600/breakpoints-article/tuscany.jpg

* Beachten Sie das der URL hinzugefügte w_600 .

Hoffentlich sehen Sie an diesem Punkt, wohin das alles führt. Basierend auf dem obigen Ansatz können wir sehr schnell damit beginnen, das richtige Bild für den richtigen Haltepunkt zu generieren.

Die Verwendung von Cloudinary bedeutet, dass wir nicht mehrere Versionen desselben Images erstellen, speichern und verwalten müssen – dies erledigt Cloudinary on-the-fly für uns.

Aktualisieren wir unseren Code:

 <!-- app.component.html --> <div> <h1>Current breakpoint: {{ breakpoint }}</h1> <img [src]="imagePath"> </div>

 // app.component.ts import { Component, OnInit } from '@angular/core'; // ... export class AppComponent implements OnInit { imagePath; constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ ... } }

Wir können eine beliebige Anzahl von zu beobachtenden Haltepunkten aus der zuvor erwähnten Liste auswählen, und da wir einen Beobachter haben, können wir die Änderungen abonnieren und darauf reagieren:

 this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle this case } });

Um die Optionen für die verschiedenen Bilder in Cloudinary zu handhaben, verwenden wir einen Ansatz, der sehr einfach zu befolgen ist. Für jeden Fall erstellen wir eine Optionsvariable und aktualisieren die endgültige Cloudinary-URL.

Fügen Sie oben in der Komponentendefinition Folgendes hinzu:

 // app.component.ts imagePath; breakpoint; cloudinaryOptions; baseURL = 'https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg';

Und fügen Sie der ersten if -Anweisung Folgendes hinzu:

 // app.component.ts let url = this.baseURL.split('/'); let insertIndex = url.indexOf('upload'); const options = 'c_thumb,g_auto,f_auto,q_auto,w_400'; url.splice(insertIndex + 1, 0, options); this.imagePath = url.join('/'); this.breakpoint = Breakpoints.XSmall;

Das Ergebnis wird eine aktualisierte Cloudinary-URL sein:

 https://res.cloudinary.com/tamas-demo/image/upload/c_thumb,g_auto,f_auto,q_auto,w_400/breakpoints-article/tuscany.jpg

Welche Optionen stellen wir hier ein?

• c_thumb (erzeugt ein Thumbnail des Bildes);
• g_auto (konzentriert sich auf den interessantesten Teil; wir sehen die Kathedrale im Thumbnail);
• f_auto (liefert das am besten geeignete Format für einen bestimmten Browser, dh WebP für Chrome);
• q_auto (reduziert die Qualität – und damit die Gesamtgröße – des Bildes, ohne die Optik zu beeinträchtigen);
• w_400 (setzt die Breite des Bildes auf 400px).

Vergleichen wir aus Neugier die ursprüngliche Bildgröße mit diesem neu generierten Bild: 2,28 MB gegenüber 29,08 KB!

Wir haben jetzt eine einfache Aufgabe: Wir müssen verschiedene Optionen für verschiedene Haltepunkte erstellen. Ich habe auf StackBlitz eine Beispielanwendung erstellt, damit Sie sie sofort testen können (eine Vorschau finden Sie auch hier).

Fazit

Die Vielfalt an Desktop- und Mobilgeräten und die Menge an Medien, die im heutigen Web verwendet werden, hat eine herausragende Zahl erreicht. Als Webentwickler müssen wir bei der Entwicklung von Webanwendungen, die auf jedem Gerät funktionieren und das visuelle Erlebnis nicht beeinträchtigen, an vorderster Front stehen.

Es gibt eine Reihe von Methoden, die sicherstellen, dass das richtige Bild auf das richtige Gerät geladen wird (oder sogar beim Ändern der Größe eines Geräts). In diesem Artikel haben wir einen Ansatz besprochen, der eine integrierte Angular-Funktion namens BreakPoint Observer verwendet, die uns eine leistungsstarke Schnittstelle für den Umgang mit responsiven Bildern bietet. Darüber hinaus haben wir uns auch einen Dienst angesehen, mit dem wir Bilder in der Cloud bereitstellen, transformieren und verwalten können. Mit solch überzeugenden Tools können wir immersive visuelle Web-Erlebnisse schaffen, ohne Besucher zu verlieren.