Die reaktionsschnelle Bildspezifikation ist ein fantastisches Dokument, das viele Verwendungszwecke für solche Bilder beschreibt. Die Erfahrung zeigt mir jedoch, dass Sie bei der Arbeit mit ihnen meistens nur wissen müssen, wie Sie dem Kunden Kopien desselben Bildes in verschiedenen Größen geben können, wobei Sie diese abhängig von der Breite des Seitenansichtsbereichs auswählen müssen. Wir nennen dies "Auflösungsumschaltung". Um dieses Problem zu lösen, können Sie die Attribute srcsetund verwenden sizes.Die Ausgabe von reaktionsschnellen Bildern erfordert die Verwendung einer ziemlich komplexen Logik. Dies umfasst unter anderem das Bestimmen, welches Bild angezeigt wird, sowie das Bestimmen, ob der Benutzer mit einem hochauflösenden Bildschirm arbeitet. Glücklicherweise sind Browser besser als Personen, die bestimmen können, welche Bilder für den jeweiligen Benutzer am besten geeignet sind. Wir müssen ihnen nur einige Hinweise geben. Das Attribut srcsetgibt dem Browser eine Liste von Grafikressourcen, aus denen er das am besten geeignete Bild auswählen kann. Mit dem Attribut sizeskönnen Sie dem Browser mitteilen, welche Bildgröße Sie in einem bestimmten Fall anzeigen möchten.
Wenn Sie reaktionsschnelle Bilder verwenden, müssen Sie sich übrigens keine Gedanken über die Browserunterstützung für diese Technologie machen. Die Attribute, an denen wir interessiert sind, genießen eine hervorragende Browserunterstützung. Außerdem verfügen wir über einen Sicherungsmechanismus für ältere Browser wie IE11.Wie das Tag mit dem Browser "kommuniziert"
Auf diese Weise <img>teilt das Tag dem Browser mit, welches Bild ausgewählt werden soll."Sprechen" des Tags und des BrowsersHier<img>teiltdas Tagdem Browser Folgendes mit: "Bei dieser Bildschirmgröße werde ich in ungefähr der folgenden Größe angezeigt (gibt ein Attribut ansizes). Sie können jedes dieser Bilder mit der folgenden Breite aufnehmen (gibt ein Attribut ansrcset). Wählen Sie daher bitte das Bild aus, das jetzt am besten geeignet ist. "Srcset-Attribut
Das Attribut srcsetgibt dem Browser eine Reihe von Grafikressourcen, aus denen er die am besten geeignete auswählen kann. Es enthält auch Informationen über die Größe jedes der vorgeschlagenen Bilder.Srcset-Attribut Dieses Attributsrcenthält ein Fallback-Image für Browser, die das Attribut nicht verstehensrcset. DiesrcsetURL enthält Bilder und Informationen zu ihrer Breite. Aus den ihm zur Verfügung gestellten Bildern wählt der Browser die am besten geeignete aus. Wenn der Benutzer ein Display mit hoher Pixeldichte hat (Retina-Display), berücksichtigt dies der Browser bei der Auswahl eines Bildes.Das Attributsrcsetenthält eine Liste von Bild-URLs, gefolgt von Informationen zur Bildbreite. Paare werdenURL-durch Kommas getrennt. Listenelemente sehen folgendermaßen aus :image.jpg 1000w. Ein solcher Datensatz teilt dem Browser mit, dass das Bildimage.jpg1000 Pixel breit ist.Wenn wir den Satz von Bildern auf diese Weise beschreiben, teilen wir dem Browser Folgendes mit: "Ich gebe Ihnen eine Liste von Bildern und vertraue darauf, dass Sie das am besten geeignete auswählen."Der Browser wählt das beste Bild aus, das von einer Reihe komplexer Kriterien geleitet wird. Dazu gehört, welches Bild der Benutzer anzeigt, wie groß der aktuelle Anzeigebereich ist und ob der Benutzer über eine hochauflösende Anzeige verfügt.Der Browser ist intelligent genug, um zu wissen, dass Sie auf einem Desktop-Display mit niedriger Auflösung bei einer Breite des Ausgabebilds von 800 Pixel das Bild aus der Liste mit einer Breite von mindestens 800 Pixel auswählen müssen.Der Browser weiß außerdem, dass Sie eine Bilddatei mit einer Breite von mindestens 640 Pixel auswählen müssen, wenn ein Bild mit einer Breite von 320 Pixel auf einem hochauflösenden Display angezeigt wird. Infolgedessen müssen wir uns nicht um 1x und 2x Grafikressourcen kümmern. Alles, was Sie tun müssen, ist, dem Browser einen guten Satz von Bildern zu geben und ihn seine Arbeit machen zu lassen.Wie beschreibe ich Bilder, die für verschiedene Bildschirme geeignet sind?Größenattribut
Attribut srcsetist ein großartiges Werkzeug. Wenn der Browser jedoch den HTML-Code der Seite liest, weiß er nicht, ob beispielsweise der CSS-Stil verwendet wird, wodurch die Bildgröße auf 50% der Bildschirmbreite festgelegt wird. Hier kommt das Attribut ins Spiel sizes. Damit können wir dem Browser einen Hinweis geben, in welcher Größe das Bild angezeigt wird, nachdem CSS darauf angewendet wurde.Größenattribut100vw- Die Standardgröße, wenn keine der Bedingungen erfüllt ist. Es wird zuletzt in der Liste angezeigt, die sich im Attribut befindet sizes.1023px - Fensterbreite.780px - Bildbreite, wenn die angegebene Bedingung erfüllt ist.
Der Browser stoppt bei der ersten erfüllten Bedingung.Das Attribut sizesenthält eine Liste von Medienbedingungen, die durch Kommas getrennt sind. Medienbedingungen sind eine Teilmenge von Medienabfragen. Hier können Sie nicht den Umgebungstyp angeben, für den die Bedingung ( printoder screen) gilt , aber Sie können Medienabfragen verwenden, die sich auf die Breite des Anzeigebereichs beziehen.Jeder Listeneintrag enthält die Breite des Ansichtsfensterfensters und die entsprechende Bildbreite. Das Listenelement hat das Formular (min-width: 1023px) 780px. Ein solcher Datensatz teilt dem Browser mit, dass Sie bei einer Breite des Ansichtsfensters von 1023 Pixel (oder mehr) ein Bild mit einer Breite von 780 Pixel verwenden müssen.Hier können zusätzlich relative Breiteneinheiten verwendet werden. Zum Beispiel so etwas wie50vw. Dies teilt dem Browser mit, dass die Breite des Bildes 50% der Breite des Ansichtsfensters beträgt. Hier können Sie in komplexeren Situationen sogar die Funktion verwenden calc. Das Ansichtsdesign calc(50vw — 2rem)teilt dem Browser beispielsweise mit, dass die Bildbreite 50% der Breite des Ansichtsfensters minus beträgt 2rem. Möglicherweise wird die Breite auf diese Weise eingestellt, um die Breite einer Einrückung oder eines Randes zu berücksichtigen.Das letzte Element der Liste ist nicht mit einer Medienbedingung versehen. Wenn Sie der Liste eine Breite hinzufügen und keine Medienbedingung angeben, wird der entsprechende Wert als Standardwert betrachtet, dh für den Fall, dass keine der anderen Bedingungen erfüllt ist.Der Browser betrachtet diese Liste von oben nach unten und stoppt beim ersten geeigneten Element, das der Breite des Ansichtsfensters entspricht.Angenommen, das Attribut enthält sizesFolgendes:(min-width: 1023px) 780px,
(min-width: 675px) 620px,
100vw
Folgendes wird in verschiedenen Situationen passieren:- Wenn der Benutzer an einem großen Desktop-Display arbeitet, hält der Browser das erste Element der Liste für geeignet und weiß, dass das Bild 780 Pixel breit sein sollte.
- Die Standardbreite des Anzeigebereichs eines aufrechten iPad-Bildschirms beträgt 768 Pixel. In dieser Situation überspringt der Browser den ersten Eintrag in der Liste, stellt jedoch fest, dass die aktuellen Bedingungen mit dem zweiten Eintrag übereinstimmen. Es teilt dem Browser mit, dass das Bild 620 Pixel breit sein wird.
- ,
sizes. , , 100% .
Dies sind natürlich nur Beispiele. In der realen Welt ist alles viel komplizierter. Beispielsweise erhält ein Benutzer mit einem großen Bildschirm, der eine Seite in einem schmalen Browserfenster anzeigt, ein kleineres Bild als wenn das Fenster auf Vollbild erweitert worden wäre. Ein Benutzer mit einem iPad Pro erhält möglicherweise ein größeres Bild, wenn er das Gerät in den Querformatmodus versetzt. Wenn er das Tablet im Hochformat verwendet, erhält er möglicherweise ein mittelgroßes Bild. Und wenn er den Browser im Modus verwendet, in dem der Bildschirm auf mehrere Fenster aufgeteilt ist, erhält er möglicherweise ein kleines Bild. Einige Telefone mit großen Bildschirmen erfüllen die zweite Regel aus unserer Liste, wenn Sie im Querformat mit ihnen arbeiten. Dies ist der Reiz des beschriebenen Systems:Der Entwickler muss sich nicht um all diese Sonderfälle und die verschiedenen Formfaktoren der Geräte kümmern. Es reicht aus, dem Browser mitzuteilen, welche Version des Bildes für einen bestimmten Anzeigebereich ausgewählt werden soll.Wie erstelle ich eine Liste von Bildern, aus denen der Browser die am besten geeigneten auswählt?Src-Attribut
Möglicherweise haben Sie bemerkt, dass das Attribut in allen obigen Beispielen weiterhin verwendet wird src. Sie fragen sich möglicherweise, ob dieses Attribut angesichts des Attributs benötigt wird srcset. Der Punkt hier ist, dass wenn wir dem Browser ein Attribut geben srcset, wenn es ein moderner Browser ist, er den Wert srcim DOM durch den Wert ersetzt, der dem ausgewählten Bild entspricht srcset. Infolgedessen stellt sich heraus, dass moderne Browser das Attribut ignorieren srcund sich stattdessen auf das Attribut konzentrieren srcset.Das Attribut srcan sich ist jedoch immer noch wichtig für Browser, die die Arbeit mit reaktionsschnellen Bildern nicht unterstützen. Solche Browser, die ziemlich alt sind, ignorieren die Attribute srcsetund sizes. Sie wissen einfach nichts über ihre Existenz. Aber AttributsrcSie verstehen, so dass Sie die Adresse des Bildes in das Bild schreiben können, das als Sicherungsoption für solche Browser dient. Normalerweise schreibe ich in dieses Attribut die Adresse des kleinsten Bildes, das auf Desktop-Monitoren ohne hohe Pixeldichte gut aussieht.Fragen und Antworten
▍Wie werden Bildsätze generiert?
Bilder können auf verschiedene Arten generiert werden: manuell mit dem Tool zum Erstellen von reaktionsschnellen Bildern und mit den entsprechenden CDN-Funktionen.Um Bilder manuell zu erstellen, müssen Sie das Originalbild in Photoshop (oder einem anderen von Ihnen verwendeten Editor) öffnen und in allen erforderlichen Größen exportieren.Dies kann viel Zeit in Anspruch nehmen, daher möchten Sie diese Arbeit möglicherweise mit dem entsprechenden Tool automatisieren. Unter diesen Tools gefällt mir der Responsive Image Breakpoints Generator am besten.von Cloudinary. Wenn Sie mit diesem Tool arbeiten, übertragen Sie einfach das Bild darauf. Anschließend werden automatisch Varianten unterschiedlicher Größe erstellt. Hier können Sie die Anzahl der generierten Bilder anpassen. Sobald die Bilder fertig sind, können sie heruntergeladen und im Projekt verwendet werden.Eine weitere Option zur Unterstützung von reaktionsschnellen Bildern besteht darin, das entsprechende CDN zum Hosten zu verwenden. Zum Beispiel - Cloudinary oder imgix. Mit einem ähnlichen Dienst wird das Bild in der höchsten verfügbaren Auflösung auf das CDN heruntergeladen. Sie können dann mithilfe der URL-Parameter Versionen des Bildes in verschiedenen Größen anfordern. In diesem Fall müssen Sie sich keine Gedanken über die Größenänderung des Bildes machen: Teilen Sie dem CDN einfach die Größe mit, in der Sie das entsprechende Bild anzeigen möchten.Hier finden Sie eine Liste von Diensten und Projekten, mit denen Sie Variationen von Bildern unterschiedlicher Größe erstellen können.▍Welche Größen sollte ich dem Browser zur Verfügung stellen?
Gute Frage! Wenn Sie dem Browser zu viele grafische Ressourcen zur Verfügung stellen, verschwenden Sie einfach Ihre Zeit und Mühe, diese zu erstellen. Wenn zu wenige Ressourcen vorhanden sind, bedeutet dies, dass Sie Benutzer Ihrer Website dazu zwingen, Bilder herunterzuladen, die größer sind als sie benötigen.Wenn Sie mit einem einzelnen Bild arbeiten und die Möglichkeit haben, das Layout für die Ausgabe dieses Bildes anzupassen, können Sie das Tool " Responsive Image Breakpoints Generator" verwenden. Er überprüft das Bild automatisch und entscheidet, welche Ressourcen (in Bezug auf das Gleichgewicht zwischen Dateigröße und Auflösung) aus diesem Bild optimal generiert werden. Dann wird dieses Tool nicht nur Dateien erzeugen, sondern auch automatisch vorzubereiten srcsetund Attribute sizes.Ein Standardsatz von Bildgrößen mit einer Breite von 320 bis 2560 Pixel.Wenn Sie in einem bestimmten CMS arbeiten oder eine Webanwendung erstellen und nicht wissen, welche Bildgröße an der einen oder anderen Stelle angezeigt wird, empfehle ich die Verwendung des Standardsatzes von Größen Bilder. Früher habe ich die folgenden Abmessungen verwendet:320w,640w,960w,1280w,1920wund2560w. Dies sind runde Zahlen, die durch Multiplizieren von 320 mit verschiedenen Koeffizienten erhalten werden. Diese Ressourcen decken die Anforderungen einer Vielzahl von Bildschirmen ab - von kleinen mobilen Displays bis hin zu großen Desktop-Monitoren.Die Verwendung eines Standardsatzes von Ressourcen ist jedoch unter Berücksichtigung der Funktionen des Projekts immer weniger effektiv als die Verwendung eines eigenen Satzes. In diesem Fall zeigt sich, obwohl wir eine recht logische Abfolge sehen, eine fortschreitende Zunahme der Dateigröße, da sich die Anzahl der Pixel in diesem Bild vervierfacht , wenn die Breite (und entsprechend die Höhe) eines Bildes verdoppelt wird . Wenn Sie einen Standardsatz von Bildgrößen verwenden müssen, müssen Sie möglicherweise einen Satz auswählen, der weniger Optionen für Bilder kleiner Größen und mehr Optionen für große Größen bietet.Wenn Sie Bilder auf Cloudinary hosten, steht Ihnen ein anderer Ansatz zur Verfügung. Es ist zu benutzenCloudinary API , mit der Sie Bilder mit dem Responsive Image Breakpoints Generator verarbeiten können, wenn sie heruntergeladen werden. Nachdem die Bilder automatisch verarbeitet wurden, können Sie die Attribute srcsetund mithilfe der API-Antwort dynamisch füllen sizes.▍ Welche Werte sollten in das Größenattribut eingegeben werden?
Um herauszufinden, welche Werte in das Attribut eingegeben werden sollen sizes, müssen Sie das CSS analysieren und verstehen, welche Bildbreite unter verschiedenen Bedingungen angezeigt wird.Manchmal wird dies durch die Breite des Bildes selbst bestimmt:img {
width 320px;
}
@media screen and (min-width: 37.5em) {
width: 640px;
}
In diesem Fall gibt es zwei Optionen für die feste Bildgröße. Diese Tatsache kann direkt im Attribut widergespiegelt werden sizes:<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) 640px, 320px">
Es stellt sich jedoch häufig heraus, dass die Bildgrößen flexibel sind. Oft erben Bilder Größen von ihren Containern:img {
height: auto;
width: 100%;
}
.container {
padding: 1rem;
width: 100%;
}
@media screen and (min-width: 37.5em) {
.container {
width: 50%;
}
}
In diesem Beispiel (vorausgesetzt, das einzige Element, das die Breite des Bildes beeinflusst .container) kann die Breite des Containers als die Breite des Bildes betrachtet werden. Hierbei ist zu beachten, dass die Breite des inneren Einzugs von der Breite des Behälters abgezogen wird. Möglicherweise müssen Sie dies berücksichtigen, vielleicht auch nicht. Es hängt alles davon ab, wie stark die Einrückung die endgültige Breite des Bildes beeinflusst.<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) calc(50vw - 2rem),
calc(100vw - 2rem)">
Wie Sie sehen, sizeshängt das Festlegen eines Attributs stark vom jeweiligen Layout ab. Normalerweise erstelle ich Arbeiten, indem ich Bilder in den Browser-Entwicklertools recherchiere und herausfinde, welche Optionen die Größe der Bilder beeinflussen.▍Wie überprüfe ich die richtigen Einstellungen für reaktionsschnelle Bilder?
Es ist leicht vorstellbar, dass das Testen der richtigen Einstellungen für reaktionsschnelle Bilder schwierig und zeitaufwändig sein kann. Zu unserem Glück gibt es jedoch ein Werkzeug, das die Lösung solcher Probleme vereinfacht. Dies ist ein Responsive Image Linter .Dies ist ein Lesezeichen, das dem Browser hinzugefügt und auf Ihrer eigenen Website verwendet werden kann. Wenn es aufgerufen wird, scannt es die Seite automatisch und verwendet verschiedene Größen des Anzeigebereichs und der Bildschirmpixeldichte, um die Bilder zu testen.Anschließend zeigt er einen Bericht mit Informationen zu allen Bildern der Seite an und ob die Verwaltung ihrer Größen korrekt organisiert ist. Wenn beim Testen der Seite etwas schief geht, werden Sie darüber informiert und erhalten sogar Ratschläge zur Behebung des Problems.Zusammenfassung
Wie Sie sehen können, bietet die Kombination von Attributen srcsetund sizeseine große Chance. Durch Festlegen dieser beiden Attribute teilen Sie dem Browser die Breite der Bilder mit, die Sie für eine bestimmte Breite des Anzeigebereichs verwenden möchten, und geben eine Liste der Grafikressourcen an, aus denen der Browser diejenige auswählt, die er für am besten geeignet hält.Wenn Sie bei der Arbeit mit Bildern komplexere Probleme lösen müssen, beachten Sie, dass es Tools zur Lösung solcher Probleme gibt. Angenommen, dies entspricht der Verwendung moderner Grafikformate wie WebP oder dem Senden unterschiedlicher Bilder an den Client, abhängig von der Bildschirmgröße. Wenn Sie sich mit reaktionsschnellen Bildern beschäftigen möchten, schauen Sie sich dieses Material an.Liebe Leser! Verwenden Sie in Ihren Projekten reaktionsschnelle Bilder?