Das Problem bei der Anzeige von Bildern ist seit dem Aufkommen der Anpassungsfähigkeit im Internet aufgetreten. Wir möchten, dass die Website auf jedem Tablet, Telefon, im Hoch- oder Querformat sowie auf supergroßen 5K-Displays gut aussieht. Ebenfalls auf dem Markt sind Retina-Displays mit hoher Pixeldichte (DPI), bei denen normale Bilder verschwommen aussehen. Der Anteil des mobilen Verkehrs wächst und große Ressourcen zielen darauf ab, Bilder wirtschaftlich zu laden. Mal sehen, wie sie diese Probleme auf den Websites von Apple, Tilda und der Blog-Plattform Medium lösen.
Apple: Power-User mit Hintergrundbild
Apple setzt bei seinen Produkten auf Design, wobei der Schwerpunkt auf der Forschung zu Bildanzeigen liegt. Auf der Apple-Website wird zum Zeitpunkt dieses Schreibens die Bildoptimierung durch CSS-Funktionen bereitgestellt, genauer gesagt durch Hintergrundbilder. Das Schlüsselprinzip dieses Ansatzes ist die feste Breite des Bildes zwischen den Haltepunkten, dh die Zurückweisung von "Gummibildern". Betrachten Sie das Beispiel eines der Bilder von der Website
www.apple.com/mac<figure class="imac-image" data-progressive-image=""></figure>
.section-imac .imac-image { width:939px; height:631px; background-size:939px 631px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large.jpg"); } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_large_2x.jpg") } } @media only screen and (max-width: 1068px) { .section-imac .imac-image { width:795px; height:536px; background-size:795px 536px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium.jpg") } } @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_medium_2x.jpg") } } @media only screen and (max-width: 735px) { .section-imac .imac-image { width:365px; height:246px; background-size:365px 246px; background-repeat:no-repeat; background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small.jpg") } } @media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) { .section-imac .imac-image { background-image:url("/v/mac/home/af/images/overview/hero/imac__dlz2ciyr6hm6_small_2x.jpg") } }
Aus Gründen der browserübergreifenden Kompatibilität werden sofort drei Methoden zum Einstellen der Bildschirmpixeldichte verwendet:
-webkit-min-device-pixel-ratio: 1.5
Mindestauflösung: 1,5 dppx
Min-Auflösung: 144 dpi
Was sind die Vor- und Nachteile dieses Ansatzes?
Vorteile
- Einfache Implementierung. Dies ist möglicherweise die verständlichste Methode, um das Bild auf eine bestimmte Größe und Dichte des Bildschirms zu ändern.
- Abdeckung aller Probleme: Das Problem der Bildschirmgröße und Pixeldichte wird angesprochen.
- Kein Sprunglayout dank voreingestellter Größen.
- Sie können die integrierten CSS-Funktionen zum Arbeiten mit Hintergründen verwenden (Mischmodus für Effekte, Position - Bild zuschneiden, falls erforderlich).
Nachteile
- Sie können kein "Gummi" -Bild machen. Feste Größen bestimmen das Seitenverhältnis. Wenn Sie also versuchen, zu komprimieren oder zu dehnen, beschneiden wir das Bild oder es befindet sich unten ein leerer Bereich. Ja, Sie können Padding-Bottom in Prozent anstelle von Größe verwenden, aber dies ist bereits eine Problemumgehung, ein CSS-Hack, der das Grundkonzept kompliziert.
- Viel CSS-Code. Ja, CSS ist leicht zu lesen, aber bei einer großen Anzahl von Haltepunkten und Bildern kann sich die CSS-Größe unbegrenzt erhöhen (siehe unten „CSS-Präprozessoren zur Rettung“).
- Es gibt keine Kontrolle über das Herunterladen von Bildern. Wenn Sie diesen Ansatz in seiner reinen Form verwenden, werden alle Bilder auf der Seite gleichzeitig geladen. Und CSS verfügt im Gegensatz zu img nicht über Onload-Rückrufe, mit denen Sie steuern können, ob Bilder geladen werden oder nicht.
- Erfordert akribische Genauigkeit. Sie müssen die Abmessungen für alle Bilder festlegen. Und nicht weniger wichtig, wenn Sie ein Bild durch ein anderes ersetzen, müssen Sie das CSS für neue Größen bearbeiten.
CSS-Präprozessoren zur Rettung
Höchstwahrscheinlich verwenden Sie bereits einen der CSS-Präprozessoren wie SCSS, LESS, PostCSS oder Stylus - und diese können Ihr Leben erheblich vereinfachen. Versuchen wir, den Code von der Apple-Website mithilfe von SCSS zu optimieren. Nehmen Sie für Medienausdrücke das
Medienmixin und schreiben Sie unser Mixin für das Bild:
@mixin image($width, $height, $url) { width: $width; height: $height; background-size: $width $height; background-repeat:no-repeat; background-image:url($url); }
Setzen wir die Variablen:
$breakpoints: ( 'phone': 735px, 'tablet': 1068px ); $media-expressions: ( 'screen': 'only screen', 'retina': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx), (min-resolution: 144dpi)' );
Wir erhalten ein SCSS, das in Apples CSS eins zu eins kompiliert wird:
.section-imac .imac-image { @include image(939px, 631px, "image_large.jpg"); } @include media('screen', 'retina') { .section-imac .imac-image { @include image(939px, 631px, "image_large2x.jpg"); } } @include media('screen', '<=tablet') { .section-imac .imac-image { @include image(795px, 536px, "image_medium.jpg"); } } @include media('screen', '<=tablet', 'retina') { .section-imac .imac-image { @include image(795px, 536px, "image_medium_2x.jpg"); } } @include media('screen', '<=phone') { .section-imac .imac-image { @include image(365px, 246px, "image_small.jpg"); } } @include media('screen', '<=phone', 'retina') { .section-imac .imac-image { @include image(365px, 246px, "image_small_2x.jpg"); } }
Zusammenfassung
Dies ist ein großartiger Ansatz, um damit zu leben, wenn Sie nicht viele Bilder haben oder diese sich selten ändern.
Tilda: Hintergrundbild mit Unschärfeeffekt
Tilda ist ein Site Builder, der verschiedene Komponenten für die Anzeige von Bildern bereitstellt. Betrachten Sie den einfachsten Weg, um Bilder faul hochzuladen. Wie sieht HTML vor dem Laden eines Bildes aus:
<div data-original="https://static.tildacdn.com/image.jpg" style="background: rgba(0, 0, 0, 0) url(https://static.tildacdn.com/image-small.jpg) no-repeat scroll center center / cover;"> </div>
Der Unschärfeeffekt wird durch die Tatsache erzielt, dass die Vorschau eine kleine Größe (20 x 20 Pixel) hat. Mit Hilfe der CSS-Eigenschaft des Covers wird das Bild jedoch auf die gesamte Breite und Höhe gestreckt. Minus: Diese Unschärfe sieht nicht sehr gut aus, ist aber sehr einfach und überlastet den Prozessor nicht.
Nach dem Laden wird das Bild in voller Größe einfach im Inline-Stil ersetzt.
Vorteile
- Faules Laden.
- Pflegeleicht.
Nachteile
- Das gleiche Bild für jedes Gerät. Anpassungsfähigkeit wird nur innerhalb der Grenzen der Stilisierung implementiert (das Bild wird einfach auf verschiedene Arten zugeschnitten).
- Hässlicher Unschärfeeffekt.
- Es gibt keinen Übergang zwischen Unschärfe und voller Auflösung.
Zusammenfassung
Dies ist eine Arbeitsmethode, wenn Sie eine einfache Komponente benötigen und sich nicht mit sechs oder mehr Bildern für unterschiedliche Bildschirmauflösungen beschäftigen möchten. Gut für Websites mit vielen Bildern.
Medium: Leinwandunschärfe
Die Blogging-Plattform medium.com hat aufgrund des wunderschönen Unschärfeeffekts für unterladene Bilder einen großen Unterschied in der Welt der Webbilder gemacht. Dieser Effekt wird mithilfe der Stackblur-Canvas-Bibliothek erzielt.
HTML sieht aus wie ein Sandwich:
<img src="placeholder.jpg"> <canvas> <img src="full-size.jpg">
Auf diese Weise können Sie den Effekt eines reibungslosen Übergangs realisieren. Bei einem Bild in voller Größe geht die Deckkraft: 0 zunächst durch den CSS-Übergang zur Deckkraft: 1.
Blur Battle: CSS gegen SVG gegen Canvas
Wenn wir also nicht Apple sind, ist es höchstwahrscheinlich bequemer, das verzögerte Laden von Bildern und den Unschärfeeffekt zu verwenden. Im Moment gibt es mindestens drei Möglichkeiten, um einen Blair-Effekt zu erzeugen (und eine weitere Option von Tilda, die wir jedoch nicht berücksichtigen werden, da dies kein „echter“ Blair ist).
Warum lohnt es sich, Stackblur-Canvas zum Verwischen zu verwenden, wenn im CSS-Browser bereits ein Filter zum Verwischen integriert ist?
- Die Probleme. CSS- und SVG-Filter verwischen standardmäßig die Bildränder. Für den SVG-Filter gibt es eine spezielle Lösung , für den eingebauten Filter: blur () müssen Sie beschneiden.
- Leistung Stackblur-canvas funktioniert sehr schnell, CSS-Filter arbeiten sogar noch schneller. Bei einer großen Anzahl verschwommener Bilder ist CSS-Filter definitiv die richtige Wahl.
- Schönheit Hier subjektiv, aber meiner Meinung nach sieht Stackblur schöner aus. Ein SVG-Filter weist hässliche Artefakte auf.
Picture Tag - der Höhepunkt der Evolution
Gleich zu Beginn haben wir die Apple-Methode beschrieben und festgestellt, dass CSS Medienausdrücke sowohl für die Bildschirmgröße als auch für die Pixeldichte enthält. Und sie können gleichzeitig verwendet werden, um ein bestimmtes Bild für die Anzeige auszuwählen. Ein wesentlicher Nachteil ist nur, dass das Bild auf dem Hintergrund sein Seitenverhältnis nicht „kennt“ und nicht „Gummi“ sein kann. Darüber hinaus ist aus Sicht der Semantik des Webs die Verwendung des Hintergrunds für die Anzeige aller Bilder in einer Reihe falsch.
Das img-Tag hat möglicherweise ein srcset-Attribut, Sie müssen jedoch eine Bildschirmgröße oder Pixeldichte auswählen. Sie können diese Parameter nicht kombinieren.
Das Bild-Tag ist frei von diesem Nachteil und „kennt“ wie img sein Seitenverhältnis. Es wird bereits von
92% der Browser unterstützt. Dieses Tag ist für diejenigen geeignet, die es sich leisten können, sich nicht an den Internet Explorer anzupassen.
Intersection Observer API
Lassen Sie uns abschließend über die Implementierung des verzögerten Ladens von Bildern sprechen. Der klassische Ansatz besteht darin, eine Kombination aus Bildlauf-, Größenänderungs- und Orientierungsänderungsereignissen zu verwenden und die Position eines bestimmten Bildes relativ zum sichtbaren Bereich des Bildschirms zu berechnen.
Im Jahr 2019 können Sie den Krückensatz durch eine spezielle Browser-API ersetzen - den
Kreuzungsbeobachter . Es wird von allen modernen Browsern unterstützt. Für ältere iOS und IE sollten Sie die offizielle
w3c-Polyfüllung verwenden .
Ein Blick in die Zukunft: Was fehlt noch für völliges Glück
Wir haben also bereits ein Bild-Tag, das eine gute Browser-Unterstützung bietet, aber das Problem des verzögerten Ladens bleibt bestehen. Wir müssen uns immer noch auf unsere eigenen Implementierungen verlassen, die auf Kreuzungsbeobachtern oder einer Kombination von JS-Ereignissen basieren. Wann bieten Browser eine native Lösung an? Beispielsweise verspricht Chrome Version 75, die Ladeeigenschaft für img- und iframe-Tags zu unterstützen. Sie können Ihre Komponenten für die native Unterstützung für verzögertes Laden aktualisieren, indem Sie das Vorhandensein einer Eigenschaft im Prototyp des Bildes überprüfen: Wenn dies erfolgreich ist, können Sie Ihren eigenen Code für verzögertes Laden ablehnen, da alles vom Browser für Sie erledigt wird!
if ('loading' in HTMLImageElement.prototype)
CMS und Benutzerinhalte
Wie können von Benutzern hochgeladene Bilder am besten angezeigt werden? In der Regel lohnt es sich, alles so einfach wie möglich zu machen, ohne ihn zu zwingen, Bilder separat für Telefon, Tablet und Desktop hochzuladen. Wir haben also nur ein Bild für alle Geräte. In einer solchen Situation ist der Ansatz Tilda (für maximale Einfachheit) oder Medium perfekt - wenn Sie einen echten Unschärfeeffekt erzielen möchten, ersetzen Sie möglicherweise Stackblur-Canvas durch Standard-CSS: Blur (), um eine höhere Leistung zu erzielen.
Zusammenfassung
Es gibt immer noch keine einzige, „korrekteste“ Möglichkeit, Bilder anzuzeigen. Wenn Sie ältere Browser und IE unterstützen müssen, wählen Sie ein Hintergrundbild mit Medienausdrücken und Bild für einfache Fälle. Bei neuen Projekten ist es möglicherweise bequemer, das Hintergrundbild durch ein Bild zu ersetzen. Wenn Sie eine schöne, faule Ladung ausführen möchten, versuchen Sie es mit Stackblur-Canvas. Wenn Ihnen die Leistung wichtig ist, können Sie CSS-Filter oder gestreckte Bilder auf einem Tilde-Hintergrund verwenden.