HTML Responsive Bildhandbuch: Schnelle Ansicht von Code -Snippets

In diesem Leitfaden wird haupts?chlich die HTML -Syntax (und eine kleine Menge CSS) von reaktionsschnellen Bildern erl?utert. Responsive Image Syntax ist so konzipiert, dass sie ein Bild aus mehreren Optionen basieren, die auf Regeln und Umgebungen basieren. Es gibt zwei Formen reaktionsschneller Bilder, die für verschiedene Zwecke verwendet werden:

Wenn Ihr einziges Ziel ... ist ...

Leistung verbessern

Dann brauchst du ...

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174381805452081.jpg" class="lazy" alt="HTML Responsive Images Guide">

Hier machen wir den Standardwert ( src ) zu einer "niedrigen Aufl?sung" (1 ×) Kopie des Bildes. Die standardm??ige Verwendung der kleinsten/schnellsten Ressourcen ist normalerweise eine kluge Wahl. Wir bieten auch eine 2x -Version an. Wenn der Browser wei?, dass es sich auf einer h?heren Pixeldichte -Anzeige (Teil 2x) befindet, wird dieses Bild verwendet.

<img src="/static/imghw/default1.png" data-src="baby-lowres.jpg" class="lazy" alt="Baby, das gelbes Stirnband l?chelt." srcset="
    baby-high-1.jpg 1.5x,
    baby-high-2.jpg 2x,
    baby-high-3.jpg 3x,
    baby-high-4.jpg 4x,
    baby-high-5.jpg 100x
  ">

Sie k?nnen so viele Pixeldichtevarianten hinzufügen, wie Sie m?chten.

Dies ist zwar cool und nützlich, aber der X-Deskriptor berücksichtigt nur einen kleinen Teil der Verwendung reaktionsschneller Bilder. Warum? Sie erm?glichen es Browsern, nur einen Inhalt anzupassen: Pixeldichte anzeigen. Oft sind unsere reaktionsschnellen Bilder jedoch in einem reaktionsschnellen Layout und die Layoutgr??e des Bildes schrumpfen und dehnen sich, wenn sich das Ansichtsfenster ?ndert. In diesen F?llen muss der Browser Entscheidungen basierend auf zwei Elementen treffen: die Pixeldichte des Bildschirms und die Layoutgr??e des Bildes. Hier kommt der w -Deskriptor- und sizes ins Spiel. Wir werden es im n?chsten Abschnitt vorstellen.

Verwenden von SRCSet/W -Gr??en

Das ist eine gute Sache. Dies macht ungef?hr 85% der reaktionsschnellen Bildnutzung im Netzwerk aus. Wir stellen immer noch mehrere Kopien desselben Bildes an und lassen den Browser die am besten geeignete Kopie ausw?hlen. Anstatt die Pixeldichte (x) zu verwenden, um sie zu kennzeichnen, verwenden wir den W -Deskriptor, um ihre Ressourcenbreite zu kennzeichnen. Wenn baby-s.jpg 300 × 450 betr?gt, markieren wir es als 300 W.

Wenn Sie srcset mit einem Width (W) -Deskriptor wie dieser verwenden, muss er mit der Eigenschaft sizes kombiniert werden, damit der Browser wei?, wie viel Speicherplatz das Bild angezeigt wird. Ohne diese Informationen kann der Browser keine fundierte Wahl treffen.

Erstellen Sie genaue Gr??enattribute

Das Erstellen der sizes der Gr??en kann schwierig sein. sizes beschreibt die Breite des Bildes, die in der Layout Ihrer spezifischen Website angezeigt werden soll. Dies bedeutet, dass es eng mit Ihrem CSS zusammenh?ngt. Die Breite des Bildtrenders h?ngt vom Layout ab, nicht nur vom Ansichtsfenster!

Schauen wir uns ein ziemlich einfaches Layout mit drei Haltepunkten an. Hier ist ein Demonstrationsvideo: (Der Videolink sollte hier eingefügt werden, der Originaltext fehlt)

Haltepunkte werden in CSS unter Verwendung von Medienabfragen ausgedrückt:

 K?rper {
  Rand: 2Rem;
  Schriftart: 500 125% System-UI, Sans-Serif;
}
.PAGE-WRAP {
  Anzeige: Grid;
  Lücke: 1Rem;
  Grid-Template-S?ulen: 1FR 200px;
  Grid-Template-Areas:
    "Header Header"
    "Haupt beiseite"
    "Fu?zeile Fu?zeile";
}

@media (max-Width: 700px) {
  .PAGE-WRAP {
    Grid-Template-S?ulen: 100%;
    Grid-Template-Areas:
      "Kopfball"
      "haupts?chlich"
      "beiseite"
      "Fu?zeile";
  }
}
@media (max-Width: 500px) {
  K?rper {
    Rand: 0;
  }
}

Die Gr??e des Bildes ist an jedem Haltepunkt unterschiedlich. Hier finden Sie eine Aufschlüsselung aller Teile, die die Layoutbreite des Bildes im maximalen Haltepunkt beeinflussen (wenn die Ansichtsfensterbreite gr??er als 700 Pixel ist):

• Bei maximaler Gr??e: Es gibt einen expliziten Abstand von 9REM, sodass die Breite des Bildes calc(100vw - 9rem - 200px) . Wenn die Spalte FR -Einheiten anstelle von 200px verwendet, werden wir hier ein wenig Probleme haben.
• Bei mittlerer Gr??e: Die Seitenleiste wird darunter platziert, sodass weniger Abstand zu berücksichtigen ist. Trotzdem k?nnen wir calc(100vw - 6rem) verwenden, um Margen und Polsterung zu berechnen.
• Bei minimaler Gr??e: K?rperr?nder werden entfernt, so dass calc(100vw - 2rem) ausreicht.

Anruf! Um ehrlich zu sein, f?llt es mir ein bisschen schwer, darüber nachzudenken, und ich habe viele Fehler gemacht, um dies zu schaffen. Endlich habe ich das:

<img ...="" sizes="
    (max-width: 500px) calc(100vw - 2rem), 
    (max-width: 700px) calc(100vw - 6rem),
    calc(100vw - 9rem - 200px)
  ">

Eine sizes , die dem Browser die Breite des Bildes unter allen drei Haltepunkten liefert und das Layout -Netz und alle umgebenden Lücken, R?nder und Polster berücksichtigt, die die Breite des Bildes beeinflussen.

usw! Rumpeln! ??? Das ist immer noch falsch. Ich verstehe nicht warum, denn für mich sieht es so aus, als ob es zu 100% beschreibt, was im CSS -Layout vor sich geht. Aber es ist falsch, denn Martin Ausw?gers Respimagelint sagt. Das Ausführen des Tools auf der isolierten Demo meldete kein Problem, au?er dass sizes Gr??eneigenschaft für einige Ansichtsfenstergr??en falsch ist und sein sollte:

<img ...="" sizes="
    (min-width: 2420px) 2000px, 
    (min-width: 720px) calc(94.76vw - 274px), 
    (min-width: 520px) calc(100vw - 96px), 
    calc(100vw - 32px)
  ">

Ich wei? nicht, wie dies berechnet wird. Es ist v?llig unm?glich, manuell zu pflegen, aber es ist genau. Das Tool von Martin ver?ndert die Seite programmgesteuert mehrmals und schreibt eine sizes aus, die die tats?chliche Breite des Bildes beschreibt, das unter verschiedenen Ansichtsfenster beobachtet wird. Es ist Mathematik von Computern, also ist es richtig. Wenn Sie also eine super pr?zise sizes wünschen, empfehle ich, die falsche Eigenschaft zuerst einzusetzen, dieses Tool auszuführen und die richtige Eigenschaft zu kopieren.

Um all das einen tieferen Blick zu erhalten, sehen Sie sich Eric Portis ' w Deskriptor und sizes an: Hinter den Kulissen.

In Gr??en entspannter

Eine andere M?glichkeit besteht darin, sizes der Hufeisen- und Granatmethode ? (oder mit anderen Worten nahe an der Anzahl) zu verwenden. Dies wird dringend empfohlen.

Zum Beispiel bedeutet sizes="96vw" : "Dieses Bild ist gro? auf der Seite - fast die volle Breite - aber es wird immer ein wenig Polster an den R?ndern sein, sodass es nicht vollst?ndig ist." Oder sizes="(min-width: 1000px) 33vw, 96vw" bedeutet: "Dieses Bild verwendet ein dreispaliges Layout auf dem gro?en Bildschirm, sonst ist es nahe an der vollen Breite." In Bezug auf die Praktikabilit?t kann dies eine vernünftige L?sung sein.

Sie k?nnen feststellen, dass einige automatisch reagierende Bildl?sungen Ihr Layout nicht kennen und daher Vermutungen vornehmen-beispielsweise sizes="(max-width: 1000px) 100vw, 1000px" . Es hei?t nur: "Hey, wir wissen nicht viel über dieses Layout, aber wir werden es versuchen, das schlimmste Szenario ist, dass das Bild in voller Breite ist. Hoffen wir, dass es nie über 1000 Pixel rendert."

Abstrakte Gr??en

Ich glaube, Sie k?nnen sich vorstellen, dass es nicht nur einfach ist, sizes falsch zu machen, sondern auch im Laufe der Zeit falsch wird, wenn sich das Layout der Website ?ndert. Sie sollten eine Vorlagensprache oder einen Inhaltsfilter besser verwenden, um sie abstrahieren, damit Sie die Werte aller Bilder auf Ihrer Website leichter ?ndern k?nnen.

Ich spreche tats?chlich sizes<img alt="HTML Responsive Images Guide" > Verwenden Sie diese Variable im Element. Native HTML liefert diese Funktionalit?t nicht, sondern in einer Backend -Sprache. Beispielsweise k?nnen PHP -Konstanten, Rails -Konfigurationsvariablen, React -Kontext -APIs für globale Zustandsvariablen oder Variablen in Vorlagensprachen wie Flüssigkeit verwendet werden, um sizes abstrahieren zu k?nnen.

 <php in globaler bereich my_sizes="">
<img alt="" sizes="<?php echo $my_sizes; ?>" src="" srcset=""></php>

"Browserauswahl"

Nachdem wir die sizes haben, kennt der Browser die Gr??e (oder nahe an dieser Gr??e) des Bildes und kann seine Magie machen . Das hei?t, es kann einige mathematische Operationen ausführen, die die Pixeldichte des Bildschirms und die Gr??e des Bildes zum Rendern berücksichtigen und dann das am besten geeignete Bild ausw?hlen.

Zun?chst war Mathe recht einfach. Angenommen, Sie werden ein Bild von 40 VW in einem Ansichtsfenster mit einer Breite von 1200 Pixel auf einem 2x -Pixeldichte -Bildschirm anzeigen. Die perfekte Bildbreite sollte 960 Pixel betragen, sodass der Browser nach dem n?chstgelegenen Bild sucht. Der Browser berechnet immer seine bevorzugte Zielgr??e basierend auf den Bedingungen für Ansichtsfenster und Pixeldichte und dem, was Sie aus sizes wissen, und vergleichen Sie dieses Ziel mit dem, was es im srcset für die Auswahl hat. Es kann jedoch ein wenig seltsam sein, wie der Browser die Auswahl trifft.

Wenn der Browser dies entscheidet, kann er mehr Inhalt in diese Gleichung einbeziehen. Beispielsweise kann die aktuelle Netzwerkgeschwindigkeit des Benutzers berücksichtigt werden oder ob der Benutzer eine Art "Datenspeicherung" aktiviert hat. Ich bin mir nicht sicher, ob Browser dies tats?chlich tun, aber sie k?nnen es frei tun, wenn sie wollen, denn so wird die Spezifikation geschrieben. Einige Browser entscheiden sich manchmal, aus Cache zu extrahieren. Wenn die mathematischen Operationen darauf hinweisen, dass sie ein 300 -Pixel -Bild verwenden, aber bereits ein 600 -Pixel -Bild im lokalen Cache haben, verwenden sie dieses Bild direkt. clever. Platz für solche Dinge zu lassen ist ein Vorteil srcset / sizes . Dies ist auch der Grund, warum Sie immer die verschiedenen Gr??en desselben Bildes in srcset verwenden: Sie k?nnen nicht wissen, welches Bild Sie ausw?hlen werden. Dies ist die Browserauswahl .

Das ist sehr seltsam. Kennt der Browser diese Dinge nicht schon?

Sie denken vielleicht: "Nun, warum muss ich dem Browser sagen, wie gro? das Bild rendern wird, wei? es nicht?" Nun, es wei?, aber erst nachdem es Ihre HTML und CSS heruntergeladen und alles darstellt. sizes Gr??enattribut h?ngt mit der Geschwindigkeit zusammen. Es bietet genügend Informationen für den Browser, um Ihre zu sehen<img alt="HTML Responsive Images Guide" > Treffen Sie fundierte Entscheidungen beim Markieren.

<img data-sizes="auto" data-srcset="
    responsive-image1.jpg 300w,
    responsive-image2.jpg 600w,
    responsive-image3.jpg 900w">

Jetzt denken Sie vielleicht: "Aber was ist mit dem Bild, das sich verz?gert laden?" (Das hei?t, bei der Anforderung des versp?teten Bildes wurde das Layout abgeschlossen und der Browser kennt bereits die Rendering -Gr??e des Bildes). Ok, tolle Idee! Die Lazysize -Bibliothek von Alexander Farkas schreibt automatisch das sizes beim faulen Laden aus und diskutiert, wie man automatisch für faule Ladebilder nativ sizes .

Gr??en k?nnen gr??er sein als Ansichtsfenster

Schnelle Anweisungen zu sizes . Angenommen, es gibt einen Effekt auf Ihrer Website, damit das Bild beim Klicken auf das Bild "vergr??ert" wird. Es kann erweitert werden, um das gesamte Ansichtsfenster zu füllen, oder es kann mehr vergr??ert, damit Sie weitere Details sehen k?nnen. In der Vergangenheit mussten wir vielleicht klicken, um src zu wechseln, um auf Versionen mit h?herer Aufl?sung umzusteigen. Unter der Annahme, dass eine Quelle mit h?herer Aufl?sung bereits in srcset ist, müssen Sie nur sizes in einen gro?en Wert ?ndern, z. B. 200 VW oder 300 VW, der Browser sollte die ultrahoch-hohe Aufl?sungsquelle für Sie automatisch herunterladen. Scott Jehl hat einen Artikel über diese Technologie. (Artikellink sollte hier eingefügt werden. Der Originaltext fehlt)

(Der Rest des Restes ist zu lang und wird empfohlen, ihn in Segmenten zu verarbeiten oder nach Bedarf selektiv zu übersetzen)

Das obige ist der detaillierte Inhalt vonHTML Responsive Images Guide. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!