Responsive Bilder sind Bilder, die sich an die unterschiedlichen Eigenschaften des Geräts anpassen, auf dem sie angezeigt werden. Bei richtiger Umsetzung können responsive Bilder die Website-Leistung verbessern und das Benutzererlebnis differenzieren.
In diesem Artikel wird erläutert, wie Sie mit HTML responsive Bilder erstellen können srcset und Element Bild. Verifizieren Sie können unterwegs programmieren: Die besten HTML-Bearbeitungs-Apps für Android.
Schnelle Links
Warum sollten Sie responsive Bilder verwenden?
Als ein Softwareentwickler Webseiten erstellte, dachte er nicht darüber nach, wie Browser mit responsiven Bildern umgehen. Schließlich greifen Nutzer oft nur über Desktop- oder Laptop-Computer auf das Internet zu. Das stimmt heute natürlich nicht mehr.
entsprechend Statista Mehr als 90 Prozent der Internetnutzer weltweit surfen mit ihren Mobiltelefonen im Internet. Die meisten Webseiten enthalten Bilder und diese Bilder sind eine der Metriken, die zur Messung der Webleistung verwendet werden. Um die Leistung zu verbessern, müssen Sie Ihre Bilder optimieren, indem Sie sie reaktionsfähig machen. Verifizieren Die beliebtesten Webentwicklungstools, die von jedem Profi verwendet werden.
So erstellen Sie responsive HTML-Bilder
Responsive Webdesign bedeutet nicht nur, dass sich das Layout je nach den Funktionen des verwendeten Geräts ändern kann, sondern auch der Inhalt. Beispielsweise sind bei Displays mit hoher Auflösung (2x) auch hochauflösende Grafiken erforderlich, um die Schärfe sicherzustellen. Ein Bild mit einem Breitenwert von 50 % funktioniert möglicherweise nur dann gut, wenn der Browser 800 Pixel breit ist, aber auf einem schmalen Telefon hat es große Auswirkungen, und das Problem eines hohen Datenübertragungsverbrauchs bleibt bestehen, wenn die Größe reduziert wird passen kleine Bildschirme.
Der Artikel ist gekennzeichnet img Mit seiner großen Bedeutung; Da es beim Herunterladen, Dekodieren und Anzeigen von Inhalten hilft, sind moderne Browser mit einer unterschiedlichen Anzahl von Bildformaten kompatibel. Das Einbetten von geräteübergreifenden Bildern unterscheidet sich nicht vom Desktop und es sind nur ein paar kleine Änderungen erforderlich, um einen guten Eindruck zu hinterlassen.
Sie können sich responsiven Bildern aus zwei Blickwinkeln nähern – indem Sie entweder dasselbe Bild in unterschiedlichen Größen oder je nach Anzeigeeigenschaften unterschiedliche Bilder präsentieren. Sie können verwenden oder . Diese beiden Optionen behandeln responsive Bilder unterschiedlich, zeigen jedoch je nach Regelsatz alle ein Bild aus bestimmten Alternativen an.
Verwenden Sie srcset
Das Attribut ermöglicht es Ihnen Standard-HTML durch Angabe nur einer Bilddatei. Wenn Sie je nach Gerätegröße unterschiedliche Bilder anzeigen möchten, sollten Sie Folgendes verwenden srcset.
Syntax:
Das Attribut ermöglicht es Ihnen srcset Durch die Bereitstellung zusätzlicher Quelldateien wählt der Browser das Bild aus, das für die verwendete Bildschirmgröße ideal aussieht.
Erfunden srcset Es besteht aus drei Teilen: dem Bilddateinamen, der den Pfad zum Quellbild angibt, dem Speicherplatz und der inneren oder tatsächlichen Breite des Bildes.
Verwenden Sie srcset mit Größen
Es liegt ein Problem bei der Verwendung vor srcset Das heißt, Sie können das Bild, das der Browser anzeigt, nicht steuern. Durch die Kombination von srcset und volumes wird dieses Problem gelöst. Größen definieren eine Reihe von Medienbedingungen, die angeben, dass das Bild die optimale Größe hat.
Sie können jetzt ein Tag erneut eingeben Oben wie folgt.
Die Größen bestehen aus einem Medienstatus, in diesem Beispiel (max-width: 600px), der die Breite des Ansichtsfensters, der Fläche und der Öffnungsbreite (480px) darstellt und den Raum angibt, den das Bild ausfüllt, wenn der Medienstatus korrekt ist.
Dabei prüft der Browser zunächst die Gerätebreite und vergleicht diese mit dem Medienstatus. Wenn die Bedingung erfüllt ist, wird die Schlitzbreite überprüft und ein Bild davon hochgeladen srcset Gleiche Breite oder nächstgrößeres Bild.
Beachten Sie, dass Sie auch Folgendes einschließen src Stellt das Bild als Referenz für Browser bereit, die srcset und size nicht unterstützen.
Dir erlauben srcset Mithilfe von Deskriptoren werden Bilder auch in unterschiedlichen Auflösungen angezeigt x.
Wenn das Gerät in diesem Beispiel eine Auflösung von 1 Pixeln pro CSS oder mehr hat, lädt der Browser das Bild „cute-cat-highXNUMX.jpg“.
Das srcset-Attribut verbessert das Verhalten des img-Elements und erleichtert die Bereitstellung mehrerer Bilddateien für verschiedene Hardwarefunktionen. Wie bei image-set ermöglicht dies die native Funktionalität von CSS srcset Damit der Browser das beste Bild basierend auf den Gerätefunktionen auswählt, z. B. mithilfe eines 2x-Bildes auf einem 2x-Display und möglicherweise in Zukunft eines 1x-Bildes auf einem 2x-Gerät, wenn ein Netzwerk mit begrenzter Bandbreite verwendet wird.
Hardware- und Softwarepixel
Das Problem bei dieser Lösung besteht darin, dass Bilder nur in Bezug auf die Pixeldichte des Geräts reagieren. Dies ist das Verhältnis von Hardwarepixeln zu Software- oder CSS-Pixeln. Ein Hardware-Pixel ist der tatsächliche Lichtpunkt auf dem Bildschirm, während ein Software-Pixel oder CSS-Pixel eine Maßeinheit ist. Die Pixeldichte bestimmt die Auflösung des Geräts.
Berücksichtigen Sie bei der Präsentation responsiver Bilder nicht nur die Auflösung; Auch die Bildschirmgröße spielt eine Rolle. Andernfalls kann es passieren, dass Sie unnötig große oder stark verpixelte Bilder hochladen.
Verwenden
Thema Es handelt sich um ein HTML-Element, das mehrere Elemente umschließt Welches verschiedene Quelldateien und ein Element enthält . Während der Herstellung Bilder reagieren, indem sie unterschiedliche Größen desselben Bildes anbieten, sodass Sie ... Ändern Sie das angezeigte Bild physisch.
Syntax:
Stellen Sie sich eine Situation vor, in der Sie ein großes Landschaftsbild haben. Das Bild wird auf dem Desktop angezeigt und sieht proportional aus, auf Mobilgeräten wird es jedoch so stark verkleinert, dass Elemente im Bild klein werden. Ein nicht reagierendes Bild trägt zu einer schlechten Benutzererfahrung bei. Verwendung des Attributs können Sie Ihren Browser anweisen, bei der Nutzung eines Mobiltelefons auf Nahaufnahme umzuschalten.
Wie bei der ersten Methode enthält das Attribut Ein Medienattribut, mit dem Sie den Medienstatus angeben können. Beispielsweise zeigt der Browser „cute-cat-480w.jpg“ an, wenn das Ansichtsfenster 639 Pixel oder weniger hat. Das Attribut bleibt erhalten srcset Geben Sie den Pfad der Bilddatei an, die Sie anzeigen möchten src Standardbild.
Kehren Sie zum WebP-Bildformat zurück
Das andere, womit Sie es zu tun haben, ist eine Eigenschaft Es eignet sich gut für die Sicherung moderner Bildformate wie WebP. WebP-Bilder sind leistungsstark, oft klein und bieten ein schnelles Web-Erlebnis. So können Sie entscheiden, sie auf Ihren Websites zu verwenden. Die Herausforderung, vor der Sie möglicherweise stehen, besteht darin, dass nicht alle Browser WebP-Bilder unterstützen. Mit einem Thema Dieses Problem tritt nicht auf, da Ihr Browser ein alternatives Bild laden kann, wenn er WebP nicht unterstützt.
Warum sollten Sie gegenüberliegende Bilder in HTML und nicht in CSS erstellen?
CSS bietet leistungsstarke Optionen für die Arbeit mit responsiven Bildern. Warum nutzt du es dann nicht? Der Webbrowser lädt Bilder vorab, bevor er das CSS analysiert. Bevor also das JavaScript Ihrer Website das Ansichtsfenster erkennt, um entsprechende Änderungen an den Bildern vorzunehmen, werden die Originalbilder vorab geladen. Aus diesem Grund werden responsive Bilder am besten mit HTML verarbeitet.
Streben Sie nach der bestmöglichen Bildqualität
Sie haben gesehen, wie Sie mithilfe eines Themes responsive Bilder in HTML erstellen können و In diesem Artikel. Bei der Bereitstellung reaktionsfähiger Bilder müssen in der Regel die Bildgröße und die Auflösung im Verhältnis zur Bildschirmgröße berücksichtigt werden. Bei falscher Vorgehensweise kann die Bildqualität beeinträchtigt werden. Stellen Sie sicher, dass Sie ein Bild wählen, das möglichst wenig Ressourcen nutzt. Verifizieren So öffnen und konvertieren Sie HEIC-Bilder auf Android.
