Ihre Website enthält viele Fotos, darunter auch Fotos von Produkten, Kollektionen und Symbolen. Die meisten davon sind wie andere Websites im PNG- oder JPEG-Bildformat. Sie haben jedoch festgestellt, dass Ihre Website umso langsamer geladen wird, je mehr PNG- oder JPEG-Bilder hochgeladen werden. Wenn dies bei Ihnen der Fall ist, ist es an der Zeit, über eine Bildoptimierung für einige Bildtypen wie Symbole im SVG-Format nachzudenken.
Im Vergleich zu PNG und JPEG haben SVG-Dateien den Vorteil, dass sie die Ladegeschwindigkeit erhöhen und gleichzeitig die hohe Auflösung der Bilder beibehalten. In diesem Artikel erfahren Sie, was das Beste an SVG-Dateien ist und warum Sie sie verwenden sollten, um die Leistung Ihrer Website zu steigern.
Auf dieser Seite
- Was ist eine SVG-Datei?
- Warum Sie die SVG-Dateien verwenden müssen
- Verwendung von SVG im Be Yours-Theme
Was ist eine SVG-Datei?
Im Gegensatz zu anderen gängigen Bilddateien wie PNG oder JPEG ist SVG (Scalable Vector Graphics) ein vektorbasiertes Bildformat und kann ohne Qualitätsverlust kleiner oder größer skaliert werden. Um SVG-Dateien zu verstehen, vergleichen wir vielleicht ihre Eigenschaften mit dem weit verbreiteten Format PNG.
| SVG | PNG | |
|---|---|---|
| Dateityp | Vektorbasiert | Rasterbasiert (oder pixelbasiert) |
| Dateigröße | Viel kleiner als PNG | Groß mit hoher Auflösung |
| Wie es funktioniert | Verwenden Sie die Programmiersprache XML, um mit dem Webbrowser oder Anwendungen zu kommunizieren und ein Bild anzuzeigen | Führen Sie den Filter-, Kodierungs- und verlustfreien Komprimierungsprozess durch, um das komprimierte Bild genauso anzuzeigen wie das Quellbild |
| Am besten geeignet für | Website-Design, Logo, Symbol | Fotos, Bearbeitung und Logo |
Warum Sie die SVG-Dateien verwenden müssen
Das SVG-Format bietet viele herausragende Vorteile, die es zur besten Wahl für das Website- und Anwendungsdesign machen.
Unbegrenzte Skalierbarkeit
Durch die Verwendung von Vektoren sind SVG-Bilder auflösungsunabhängig und in jeder Dimension skalierbar, ohne dass die Qualität beeinträchtigt wird. Basierend auf dem mathematischen Algorithmus zum Erstellen des Bildes liest der Webbrowser es und zeigt es auf dem Bildschirm an. Das SVG-Format ist nur ein kleiner Code und kann an verschiedene Betrachter wie Anzeigefenster, Geräte, responsive Designs usw. angepasst werden. Dadurch können Ihre Bilder einfacher und ohne Qualitätsverlust vollständig gerendert auf dem Bildschirm angezeigt werden.
Durch diese Funktion ist SVG rasterbasierten Dateitypen wie PNG oder JPEG überlegen. Bei Rasterbildern werden die Bildinformationen in einem Pixelraster gespeichert. Wenn wir also das Bild vergrößern, muss sich jedes Pixel über seine ursprüngliche Größe hinaus vergrößern, was zu einer Verschlechterung der Qualität führt.
Einfache Anpassung
SVG-Dateien geben Webdesignern viel Kontrolle, um Änderungen wie Vektorformen, Texte, Farben mit einigen gängigen Designsoftwares wie Adobe Illustrator oder CorelDraw usw. vorzunehmen. Die Bilddatei ist in nur wenigen Minuten bearbeitet.
Kleine Größe
Wie bereits erwähnt, ist eine SVG-Datei viel leichter als ein Rasterbild und darüber hinaus müssen Sie keinen Kompromiss zwischen der geringen Größe und der Bildqualität eingehen. Je kleiner die Bilder sind, desto schneller lädt Ihre Website. SVGs können also die Ladegeschwindigkeit Ihrer Website insgesamt verbessern.
SEO-freundlich
Da das SVG-Format textbasiert definiert ist, kann die Suchmaschine die Bilder schneller und einfacher lesen, crawlen und indizieren. So können Sie Ihren Seitenrang und Ihre Suchmaschinenoptimierung verbessern. SVGs überwiegen in dieser Hinsicht PNGs oder JPEGs, da Suchmaschinen Rasterbilder nur anhand ihrer Metadaten wie Titel, Schlüsselwörter oder ALT-Tag erkennen.
Heutzutage möchten die meisten Anbieter von Website-Themen Faktoren wie schnelles Laden, hochauflösende Bilder und einen hohen Rang in Suchmaschinen priorisieren. Insbesondere einige Shopify-Themes wie Be Yours weisen bestimmte Abschnitte oder Blöcke aus, in denen nur SVGs akzeptiert werden. Daher wird in diesem Fall empfohlen, SVGs anstelle von PNGs oder JPEGs zu wählen.
Verwendung von SVG im Be Yours-Theme
Eine SVG-Datei kann mit einigen gängigen Grafikdesign-Apps wie Adobe Photoshop oder Adobe Illustrator gemäß den Anweisungen in diesem Artikel selbst erstellt werden.
Wenn es etwas kompliziert ist, SVGs selbst zu erstellen, haben wir einen Anbieter von SVG-Symbolen, Remixicon.com , um Ihnen das Leben zu erleichtern. Remixicon.com verfügt über eine riesige SVG-Symbolbibliothek zur Auswahl und Sie können ganz einfach mit nur zwei Klicks jedes gewünschte Symbol erhalten:
- Geben Sie auf Remixicon.com ein Schlüsselwort ein, um nach dem gewünschten Symbol zu suchen.
- Klicken Sie auf das Symbol in der Liste und wählen Sie die Schaltfläche SVG kopieren .
Greifen Sie auf den Abschnitt/Block Ihres Themes zu, in dem Sie ein SVG-Symbol hinzufügen möchten, und fügen Sie den SVG-Bildcode in das entsprechende enthaltende Feld ein.
Im Be Yours-Design gibt es beispielsweise den Abschnitt „Garantie“ , der es Ihnen ermöglicht, benutzerdefinierte SVG-Dateien im Feld „Benutzerdefiniertes SVG-Symbol“ hinzuzufügen.
- Klicken Sie auf Speichern , um Ihre Änderung zu bestätigen.
Vielen Dank für Ihre Lesezeit. Wir hoffen, dass Sie diesen Artikel nützlich finden. Folgen Sie uns noch heute auf Facebook , Twitter und im Website-Blog , um unsere neuesten Updates zu erhalten!
