Bei der Bereitstellung einer Website verwenden die Entwickler in der Regel dasselbe Bild für alle Bildschirmgrößen, was keine gute Praxis ist, da man sich bei der Größenänderung nicht auf den Browser verlassen kann. In einer solchen Situation kommen die responsiven Bilder zum Einsatz, die dafür sorgen, dass das Bild in der für das entsprechende Gerät geeigneten Größe und Qualität heruntergeladen wird, wodurch die Seitenladegeschwindigkeit erhöht wird.
Wie kann die Seitenladegeschwindigkeit mithilfe von Responsive Images verbessert werden?
Um die Seitenladegeschwindigkeit durch responsive Bilder zu verbessern, sollten Sie die folgenden Methoden in Betracht ziehen:
Beispiel 1: Verbessern Sie die Seitenladegeschwindigkeit durch responsive Bilder mithilfe des „srcset“-Attributs
Der bequemste Ansatz zum Anwenden reaktionsfähiger Bilder kann die Verwendung der „ Quelle Attribut angesammelt im „ ' Etikett. Dieses Attribut ermöglicht es dem Programmierer, verschiedene Bildgrößen anzugeben, und der Browser wählt automatisch das am besten geeignete Bild im Hinblick auf die Bildschirmgröße des Benutzers. Es folgt die Demonstration:
DOCTYPE html >
< html >
< Kopf >
< Meta Zeichensatz = „utf-8“ >
< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >
< Titel > Titel >
Kopf >
< Körper >
< Bild src = „F:\JOB TECHNISCHE ARTIKEL\imgre.png“ alles = „Responsives Bild“
Quelle = „F:\JOB TECHNISCHE ARTIKEL\imgre.png 400w, F:\JOB TECHNISCHE ARTIKEL\imgre.png 800w, F:\JOB TECHNISCHE ARTIKEL\imgre.png 1200w“
/>
Körper >
html >
In diesem Code:
- Der ' Quelle ”-Attribut ist enthalten, das den Pfad des Bildes und jedes Mal unterschiedliche Breiten umfasst.
- Es ist so, dass das Bild „ F:\JOB TECHNISCHE ARTIKEL\imgre.png 400w „ stellt einen Bildpfad mit einer Breite von „ dar 400 ” Pixel.
- Basierend auf diesen Informationen analysiert der Browser das am besten geeignete Bild zum Herunterladen basierend auf der Bildschirmgröße des Benutzers, sodass auf den kleineren Bildschirmen kleinere Bilder angezeigt werden, wodurch Bandbreite gespart wird.
Ausgabe
Beispiel 2: Verbessern Sie die Seitenladegeschwindigkeit durch responsive Bilder durch Angabe unterschiedlicher Pixeldichten
In diesem Beispiel wird der Bildpfad zusammen mit unterschiedlichen Pixeldichten für hochauflösende Anzeigen angegeben. Dies kann erreicht werden über die „ Quelle ”-Attribut, unten gezeigt:
DOCTYPE html >< html >
< Kopf >
< Meta Zeichensatz = „utf-8“ >
< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >
< Titel > Titel >
Kopf >
< Körper >
< Bild src = „F:\JOB TECHNISCHE ARTIKEL\imgre.png“ alles = „Responsives Bild“ Quelle = „F:\JOB TECHNISCHE ARTIKEL\imgre.png 1x, F:\JOB TECHNISCHE ARTIKEL\imgre.png 1,5x, F:\JOB TECHNISCHE ARTIKEL\imgre.png 2x“
/>
Körper >
html >
Geben Sie in diesem Codeausschnitt den Bildpfad dreimal mit unterschiedlichen Pixeldichten an. Auf diese Weise wählt der Browser das am besten geeignete/geeignetste Bild aus, um auf verschiedenen Bildschirmen höchste Qualität zu gewährleisten.
Notiz: Der ' 1x „Pixel“ ist der Standardwert, daher kann der Benutzer entscheiden, ob er ihn mit dem Bildpfad verknüpfen möchte oder nicht.
Ausgabe
Beispiel 3: Verbessern Sie die Seitenladegeschwindigkeit durch responsive Bilder mithilfe des „sizes“-Attributs
In manchen Situationen kann es zu Einschränkungen kommen, wenn die tatsächliche Bildgröße auf dem Bildschirm von der Bildschirmbreite abweicht. Um dieses Problem anzugehen, wurde „ Größen Das Attribut „kann verwendet werden, um die Bildgröße in Bezug auf Medienabfragen oder eine feste Größe einzubeziehen. Unten finden Sie die Codedemonstration:
DOCTYPE html >< html >
< Kopf >
< Meta Zeichensatz = „utf-8“ >
< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >
< Titel > Titel >
Kopf >
< Körper >
< Bild src = „F:\JOB TECHNISCHE ARTIKEL\imgre.png“ alles = „Responsives Bild“ Quelle = „F:\JOB TECHNISCHE ARTIKEL\imgre.png 50w, F:\JOB TECHNISCHE ARTIKEL\imgre.png 800w, F:\JOB TECHNISCHE ARTIKEL\imgre.png 1200w“
Größen = „(max-width: 800px) 100vw, 800px“
/>
Körper >
html >
In diesem Codeblock ist das „ Größen Das Attribut „integriert die Medienabfragen und -größen. Dadurch wird der Browser angewiesen, die Bildgröße entsprechend der Bildschirmbreite des Benutzers auszuwählen. Dadurch wird sichergestellt, dass die Bilder die angestrebte maximale Breite nicht überschreiten.
Ausgabe
Wichtige Überlegungen bei der Verwendung des Attributs „sizes“.
Es gibt einige Einschränkungen bei der Verwendung von „ Größen Attribut auch unten aufgeführt:
- Bei Verwendung mehrerer Medienabfragen im „ Größen ”-Attribut, stellen Sie sicher, dass die erste echte Medienabfrage aktiviert ist. Stellen Sie außerdem sicher, dass die Medienabfragen vom spezifischsten zum am wenigsten spezifischen sortiert sind.
- Das Attribut „sizes“ unterstützt keine prozentualen Größen, da der Browser nicht weiß, wie breit etwas in Prozent angegebenes sein wird, bis er die Breite des übergeordneten Elements kennt.
Beispiel 4: Verbessern Sie die Seitenladegeschwindigkeit durch responsive Bilder mithilfe des „
Der '
< html >
< Kopf >
< Meta Zeichensatz = „utf-8“ >
< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >
< Titel > Titel >
Kopf >
< Körper >
< Bild >
< Quelle Medien = „(maximale Breite: 100 Pixel)“ Quelle = „F:\JOB TECHNISCHE ARTIKEL\imgbanner.png“ />
< Bild src = „F:\JOB TECHNISCHE ARTIKEL\imgre.png“ alles = „Responsives Bild“ />
Bild >
Körper >
html >
Gemäß diesen Codezeilen:
- Präzisiere das '
” Element, das die „ ”-Elemente für verschiedene Bilder und lassen Sie den Browser basierend auf der Bildschirmgröße des Benutzers das geeignete auswählen. - Auch wenn keiner der „
„Elemente sind für die Bildschirmgröße geeignet, das im „“ angegebene Bild Das Tag „“ dient als Fallback.
- Dadurch wird in einem unvorhergesehenen Fall ein alternatives Bild hinzugefügt, wodurch die erhöhte Seitenladegeschwindigkeit erhalten bleibt.
Ausgabe
Abschluss
Die Seitenladegeschwindigkeit kann durch responsive Bilder mithilfe der „ Quelle ”-Attribut, das unterschiedliche Pixeldichten angibt, unter Verwendung des „ Größen ”-Attribut oder über das „