Lange Sekunden vor dem Bildschirm zu verbringen und darauf zu warten, dass eine Webseite geladen wird, gehört definitiv nicht zu unseren Lieblingsbeschäftigungen. Die Hauptursache für das Problem ist neben einer langsamen Internetverbindung die Geschwindigkeit, mit der Websites geladen werden. Mithilfe des Think with Google-Testtools werden Websites nach ihrer Ladegeschwindigkeit kategorisiert:
- - 0-1 Sekunden - gute Website
- - von 1 bis 2,5 Sekunden - muss verbessert werden
- - 2,5 Sekunden oder mehr - schwache Website
Im Durchschnitt sind mehr als 60% der Websites Bilder und mehr als 10% Videos. Deshalb ist es wichtig, Bilder und andere Medieninhalte optimal auf einer Website einzusetzen. Die Ladegeschwindigkeit von Bildern wird hauptsächlich durch die Bildformate und die Bildgröße beeinflusst.
|
Verteilung von Inhaltstypen auf einer Website |
INHALT DES BEITRAGS:
Bildformate
Die von den gängigen Browsern unterstützten Bildformate sind APNG, AVIF, GIF, JPEG, PNG, SVG und WebP.
APNG vs. GIF: beide Bildformate werden meist für animierte Bilder verwendet. APNG ist die letztere der beiden, wird aber im Allgemeinen von allen großen Browsern außer dem Internet Explorer unterstützt. APNG kann Farben viel besser verarbeiten, hat eine bessere Qualität und eine kleinere Dateigröße als GIF.
AVIF: ein von AOM - Alliance for Open Media entwickeltes Bildformat, eines der jüngsten der verwendeten Formate, weshalb es die geringste Unterstützung hat. Es bietet die beste Komprimierung im Vergleich zu anderen Formaten, unterstützt eine größere Farbtiefe, animierte Bilder, Transparenz und mehr.
JPEG: das derzeit am häufigsten verwendete Bildformat im Internet. Die Komprimierung ist der größte Verlust im Vergleich zu anderen Formaten.
PNG: wird für Grafiken, einfachere Bilder mit weniger Farbkomposition und Bilder mit transparentem Hintergrund verwendet.
SVG: dies ist ein Vektorbildformat. Ideal für einfachere Webseitenelemente, Logos, Icons, Diagramme usw. für Bilder, die genau gezeichnet werden müssen, damit sie auf die Abmessungen verschiedener Displays passen.
WebP: ein von Google entwickeltes Bildformat, das sich hervorragend für alle Arten von Bildern eignet. Es bietet eine bessere Komprimierung als PNG oder JPEG, aber schlechter als AVIF, unterstützt eine größere Farbtiefe, animierte Bilder, Transparenz und mehr. Es kann jetzt in die Wordpress hochgeladen werden, wird jedoch derzeit nicht von allen Browsern unterstützt.
HEIC: ein Bildformat, das mit Apple-Unterstützung entwickelt wurde, ein weniger verbreitetes und unterstütztes Bildformat.
Obwohl WebP immer weiter verbreitet ist, und HEIC eine gute Komprimierung bietet, sagen Spezialisten, dass AVIF das Bildformat der Zukunft ist.
Raster- und Vektorbilder
Der Begriff Rasterbilder bezieht sich auf bildpunktbasierte Bilder. Der Name des auf dem Monitor angezeigten Bildpunkt ist das Pixel. Der Unterschied zwischen dem Druck und den auf dem Monitor angezeigten Bildpunkte liegt in der Farbzusammensetzung. Während im Druck die 4 Grundfarben CMYK (Cyan, Magenta, Gelb und Key oder Black) verwendet werden, ist die Farbzusammensetzung von pixelbasierten Bildern RGB, d. h. Rot, Grün und Blau.
Der Nachteil von Rasterbildern im Vergleich zu Vektorbildern besteht darin, dass die Dateigröße erheblich größer ist, da jedes Pixel separate Informationen enthält.
Die Bedeutung von Vektorbildern liegt darin, dass sie frei skalierbar sind, d.h. ohne Qualitätsverlust unbegrenzt vergrößert werden können. Die geringe Dateigröße und Skalierbarkeit von Vektorgrafiken machen sie einzigartig für den Digitaldruck von Visitenkarten bis hin zu Werbetafeln geeignet. Zu den Vektordateiformaten gehören SVG, EPS und PDF.
Wo und wann verwenden wir Vektor- und Rasterbilder?
Aus visueller Sicht sind Vektorgrafiken die beste Wahl, wenn das darzustellende Bild skalierbare Formen und Volltonfarben erfordert, erfordert das Projekt jedoch komplexe Farbmischungen, sind pixelbasierte Bilder das geeignete Dateiformat. Siehe meinen früheren Beitrag darüber, was Bilder auf einer Website so attraktiv macht.
Technische Lösungen bei der Verwendung neuerer Bildformate
Es gibt zwei Möglichkeiten, Bilder zu einer Website hinzuzufügen: in der HTML-Seite oder als background-image in der CSS-Datei. In beiden Fällen man kann sowohl vektor- als auch pixelbasierte Bilder verwenden.
IN HTML SEITE
1. Einfach: als ein <img> Element eingefügt.
<img src="beispiel.jpg" alt="alternative text" width="500" height="600" >
2. In ein <picture> Element: bei Angabe einer Quelle zu den Bildern.
<picture>
<source srcset="beispiel.png" type="image/png" media="(min-width: 768px)">
<img src="/beispiel.jpg" alt="beispiel alternative text">
</picture>
3. In ein <figure> Element: wenn Sie dem Bild eine Beschriftung hinzufügen.
<figure>
<img src="/beispiel.jpg" alt="beispiel alternative text">
<figcaption>text</figcaption>
</figure>
4. <picture> in <figure> eingebettet: wenn sowohl Quelle als auch Beschriftung verwendet werden.
<figure>
<picture>
<source srcset="beispiel.png" type="image/png" media="(min-width: 768px)">
<img src="/beispiel.jpg" alt="beispiel alternative text">
</picture>
<figcaption>text</figcaption>
</figure>
IN DER CSS DATEI, ALS BACKGROUND-IMAGE
body {
background-image: url("beispiel.gif");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Wenn ein <img>-Element in die HTML-Seite eingefügt wird, dieses Bild gehört zu den Inhalt, trägt Informationen und ergänzt den Text, das in der CSS-Datei als Hintergrund angezeigte Bild hat hauptsächlich eine dekorative Funktion.
Bei der Verwendung von Bildformaten, die noch nicht allgemein akzeptiert sind, wie AVIF oder WebP, benötigen sie noch eine so genannte Fallback-Datei. Dies kann entweder JPEG oder PNG sein, d. h. Browser, die das Bildformat noch nicht unterstützen, laden beim Browsen die Standard-JPEG- oder PNG-Datei.
Es gibt drei Möglichkeiten, dies zu lösen:
1. Indem Sie die verwendenden Bildformate in <source> des <picture>-Elements angeben.
Wenn der Browser im folgenden Beispiel zuerst das AVIF- und dann das WebP-Format nicht unterstützt, wird die Standard-PNG-Datei geladen. Wenn mehrere Dateiformate als Quelle angegeben sind, wird das erste darstellbare Bildformat angezeigt.
<picture>
<source srcset="beispiel.avif" type="image/avif">
<source srcset="beispiel.webp" type="image/webp">
<img src="/beispiel.png" loading="lazy" alt="beispiel alternative text">
</picture>
2. Für die Konvertierung von JPEG- und PNG-Dateien in die neuen Dateiformate können anspruchsvollere Entwicklungstechniken eingesetzt werden.
3. Erweiterungen verwenden. Auch auf der avif.io-Website werden zahlreiche solcher Erweiterungen vorgeschlagen.
Im Gegensatz zum WebP-Dateiformat, können AVIF- und SVG-Bilder derzeit nicht in die Wordpress-Mediathek hochgeladen werden. Es kann direkt über FTP oder mit Hilfe von Skripten und Plugins genutzt werden.
Quelle: Mozilla
