Responsive Bilder

Ein Bild sagt mehr als 1.000 Wörter und Bilder sind ein wesentlicher Bestandteil jeder Seite. Sie machen aber auch oft den Großteil der heruntergeladenen Byte aus. Mit responsivem Webdesign können sich nicht nur unsere Layouts aufgrund der Geräteeigenschaften ändern, sondern auch Bilder.

Responsives Webdesign bedeutet, dass sich unsere Layouts nicht nur je nach Gerät ändern können. Eigenschaften, aber auch der Inhalt kann sich ändern. Zum Beispiel auf hoher (2-fache) Auflösung und hochauflösende Grafiken sorgen für schärfere Displays. Ein Bild mit einer Breite von 50% funktioniert gut, wenn der Browser 800 Pixel breit ist, aber zu viel Platz auf einem schmalen Telefon und erfordert denselben Bandbreiten-Overhead wenn sie verkleinert werden, damit sie auf einen kleineren Bildschirm passen.

Art Direction

In anderen Fällen muss das Bild vielleicht drastischer geändert werden, z. B. durch Ändern des Proportionen, das Zuschneiden und sogar das Ersetzen des gesamten Bildes. In diesem Fall Bildwechsel wird als Art Direction bezeichnet. Weitere Informationen finden Sie unter responsiveimages.org/demos/ Beispiele.

Responsive Bilder

Wussten Sie, dass Bilder durchschnittlich mehr als 60% der Bytes ausmachen, die zum Laden einer Webseite benötigt werden?

In diesem Kurs lernen Sie, wie Sie im modernen Web mit Bildern arbeiten. dass Ihre Bilder gut aussehen und auf jedem Gerät schnell geladen werden.

Dabei erlernen Sie eine Reihe von Fähigkeiten und Techniken, responsive Bilder in Ihren Entwicklungsworkflow zu integrieren. Am Ende des Im Kurs entwickeln Sie mit Bildern, die sich an die Darstellungsbereichsgrößen und Nutzungsszenarien anpassen.

Dieser kostenlose Kurs wird über Udacity angeboten

Kurs absolvieren

Bilder im Markup

Das img-Element ist leistungsstark – es lädt, decodiert und rendert und moderne Browser unterstützen eine Reihe von Bildformaten. Mit Bilder, die geräteübergreifend funktionieren, sich genauso wie auf Desktop-Computern für eine gute User Experience sind einige kleinere Anpassungen erforderlich.

Zusammenfassung

• Relative Größen für Bilder verwenden, damit sie nicht versehentlich überlaufen Container.
• Verwenden Sie das Element picture, wenn Sie verschiedene Bilder angeben möchten, zu den Gerätemerkmalen (auch Art Direction genannt).
• Verwende srcset und den Deskriptor x im img-Element, um Hinweise für und suchen im Browser nach dem besten Bild, das bei der Auswahl aus verschiedenen Dichten verwendet werden soll.
• Wenn Ihre Seite nur ein oder zwei Bilder enthält und diese nirgendwo anders auf Ihrer Website können Sie Inline-Bilder verwenden, um die Zahl der Dateianfragen zu verringern.

Relative Größen für Bilder verwenden

Denken Sie daran, bei der Angabe der Breite von Bildern relative Einheiten zu verwenden, um zu verhindern, dass die dass der Darstellungsbereich versehentlich überläuft. Beispielsweise führt width: 50%; dazu, muss die Bildbreite 50% des beinhaltenden Elements betragen (nicht 50% des Darstellungsbereichs oder 50% der tatsächlichen Pixelgröße).

Da CSS-Inhalte den Container überlaufen lassen, müssen Sie möglicherweise max- width: 100 %, um zu verhindern, dass Bilder und andere Inhalte überlaufen. Beispiel:

img, embed, object, video {
    max-width: 100%;
}

Geben Sie über das Attribut alt auf img aussagekräftige Beschreibungen an. Elemente; Diese helfen, die Barrierefreiheit Ihrer Website zu verbessern, indem sie Kontext zum Bildschirm liefern. Lesegeräte und andere assistive Technologien.

imgs für Geräte mit hohem DPI-Wert mit srcset optimieren

Das Attribut srcset verbessert das Verhalten der img-Element, mit dem mehrere Bilddateien bereitgestellt werden können für unterschiedliche Geräteeigenschaften. Ähnlich wie image-set CSS-Funktion nativem CSS-Code kann srcset dem Browser die beste Auswahl je nach den Eigenschaften des Geräts, z. B. mit ein 2x-Bild auf einem 2x-Display und möglicherweise in Zukunft ein 1x-Bild auf ein doppelt so hohes Gerät bei Netzwerk mit begrenzter Bandbreite.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

Bei Browsern, die srcset nicht unterstützen, verwendet der Browser einfach die Standardeinstellung Bilddatei, die mit dem Attribut src angegeben wird. Deshalb ist es wichtig, enthalten immer ein Bild, das auf jedem Gerät angezeigt werden kann, Funktionen. Wenn srcset unterstützt wird, ist die durch Kommas getrennte Liste der Bilder/Bedingungen werden vor Anfragen geparst und nur die das entsprechende Bild heruntergeladen und angezeigt wird.

Die Bedingungen können zwar alles umfassen, von der Pixeldichte über die Breite bis hin zur Höhe, wird derzeit nur die Pixeldichte gut unterstützt. Zum Ausgleich bei zukünftigen Funktionen. Stellen Sie einfach das 2-fache Bild in das Attribut.

Art Direction in responsiven Bildern mit picture

Um Bilder basierend auf den Geräteeigenschaften zu ändern (auch bekannt als „Kunst“) verwenden Sie das Element picture. Die Das picture-Element definiert eine deklarative Lösung für mehrere Versionen eines Bildes basierend auf Gerätegröße, Geräteauflösung, Ausrichtung, und vieles mehr.

Verwenden Sie in einer Bildquelle das Element picture in verschiedenen Dichten vorhanden ist oder wenn ein responsives Design eine auf einigen Bildschirmtypen etwas anderes Bild. Ähnlich wie die video-Element, mehrere source-Elemente können aufgenommen werden, wodurch es möglich ist, unterschiedliche Bilddateien je nach Medienabfragen oder Bildformat.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Ausprobieren

Wenn die Browserbreite im Beispiel oben mindestens 800 Pixel beträgt, ist entweder head.jpg oder head-2x.jpg wird je nach Geräteauflösung verwendet. Wenn der Parameter zwischen 450 und 800 Pixel hat, wird entweder head-small.jpg oder head-small- 2x.jpg verwendet, je nach Geräteauflösung. Für Bildschirmbreiten weniger als 450 Pixel und Abwärtskompatibilität, wenn das picture-Element nicht unterstützt, rendert der Browser stattdessen das img-Element. Dieser sollte immer enthalten.

Bilder in relativer Größe

Wenn die endgültige Größe des Bildes nicht bekannt ist, kann es schwierig sein, eine Dichtedeskriptor für die Bildquellen. Dies gilt insbesondere für Bilder, die sich über eine proportionale Breite des Browsers erstrecken und je nach die Größe des Browsers.

Anstatt feste Bildgrößen und -dichten bereitzustellen, können Sie die Größe jedes bereitgestellten Bilds durch Hinzufügen einer Beschreibung für die Breite sowie der Größe des Bildelement, sodass der Browser den effektiven Wert Pixeldichte und wählen Sie das beste Bild zum Herunterladen aus.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Ausprobieren

Im obigen Beispiel wird ein Bild mit der Hälfte der Breite des Darstellungsbereichs gerendert. (sizes="50vw") und je nach Breite des Browsers und seines Gerätepixels Seitenverhältnis, ermöglicht es dem Browser, unabhängig von der Größe über das Browserfenster. In der folgenden Tabelle sehen Sie beispielsweise, welches Bild Browser wählt Folgendes aus:

Browserbreite	Pixelverhältnis des Geräts	Verwendetes Bild	Effektive Lösung
400 Pixel	1	200.jpg	1x
400 Pixel	2	400.jpg	2x
320 Pixel	2	400.jpg	2,5-fach
600 Pixel	2	800.jpg	2,67x
640 Pixel	3	1000.jpg	3,125x
1.100 Pixel	1	800.png	1,45‑fach

Haltepunkte in responsiven Bildern berücksichtigen

In vielen Fällen kann sich die Bildgröße je nach Layout der Website ändern. Haltepunkte. Auf einem kleinen Bildschirm soll das Bild z. B. decken die gesamte Breite des Darstellungsbereichs ab. Auf größeren Bildschirmen sollte sie einen kleinen Anteil einnehmen.

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

Ausprobieren

Das Attribut sizes im obigen Beispiel nutzt mehrere Medienabfragen, um die Größe des Bildes angeben. Wenn die Browserbreite größer als 600 Pixel hat das Bild 25% der Breite des Darstellungsbereichs. wenn sie zwischen 500 Pixel ist Bei einer Größe von 600 Pixeln entspricht das Bild 50% der Breite des Darstellungsbereichs. und unter 500 Pixeln, die volle Breite aufweist.

Produktbilder maximierbar machen

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Kunden möchten sehen, was sie kaufen. Auf Websites von Einzelhändlern erwarten Nutzer, kann ich mir hochauflösende Nahaufnahmen von Produkten ansehen, Details und Studienteilnehmende wenn sie das nicht können.

Ein gutes Beispiel für antippbare, maximierbare Bilder bietet das J. Crew-Website. Ein ausgeblendetes Overlay zeigt an, dass ein Bild antippbar ist. mit feinen Details sichtbar.

Andere Bildtechniken

Komprimierende Bilder

Die Komprimierungsbildtechnik stellt für alle Geräte ein hoch komprimiertes 2-faches Bild bereit, Funktionen des Geräts. Je nach Bildtyp und -ebene Komprimierung wird die Bildqualität möglicherweise nicht geändert, aber die Dateigröße wird verringert. erheblich.

Ausprobieren

JavaScript-Bildersatz

Beim JavaScript-Bildersatz werden die Funktionen des Geräts geprüft und das Richtige.“ Sie können das Pixelverhältnis auf dem Gerät über window.devicePixelRatio abrufen, die Bildschirmbreite und -höhe abrufen und sogar Netzwerkverbindungs-Sniffing über navigator.connection oder Ausgabe einer Fälschung Wenn Sie all diese Informationen erfasst haben, können Sie entscheiden, Bild zum Laden.

Ein großer Nachteil bei diesem Ansatz ist, dass Sie durch die Verwendung von JavaScript das Laden des Bildes wird so lange verzögert, bis mindestens der Look-Ahead-Parser abgeschlossen ist. Dieses bedeutet, dass der Download der Bilder erst nach dem pageload-Ereignis gestartet wird Bränden. Außerdem lädt der Browser höchstwahrscheinlich sowohl die 1x- als auch die 2x- Bilder, was zu einer größeren Seitengröße führt.

Inline-Bilder: Raster- und Vektorbilder

Es gibt zwei grundlegend unterschiedliche Möglichkeiten, Bilder zu erstellen und zu speichern. wirkt sich dies auf die responsive Bereitstellung von Images aus.

Rasterbilder wie Fotos und andere Bilder werden als Raster einzelner Farbpunkte dargestellt. Rasterbilder können von einer Kamera oder einem Scanner erstellen oder mit dem HTML-Canvas-Element erstellt werden. Formate wie PNG, JPEG und WebP werden zum Speichern von Rasterbildern verwendet.

Vektorbilder wie Logos und Strichzeichnungen sind Kurven, Linien, Formen, Füllfarben und Farbverläufe. Vektorbilder können erstellt werden, mit Programmen wie Adobe Illustrator oder Inkscape oder ein Vektorformat wie SVG.

SVG

Mit SVG können responsive Vektorgrafiken in eine Webseite eingefügt werden. Die Der Vorteil von Vektordateiformaten gegenüber Rasterdateiformaten besteht darin, dass der Browser kann ein Vektorbild in beliebiger Größe rendern. Vektorformate beschreiben die Geometrie von des Bildes – wie es aus Linien, Kurven, Farben usw. aufgebaut ist. Rasterformate enthalten hingegen nur Informationen zu einzelnen Punkten. sodass der Browser raten muss, wie die Lücken bei der Skalierung ausgefüllt werden.

Unten sehen Sie zwei Versionen desselben Bildes: ein PNG-Bild auf der linken Seite und ein SVG-Bild auf der Seite. auf der rechten Seite. Das SVG sieht in jeder Größe gut aus, während das PNG daneben beginnt auf größeren Bildschirmen verschwommen aussehen.

Wenn Sie die Anzahl der Dateianfragen Ihrer Seite reduzieren möchten, können Sie Bilder inline im SVG- oder Daten-URI-Format an. Im Quelltext dieser Seite Beide Logos unten sind inline deklariert: ein Daten-URI und ein SVG.

SVG bietet großartige Unterstützung auf Mobilgeräten und Desktop-Computern. und Optimierungstools können die SVG-Größe erheblich reduzieren. Die folgenden beiden SVG-Inline-Logos sehen aus, identisch, aber eines ist ungefähr 3 KB groß und das andere nur 2 KB:

Daten-URI

Mit Daten-URIs können Sie eine Datei, z. B. ein Bild, inline einbinden. Dazu legen Sie Die Quelle eines img-Elements als Base64-codierter String unter Verwendung der folgendes Format:

<img src="data:image/svg+xml;base64,[data]">

Der Anfang des Codes für das HTML5-Logo oben sieht wie folgt aus:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(Die Vollversion umfasst mehr als 5000 Zeichen.)

Ziehen Sie 'n' wie zum Beispiel jpillora.com/base64-encoder bereitgestellt werden, zum Konvertieren von Binärdateien wie Bildern in Daten-URIs verfügbar. Genau wie bei SVGs Daten-URIs werden auf Mobilgeräten und auf Mobilgeräten gut unterstützt. Desktop-Browser.

Inline in CSS

Daten-URIs und SVGs können auch in CSS inline eingefügt werden. Dies wird von sowohl auf Mobilgeräten als auch auf Desktop-Computern. Hier sind zwei identisch aussehende Bilder, die Hintergrundbilder in CSS Ein Daten-URI, ein SVG:

Spezialisten für Innenauskleidung und Nachteile

Inline-Code für Bilder kann ausführlich sein, insbesondere Daten-URIs. wollt ihr es verwenden? Um HTTP-Anfragen zu reduzieren. SVGs und Daten-URIs können Folgendes aktivieren: eine ganze Webseite, einschließlich Bildern, CSS und JavaScript, die mit nur eine einzige Anfrage.

Der Nachteil:

• Auf Mobilgeräten können Daten-URIs erheblich langsamer sein als Bilder von einem externen src.
• Daten-URIs können die Größe einer HTML-Anfrage erheblich erhöhen.
• Sie erhöhen die Komplexität Ihres Markups und Ihres Workflows.
• Das Daten-URI-Format ist erheblich größer als das Binärformat (bis zu 30%) und verringert sich dadurch nicht die Gesamtgröße des Downloads.
• Daten-URIs können nicht im Cache gespeichert werden und müssen deshalb für jede Seite heruntergeladen werden, auf der sie verwendet werden.
• Sie werden in IE 6 und 7 nicht unterstützt, in IE8 nur unvollständig.
• Bei HTTP/2 hat die Reduzierung der Anzahl von Asset-Anfragen eine geringere Priorität.

Wie bei allem, was bei reaktionsschnellen Reaktionen der Fall ist, solltest du testen, was am besten funktioniert. Entwickler verwenden Tools zur Messung der Download-Dateigröße, der Anzahl der Anfragen und der Latenz. Daten-URIs sind manchmal nützlich für Rasterbilder, z. B. auf einer Startseite, die nur ein oder zwei Fotos enthält, die nirgendwo sonst verwendet werden. Wenn Sie Vektorbilder inline einzubetten, ist SVG eine viel bessere Option.

Bilder in CSS

Die CSS-Eigenschaft background ist ein leistungsstarkes Tool zum Hinzufügen komplexer Bilder. zu Elementen hinzufügen, sodass mehrere Bilder hinzugefügt werden können, sodass sich diese wiederholen, und vieles mehr. In Kombination mit Medienabfragen wird die Hintergrundeigenschaft zu noch leistungsfähiger, da Bilder je nach Bildschirm geladen werden können. Auflösung, Größe des Darstellungsbereichs und mehr.

Zusammenfassung

• Verwenden Sie das beste Bild, das den Eigenschaften des Displays entspricht, z. B. Bildschirm Größe, Geräteauflösung und Seitenlayout.
• Ändern Sie die Eigenschaft background-image in CSS für Displays mit hohem DPI-Wert mithilfe von Medienabfragen mit min-resolution und -webkit-min-device-pixel-ratio
• Verwenden Sie srcset, um zusätzlich zum 1x-Bild in auszeichnen.
• Leistungskosten beim Ersetzen von JavaScript-Bildern berücksichtigen oder bei der Bereitstellung hochkomprimierter Bilder mit hoher Auflösung Geräte mit geringerer Auflösung.

Medienabfragen für das bedingte Laden von Bildern oder für Art Direction verwenden

Medienabfragen wirken sich nicht nur auf das Seitenlayout aus, Sie können sie auch verwenden, Bilder bedingt laden oder Art Direction je nach Darstellungsbereich bereitstellen Breite.

Im Beispiel unten ist small.png auf kleineren Bildschirmen beispielsweise div heruntergeladen und auf die Inhalte angewendet, auf größeren Bildschirmen background-image: url(body.png) wird auf den Text angewendet und background-image: url(large.png) wird auf den Inhalt div angewendet.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Ausprobieren

Mit „image-set“ hochauflösende Bilder bereitstellen

Die Funktion image-set() in CSS verbessert das Verhalten der Eigenschaft background. Es ist einfach, mehrere Bilddateien für verschiedene Geräte bereitzustellen. Eigenschaften. So kann der Browser je nach des Geräts, z. B. mit einem 2-fachen Bild auf einem 2-fachen Display, oder ein 1x-Bild auf einem 2x-Gerät bei Netzwerk mit begrenzter Bandbreite.

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

Der Browser skaliert nicht nur das richtige Bild, entsprechend anpassen. Anders ausgedrückt: Der Browser geht davon aus, dass 2x-Bilder doppelt so hoch groß als 1x Bilder und skaliert das 2x-Bild um den Faktor 2. dass das Bild auf der Seite offenbar die gleiche Größe hat.

Die Unterstützung für image-set() ist neu und wird nur in Chrome und Safari mit dem Anbieterpräfix -webkit Achten Sie darauf, Fallback-Image für den Fall, dass image-set() nicht unterstützt wird Beispiel:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

Ausprobieren

Mit dem obigen Befehl wird das entsprechende Asset in Browsern geladen, die "image-set" unterstützen. Andernfalls wird auf das 1x-Asset zurückgegriffen. Der offensichtliche Vorbehalt ist zwar image-set()-Browser werden nur wenig unterstützt, die meisten Browser erhalten das 1x-Asset.

Verwenden Sie Medienabfragen für hochauflösende Bilder oder Art Direction

Mit Medienabfragen können Sie Regeln erstellen, Pixel-Verhältnis des Geräts sodass es möglich ist, für 2x- und 1x-Displays unterschiedliche Bilder anzugeben.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome, Firefox und Opera unterstützen alle den standardmäßigen (min-resolution: 2dppx), Safari- und Android-Browser hingegen erfordern den älteren Anbieter mit dem Präfix ohne die Einheit dppx. Diese Stile werden nur geladen, wenn der Gerät mit der Medienabfrage übereinstimmt und Sie müssen Stile für den Basisfall angeben. Dadurch wird auch sichergestellt, dass etwas gerendert wird, wenn der Browser unterstützt keine lösungsspezifischen Medienabfragen.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Ausprobieren

Sie können auch die Syntax mit Mindestbreite verwenden, um alternative Bilder anzuzeigen, die Größe des Darstellungsbereichs anpassen. Diese Technik hat den Vorteil, dass das Bild nicht wenn die Medienabfrage nicht übereinstimmt. Beispielsweise ist bg.png nur heruntergeladen und auf body angewendet, wenn die Browserbreite 500 Pixel oder mehr beträgt:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

SVG für Symbole verwenden

Verwenden Sie beim Hinzufügen von Symbolen zu Ihrer Seite nach Möglichkeit SVG-Symbole oder in Groß- und Kleinschreibung sowie Unicode-Zeichen.

Zusammenfassung

• Verwenden Sie für Symbole SVG oder Unicode anstelle von Rasterbildern.

Einfache Symbole durch Unicode ersetzen

Viele Schriftarten unterstützen unzählige Unicode-Glyphen, die Sie anstelle von Bildern. Im Gegensatz zu Bildern lassen sich Unicode-Schriftarten egal wie klein oder groß sie auf dem Bildschirm erscheinen.

Neben dem normalen Zeichensatz kann Unicode auch Symbole für Pfeile (←), mathematische Operatoren (√), geometrische Formen (★), Steuerbilder (▶), Musiknotation (♬), Griechische Buchstaben (Ω), sogar Schachfiguren (♞).

Das Einfügen eines Unicode-Zeichens erfolgt auf die gleiche Weise wie benannte Entitäten: &#XXXX, wobei XXXX die Unicode-Zeichennummer darstellt. Beispiel:

You're a super ★

Du bist ein Super ★

Komplexe Symbole durch SVG ersetzen

Bei komplexeren Symbolanforderungen sind SVG-Symbole meist und sie können mit CSS gestaltet werden. SVG-Dateien haben eine Reihe von Vorteilen gegenüber Rasterbilder:

• Es handelt sich um Vektorgrafiken, die unendlich skaliert werden können.
• CSS-Effekte wie Farbe, Schattierung, Transparenz und Animationen ist ganz einfach.
• SVG-Bilder können direkt im Dokument eingefügt werden.
• Sie sind semantisch.
• Sie bieten eine bessere Barrierefreiheit mit den entsprechenden Attributen.

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Ausprobieren

Symbolschriftarten mit Vorsicht verwenden

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Symbolschriftarten sind beliebt und können nutzerfreundlich sein, haben aber auch ihre Nachteile. im Vergleich zu SVG-Symbolen:

• Es handelt sich um Vektorgrafiken, die unendlich skaliert werden können, Kantenglättung führt, was dazu führt, dass Symbole nicht so scharf sind wie erwartet.
• Eingeschränkte Stile mit CSS.
• Je nach Zeilenhöhe, Zeichenabstand usw.
• Sie sind nicht semantisch und die Verwendung mit Screenreadern oder andere assistive Technologien.
• Ohne ordnungsgemäße Zuordnung können sie zu einer großen Dateigröße führen, wenn sie nur eine eine kleine Auswahl der verfügbaren Symbole.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Ausprobieren

Es gibt Hunderte kostenloser und kostenpflichtiger Symbolschriftarten, darunter Fonts Super, Pictos und Glyphicons

Achten Sie darauf, das Gewicht der zusätzlichen HTTP-Anfrage und die Dateigröße mit die Notwendigkeit der Symbole. Wenn Sie beispielsweise nur ein paar Symbole benötigen, ist es vielleicht besser, ein Bild oder ein Bild-Sprite zu verwenden.

Bilder für eine bessere Leistung optimieren

Bilder machen oft den Großteil der heruntergeladenen Bytes aus und belegen viel Platz auf der Seite frei. Daher kann die Optimierung Bilder können oft die größten Byteeinsparungen und die größte Leistung erzielen Verbesserungen für Ihre Website: Je weniger Bytes der Browser herunterladen muss, desto geringer ist der Wettbewerb um die Bandbreite des Clients. der Browser alle Assets herunterladen und anzeigen kann.

Zusammenfassung

• Wählen Sie nicht einfach ein Bildformat nach dem Zufallsprinzip aus, sondern machen Sie sich mit den verschiedenen und wählen Sie das am besten geeignete Format.
• Integrieren Sie Tools zur Bildoptimierung und Komprimierung in Ihren Workflow, um Dateigrößen.
• Reduzieren Sie die Anzahl der HTTP-Anfragen, indem Sie häufig verwendete Bilder in Bild-Sprites.
• Um die anfängliche Seitenladezeit zu verbessern und die anfängliche Seitengröße zu reduzieren, laden Sie Bilder erst, nachdem sie sichtbar sind.

Das richtige Format auswählen

Es gibt zwei Arten von Bildern: Vektorbilder und Rasterbilder. Bei Rasterbildern müssen Sie auch das richtige Komprimierungsformat auswählen, Beispiele: GIF, PNG, JPG.

Rasterbilder, wie Fotos und andere Bilder, werden als Raster dargestellt aus einzelnen Punkten oder Pixeln. Rasterbilder stammen in der Regel von einer Kamera oder Scanner oder können mit dem canvas-Element im Browser erstellt werden. Da die die Bildgröße und damit auch die Dateigröße größer wird. Bei einer Skalierung größer als ihr Originalgröße angezeigt wird, werden die Rasterbilder verschwommen, da der Browser wie die fehlenden Pixel ergänzt werden.

Vektorbilder wie Logos und Strichzeichnungen werden durch eine Reihe von Kurven definiert. Linien, Formen und Füllfarben. Vektorbilder werden mit Programmen wie Adobe Illustrator oder Inkscape und in einem Vektorformat wie SVG Vektorbilder basieren auf können sie ohne Qualitäts- oder Änderung der Dateigröße.

Bei der Auswahl des geeigneten Formats ist es wichtig, sowohl die Herkunft des Bildes (Raster- oder Vektor) und Inhalt (Farben, Animation, Text usw.). Kein Format passt zu allen Bildtypen und jedes Format hat seine eigenen Vorteile. und Schwächen.

Bei der Auswahl des geeigneten Formats sollten Sie sich an diesen Richtlinien orientieren:

• Verwenden Sie JPG für Fotos.
• Verwenden Sie SVG für Vektorgrafiken und einfarbige Grafiken wie Logos und Strichzeichnungen. Wenn Vektorgrafiken nicht verfügbar sind, versuchen Sie es mit WebP oder PNG.
• Verwenden Sie PNG statt GIF, da dies mehr Farben ermöglicht und bessere Ergebnisse liefert. Komprimierungsverhältnisse.
• Für längere Animationen empfiehlt sich die Verwendung von <video>. Damit erhalten Sie ein besseres Bild und dem Nutzer die Kontrolle über die Wiedergabe gibt.

Verringern Sie die Dateigröße.

Sie können die Größe der Bilddatei durch die "Nachbearbeitung" erheblich reduzieren. die Bilder nach dem Speichern. Für die Bildkomprimierung gibt es eine Reihe von Tools, verlustfrei, online, GUI, Befehlszeile. Versuchen Sie nach Möglichkeit, Automatisieren der Bildoptimierung, sodass diese Funktion zu optimieren.

Es gibt mehrere Tools für eine weitere, verlustfreie Komprimierung für JPG und PNG-Dateien ohne Auswirkungen auf die Bildqualität. Für JPG ausprobieren jpegtran oder jpegoptim (nur unter Linux verfügbar): ausgeführt mit der Option --strip-all). Für PNG ausprobieren OptiPNG oder PNGOUT:

Bild-Sprites verwenden

Beim CSS-Spriting werden mehrere Bilder zu einem „sprite Sheet“ Bild. Sie können dann einzelne Bilder verwenden, indem Sie den Parameter Hintergrundbild für ein Element (das Sprite Sheet) sowie einen Versatz zur Anzeige des des richtigen Teils.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

Ausprobieren

Spriting hat den Vorteil, dass weniger Downloads mehrere Images erstellen, während das Caching weiterhin aktiviert ist.

Lazy Loading nutzen

Lazy Loading kann das Laden auf langen Seiten mit vielen „Below the fold“-Anzeigen „Below the fold“ (mit Scrollen sichtbar) Inhalt wurde geladen und gerendert. Zusätzlich zur Leistung kann das Lazy Loading für unendliches Scrollen sorgen.

Seien Sie vorsichtig, wenn Sie Seiten mit unendlichem Scrollen erstellen, denn Inhalte werden als sichtbar wird, sehen Suchmaschinen diese Inhalte möglicherweise nie. Außerdem die nach Informationen suchen, die sie in der Fußzeile sehen möchten, die Fußzeile nie sehen, da immer neue Inhalte geladen werden.

Bilder vollständig vermeiden

Manchmal ist das beste Bild gar kein Bild. Verwenden Sie nach Möglichkeit Funktionen des Browsers, um gleiche oder ähnliche Funktionalität. Browser generieren visuelle Elemente, die zuvor erforderlich waren Bilder. Das bedeutet, dass Browser keine separaten Bilder Dadurch werden ungünstig skalierte Bilder verhindert. Sie können Unicode oder um Symbole zu rendern.

Text im Markup und nicht in Bilder einbetten

Nach Möglichkeit sollte Text aus Text bestehen und nicht in Bilder eingebettet sein. Für z. B. Bilder für Überschriften verwenden oder Kontaktinformationen wie Telefonnummern oder Adressen direkt in Bildern. So können Nutzer Kopieren und Einfügen der Informationen; werden die Informationen für Menschen mit Screenreader und sie ist nicht responsiv. Platzieren Sie den Text stattdessen im Markup und gegebenenfalls Web-Schriftarten verwenden, um den gewünschten Stil zu erreichen.

Bilder mit CSS ersetzen

Moderne Browser können CSS-Funktionen verwenden, um Stile zu erstellen, erforderliche Bilder. Komplexe Farbverläufe können beispielsweise mithilfe des background können Sie Schatten mit box-shadow erstellen und gerundet werden. Ecken können mit der Eigenschaft border-radius hinzugefügt werden.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesken sitzend amet augue eu magna scelerisque porta ut ut dolor. Nullam Placerat Egestas Nisl sed sollicitudin. Fusce Placerat, Ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis Ornare Fringilla dui non vehicula. In hac habitasse platea dictumst. Done Ipsum lectus, Hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

Denken Sie daran, dass die Verwendung dieser Techniken Rendering-Zyklen erfordert, die auf Mobilgeräten eine bedeutende Rolle spielen. Bei übermäßigem Gebrauch verlieren Sie alle Vorteile, die Sie und die Leistung beeinträchtigen.