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
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, nicht anders sind als auf Desktop-Computern.
für eine gute Nutzererfahrung 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
srcsetund den Deskriptorximimg-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" ...>
In 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 unterschiedlichen
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>
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 die
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">
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-mal |
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">
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 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.
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 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 eines 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 Displays 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 tolle Unterstützung auf Mobilgeräten und 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 sind 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 sie sich 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, erwägen Sie den Bildschirm Größe, Geräteauflösung und Seitenlayout.
- Ändern Sie die Eigenschaft
background-imagein CSS für Bildschirme mit hohem DPI-Wert mithilfe von Medienabfragen mitmin-resolutionund-webkit-min-device-pixel-ratio - Verwenden Sie srcset, um zusätzlich zum 1x-Bild in Markup.
- 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);
}
}
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. Mit anderen Worten, 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
);
}
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);
}
}
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">.
Symbolschriftarten mit Vorsicht verwenden
<ph type="x-smartling-placeholder">
<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"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
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 verfügbaren Formaten und verwenden 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
JPGfür Fotos. - Verwenden Sie
SVGfür Vektorgrafiken und einfarbige Grafiken wie Logos und Strichzeichnungen. Wenn Vektorgrafiken nicht verfügbar sind, versuchen Sie es mitWebPoderPNG. - Verwenden Sie
PNGstattGIF, 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;
}
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, da Inhalte wie folgt geladen werden: 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. Donec 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.