Ein Leitfaden für Anfänger zu responsiven Bildern in HTML

Ein responsives Bild ist ein Bild, das sich an verschiedene Geräteeigenschaften anpasst. Responsive Bilder können, wenn sie richtig gemacht werden, die Leistung und Benutzererfahrung einer Website verbessern.

In diesem Artikel wird untersucht, wie Sie responsive Bilder in HTML erstellen können Quellensatz und das Bildelement.

Warum sollten Sie responsive Bilder verwenden?

Als die Softwareentwickler das Web erstellten, haben sie nicht darüber nachgedacht, wie Browser mit responsiven Bildern umgehen würden. Schließlich griffen die Benutzer nur von Desktops oder Laptops auf das Internet zu. Das stimmt heute natürlich nicht.

Entsprechend Statistikgehen über 90 Prozent der Internetnutzer weltweit mit ihrem Mobiltelefon online. Die meisten Webseiten im Internet 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 responsive machen.

So erstellen Sie responsive Bilder in HTML

Sie können responsive Bilder aus zwei Blickwinkeln angehen – entweder indem Sie dasselbe Bild mit unterschiedlichen Größen bereitstellen oder je nach Anzeigeeigenschaften unterschiedliche Bilder bereitstellen. Du könntest benutzen oder. Diese beiden Optionen handhaben responsive Bilder unterschiedlich, aber sie zeigen alle ein Bild aus gegebenen Alternativen an, abhängig von den festgelegten Regeln.

Verwandt: So machen Sie Ihre Website mit CSS und JavaScript reaktionsschnell und interaktiv

Verwendung von srcset

Der Standard In HTML können Sie nur eine Bilddatei angeben. Wenn Sie je nach Größe des Geräts ein anderes Bild anzeigen möchten, sollten Sie verwenden Quellensatz.

Syntax:

Quellensatz ermöglicht es Ihnen, zusätzliche Quelldateien bereitzustellen, und der Browser wählt das Bild aus, das für diese Bildgröße optimal erscheint.

 src="süße-katze.jpg"
 alt="Eine süße Katze">

Quellensatz besteht aus drei Teilen: Dem Bilddateinamen, der den Pfad zum Quellbild angibt, einem Leerzeichen und der eigentlichen oder tatsächlichen Breite des Bildes.

srcset mit Größen verwenden

Das Problem mit der Verwendung Quellensatz ist, dass Sie keine Kontrolle darüber haben, welches Bild der Browser zur Anzeige auswählt. Kombinieren Quellensatz mit Größen löst dieses Problem. Größen Definieren Sie eine Reihe von Medienbedingungen, die auf das Bild mit der optimalen Größe hinweisen.

Sie können die jetzt neu schreiben Tag oben wie folgt.

size="(max-width: 600px) 480px,
 800px"
 src="süße-katze.jpg"
 alt="Eine süße Katze">

Größen besteht aus einer Medienbedingung, in diesem Beispiel (max-width: 600px), die den Darstellungsbereich darstellt width, space und die Slot-Breite (480px), die den Platz angibt, den das Bild ausfüllen wird, wenn der Medienzustand ist wahr.

Verwandt: So verwenden Sie Medienabfragen in HTML und CSS, um responsive Websites zu erstellen

Hier prüft der Browser zunächst die Gerätebreite und vergleicht diese mit dem Medienzustand. Wenn die Bedingung wahr ist, wird die Schlitzbreite überprüft und ein Bild geladen Quellensatz mit der gleichen Breite oder der nächstgrößeren.

Beachten Sie, dass Sie auch einschließen Quelle das das Bild bereitstellt, um auf Browser zurückzugreifen, die dies nicht unterstützen Quellensatz und Größen.

Quellensatz ermöglicht Ihnen auch, Bilder mit unterschiedlichen Auflösungen unter Verwendung von x-Deskriptoren bereitzustellen.

 src="süße-katze-low.jpg"
 alt="Eine süße Katze">

Wenn das Gerät in diesem Beispiel eine Auflösung von zwei Gerätepixeln pro CSS oder mehr hat, lädt der Browser das Bild cute-cat-high1.jpg.

Hardware- und Software-Pixel

Das Problem bei dieser Lösung ist, dass die Bilder nur in Bezug auf die Pixeldichte des Geräts reagieren. Dies ist das Verhältnis der Hardware-Pixel zu den Software- oder CSS-Pixeln. Ein Hardware-Pixel ist der tatsächliche Lichtpunkt auf dem Bildschirm, während das Software-Pixel oder CSS-Pixel eine Maßeinheit ist. Die Pixeldichte bestimmt die Auflösung des Geräts.

Berücksichtigen Sie beim Rendern von responsiven Bildern nicht nur die Auflösung; Auch die Displaygröße ist wichtig. Andernfalls laden Sie möglicherweise unnötig große oder zu pixelige Bilder.

 src="süße-katze-low.jpg"
 alt="Eine süße Katze">

Verwenden

ist ein HTML-Element, das mehrere umschließt Elemente, die verschiedene Quelldateien enthalten, und eine Element. Während macht Bilder responsiv, indem verschiedene Größen desselben Bildes bereitgestellt werden, ermöglicht es Ihnen, das angezeigte Bild tatsächlich zu ändern.

Syntax:

Stellen Sie sich eine Situation vor, in der Sie ein großes Landschaftsbild haben. Das Bild wird auf einem Desktop angezeigt und sieht proportional aus, auf Mobilgeräten schrumpft es jedoch erheblich, sodass Elemente auf dem Bild winzig werden. Das nicht reagierende Bild trägt zu einer schlechten Benutzererfahrung bei. Mit Sie können Ihrem Browser mitteilen, dass er auf Mobilgeräten zu einer Nahaufnahme im Hochformat wechseln soll.

Wie im ersten Ansatz, enthält ein Medienattribut, mit dem Sie die Medienbedingung bereitstellen können. Beispielsweise zeigt der Browser „cute-cat-480w.jpg“ an, wenn die Breite des Darstellungsbereichs 639 Pixel oder weniger beträgt. Die Quellensatz enthält den Bilddateipfad, den Sie anzeigen möchten, und Quelle gibt das Standardbild an.

Verwandt: 7 neue CSS-Funktionen für eine reaktionsschnelle Website

Fallback für das WebP-Bildformat

Eine andere Sache, die gut handhabt, bietet einen Fallback für moderne Bildformate wie WebP. WebP-Bilder haben eine hohe Leistung, sind klein und bieten ein schnelles Weberlebnis. Sie können sich daher entscheiden, sie auf Ihren Websites zu verwenden. Eine Herausforderung, auf die Sie möglicherweise stoßen, besteht darin, dass nicht alle Browser WebP-Bilder unterstützen. Mit, tritt dieses Problem nicht auf, da Ihr Browser ein alternatives Bild laden kann, wenn er WebP nicht unterstützt.

Warum responsive Bilder in HTML und nicht in CSS erstellen?

CSS bietet robuste Optionen für den Umgang mit responsiven Bildern. Warum also nicht verwenden? Der Browser lädt Bilder vorab, bevor er CSS analysiert. Bevor also das JavaScript Ihrer Website die Viewport-Breite erkennt, um die entsprechenden Änderungen an den Bildern vorzunehmen, wurden bereits die Originalbilder vorgeladen. Aus diesem Grund ist es besser, responsive Bilder mit HTML zu handhaben.

Streben Sie die bestmögliche Bildqualität an

Sie haben gesehen, wie Sie mit HTML responsive Bilder erstellen können > und In diesem Artikel. Die Bereitstellung von responsiven Bildern beinhaltet normalerweise die Berücksichtigung der Bildgröße und der Bildauflösung in Bezug auf die Anzeigegröße. Bei falscher Ausführung kann die Bildqualität leiden. Stellen Sie sicher, dass Sie ein Bild auswählen, das mit den wenigsten Ressourcen eine optimale Benutzerfreundlichkeit bietet.

Responsive Webdesign-Prinzipien

Webdesigner setzen sich seit Jahren für responsives Design ein, aber was ist das und wie kann es hervorragende Webseiten erstellen?

Lesen Sie weiter

Über den Autor