Ist die Verwendung von SVG -Bildern gut für die Leistung Ihrer Website?

SVG -Bilder: Ideal für Webdesign

skalierbare Vektorgrafiken (SVG) ist aus vielen Gründen eine ausgezeichnete Wahl für Webgrafikformate. Einer der wichtigsten Gründe ist die relativ kleine Dateigröße. Dies ist jedoch nicht absolut. Lassen Sie uns einen tieferen Blick darauf werfen.

(Dieser Artikel ist Teil einer Reihe von Artikeln in Zusammenarbeit mit SiteGround. Vielen Dank für Ihre Unterstützung für die Partner, die SitePoint ermöglicht haben.)

Vorteile von Vektorbildern

radikale Bilder (wie .jpeg, .png usw.) bestehen aus quadratischen Pixeln, die im Netz angeordnet sind. Je größer das Bild ist, desto mehr Pixel werden verwendet, was zu einer Erhöhung der Dateigröße führt.

Nicht nur das, Pixel-basierte Grafikskalierung ist nicht gut. Was bedeutet das? Hier ist eine Blume mit einer ursprünglichen Breite von 300 x 225 Pixel.

So zeigt das gleiche Bild bei höheren Auflösungen an:

Beachten Sie die signifikante Abnahme seiner verschwommenen Kanten, verschwommenen Oberflächen und der Gesamtbildqualität.

Angesichts der Tatsache, dass Netzhautbildschirme heutzutage auf Benutzergeräten üblich sind, ist das Risiko, dass dies mit Rasterbildern auf Ihrer Website geschieht. Eine Alternative besteht darin, hochauflösende Grafiken bereitzustellen, aber dies kann sich natürlich ernsthaft auf die Leistung der Webseiten auswirken.

und srcset Elemente <picture></picture>

Zum Glück löst das moderne HTML dieses Problem mit reaktionsschnellen Bildern (d. H.

und srcset Elemente). Zum Zeitpunkt des Schreibens unterstützen alle wichtigsten Browser -Neuesten diese beiden Elemente mit Ausnahme von IE11 und Opera Mini. <picture></picture>

Das Ziel reaktionsschneller Bilder ist es, das verwendete Gerät für das beste Qualitätsbild bereitzustellen. Dies beinhaltet die Bereitstellung von Bildern bei verschiedenen Auflösungen, ermöglicht dem Browser jedoch nur Bilder, die für den Zugriff auf die Funktionalität des Geräts geeignet sind.

Wenn Sie mehr darüber erfahren möchten, wie diese Technologien funktionieren, wie man reaktionsschnelle Bilder mit SRCSET von Saurabh Kirtani erstellt, befasst sich mit diesem Thema eingehend.

Folgendes ist, wie

in der Praxis aussieht: srcset

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173975437655791.jpg"  class="lazy" alt="Is Using SVG Images Good for Your Website&#x27;s Performance? " />

Folgendes ist ein Beispiel für das

Element: <picture>

<picture>
  <source media="(orientation: landscape)" srcset="retina-horizontal-Ist die Verwendung von SVG -Bildern gut für die Leistung Ihrer Website?.jpg 2x, horizontal-Ist die Verwendung von SVG -Bildern gut für die Leistung Ihrer Website?.jpg">
  <source media="(orientation: portrait)" srcset="retina-vertical-Ist die Verwendung von SVG -Bildern gut für die Leistung Ihrer Website?.jpg 2x, vertical-Ist die Verwendung von SVG -Bildern gut für die Leistung Ihrer Website?.jpg">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173975437681258.jpg"  class="lazy" alt="Ist die Verwendung von SVG -Bildern gut für die Leistung Ihrer Website?">
</picture>

Wie Sie sehen können, wird jedoch nur eine Kopie des Bildes gemäß dem Zugriffsgerät bereitgestellt, und beide Technologien müssen Sie mehrere Kopien des Bildes auf Ihren Server vorbereiten und hochladen. Dies wirkt sich nicht auf die Leistung Ihrer Website aus, sondern wirkt sich negativ auf Ihre Zeit- und Serverbandbreite aus.

SVG ist eine auflösungsunabhängige

Skalierung ist die DNA der Vektorgrafik, während SVG ein XML-basierter Vektorbildformat ist. SVG besteht aus geometrischen Zeichnungsanweisungen (wie Formen, Pfaden, Linien usw.), die unabhängig von der Pixelgröße sind. Aus Sicht der Dateigröße spielt es keine Rolle, welche Größe das Bild wiedergegeben wird, da diese Anweisungen gleich bleiben.

Eine weitere Bedeutung von Auflösungsunabhängiger ist, dass Sie keine unterschiedlichen Kopien desselben Bildes für verschiedene Geräte vorbereiten müssen.

dh einige Faktoren können die SVG -Dateigröße negativ beeinflussen, wie z. B. die Komplexität des Bildes. Je komplexer die Zeichnungsanweisungen, desto größer die Dateigröße.

Vorschläge für effiziente SVG -Dateien

im Allgemeinen sind SVGs für Webseiten sehr einfach, wie Logos, Karten, Symbole usw. Solche einfachen SVG -Bilder haben möglicherweise eine kleinere Dateigröße im Vergleich zu ihren Raster -Gegenstücken.

Es gibt jedoch einige Schritte, die Sie unternehmen können, um die Dateigröße weiter zu optimieren und sicherzustellen, dass Ihre Besucher eine großartige Erfahrung auf Ihrer Website haben.

Folgendes sind einige Tipps:

Integrieren Sie die Leistung von Anfang an in das Design

in das Design.

Sie können einfache SVG -Grafiken selbst schreiben oder JavaScript -Bibliotheken wie Snap.svg verwenden, um Vektorgrafiken zu zeichnen. Um den Job zu erledigen, müssen Sie normalerweise nur einen Vektor -Grafik -Editor wie Adobe Illustrator starten.

Wenn Sie einen Grafikeditor verwenden, kann die Vereinfachung der SVG -Code während der Entwurfsphase das Risiko verringern, die Arbeit zu zerstören, wenn Sie später optimieren.

Der erste Schritt, den Sie in dieser Richtung unternehmen können, besteht darin, die Leinwandgröße im Grafikeditor Ihrer Wahl korrekt einzustellen. Sarah Drasner empfiehlt, je nach Projekt auf 100 x 100 Pixel festzulegen. Dies stellt sicher, dass die Leinwand nicht zu klein ist, was zu einer großen Anzahl von Dezimalstellen führt, die Sie kaum in spät reduzieren können, ohne sich mit den Grafiken zu beschäftigen. Andererseits ist diese Größe nicht zu groß. Tatsächlich bedeutet eine größere Leinwand, dass es eine größere Anzahl entsprechender Pfadpunkte gibt.

Als nächstes ist die Reduzierung der Anzahl der Pfadpunkte von entscheidender Bedeutung, um die Größe der SVG -Datei zu verringern. Dies bedeutet, dass die Verwendung von Formen anstelle von Pfaden so weit wie möglich verwendet wird, aber auch mehrere Pfade zu weniger Pfaden kombiniert, es sei denn, Sie planen, sie separat zu animieren. Adobe Illustrator bietet ein "vereinfachtes" Panel, um die Pfadpunkte weiter zu reduzieren. Dies ist ein kurzes Video -Tutorial, um seine Verwendung zu veranschaulichen.

SVG auf eine intelligente Weise exportieren

Nutzen Sie die Exportfunktion des Grafikeditors voll. Wenn Sie dies nicht tun, kann ein SVG -Code mit proprietären Tags und Aufblähen gefüllt werden, die Sie nicht benötigen.

Wenn Sie beispielsweise die neueste Version des Adobe Illustrators (CC 2017 zum Zeitpunkt des Schreibens) haben, verwenden Sie den Exportieren als Option, um die SVG -Zeichnung zu exportieren und den .SVG -Dateityp auszuwählen:

Das Panel von

Illustrator bietet einige Einstellungen, mit denen Sie die Dateigröße reduzieren und saubere, fast netzwerkfreundliche Tags ausgeben können. Sie können sogar den Code vorschauen, indem Sie auf die Schaltfläche Code im Panel anzeigen.

Für eine detaillierte Vorgehensweise jeder Option in Illustrator ist Geoff Grahams unterschiedliche Möglichkeiten, SVG von Adobe Illustrator zu erhalten, ein großartiger Artikel.

komprimieren Sie mehr Bytes mithilfe des SVG -Optimierungstools

Nach dem Exportieren der SVG -Grafiken können Sie sie weiterhin mit den hervorragenden verfügbaren SVG -Optimierungstools einschränken.

SVGOMG (und die webbasierte GUI entsprechende Version) und die SVG-Editor von Peter Collingridge sind die beliebtesten Tools.

Weitere Informationen zur Verwendung von SVGOMG finden Sie in "SVG Images" von Guillaume Cedric Marty.

Aktivieren Sie die Lieferung von GZIP -SVG -Dateien

Der letzte Schritt in der TO-Do-Liste der SVG-Optimierung besteht darin, die GZIP-Komprimierung auf dem Server zu aktivieren. SVG ist nur ein XML -Tag, sodass es ohne Probleme leicht komprimiert werden kann.

Die Vorteile bei der Dateireduzierung sind erheblich. Anhang J der SVG 1.1 -Spezifikation zeigt eine Vergleichstabelle zwischen unkomprimierten und komprimierten SVG -Dateien. Die Ergebnisse bevorzugen die Komprimierung überwältigend, wobei die Dateigrößen um 77-84%reduziert werden.

Schlussfolgerung

SVG -Grafiken sind eine ausgezeichnete Wahl für Webseiten. Bei Verwendung mit einfachen Symbolen, Logos usw. funktioniert es normalerweise besser als seine Gitter -Gegenstücke, insbesondere wenn Sie die in diesem Artikel aufgeführte Vorsichtsmaßnahmen treffen.

Die oben erwähnten Techniken sind keineswegs erschöpfend. Sie können Ihre Effizienz weiter verbessern. Für detaillierte Optimierungstechniken sind die folgenden Ressourcen zu lesen:

W3C SVG 1.1 Spezifikation
SVG auf der Webseite
"High Performance SVG" von Sarah Drasner
"Techniken zur Optimierung der SVG -Lieferung auf Webseiten" von Sara Soueidan
"Optimierung SVG" von Andreas Larsen

Was ist Ihr SVG -Optimierungs -Workflow? Klicken Sie auf das Kommentarfeld, um zu teilen!

FAQs (FAQs) über SVG und Website -Leistung

Welche Vorteile haben die Nutzung von SVG für die Leistung der Website?

Skalierbare Vektorgrafiken (SVG) bietet viele Vorteile für die Leistung der Website. Erstens geht es bei SVG nicht um eine Lösung, was bedeutet, dass sie ihre Qualität unabhängig von der Bildschirmgröße oder -auflösung beibehalten. Dies ist besonders vorteilhaft für reaktionsschnelles Webdesign. Zweitens hat SVG in der Regel eine kleinere Dateigröße im Vergleich zu anderen Bildformaten wie JPEG oder PNG, was die Ladegeschwindigkeit der Seiten erheblich verbessern kann. Schließlich kann SVG mit CSS und JavaScript animiert und manipuliert werden, wodurch ohne zusätzliche HTTP -Anforderungen eine größere Flexibilität und Interaktivität bietet.

Wie wirkt sich SVG auf die SEO aus?

SVG kann die SEO in vielerlei Hinsicht positiv beeinflussen. Da die SVG -Datei klein ist, kann sie die Ladegeschwindigkeit der Seiten verbessern, was ein Ranking -Faktor für Google ist. Darüber hinaus kann SVG im Gegensatz zu anderen Bildformaten von Suchmaschinen indexiert und gekrabbt werden. Dies bedeutet, dass Sie SVG alternative Text und andere Metadaten hinzufügen können, um Ihre SEO -Bemühungen weiter zu verbessern.

Kann SVG für komplexe Grafiken verwendet werden?

Ja, SVG eignet sich hervorragend für komplexe Grafiken wie Logos, Symbole und Illustrationen. Im Gegensatz zu Rasterbildern verzerren SVGs nach Vergrößerung oder Reduzierung nicht, wodurch sie ideal für komplexe Designs, die in verschiedenen Größen angezeigt werden. Darüber hinaus kann SVG mit CSS und JavaScript gestylt und animiert werden, wodurch komplexer und interaktives Design erreicht wird.

Gibt es Nachteile der Verwendung von SVG?

Während SVG viele Vorteile bietet, gibt es auch einige potenzielle Nachteile zu berücksichtigen. Einige ältere Browser unterstützen möglicherweise nicht SVG, was sich auswirken kann, wie Ihre Website für bestimmte Benutzer angezeigt wird. Obwohl SVGs für einfache oder mäßig komplexe Grafiken hervorragend sind, sind sie jedoch möglicherweise nicht die beste Wahl für hochdetaillierte oder fotografische Bilder.

Wie optimieren Sie SVG für eine bessere Leistung?

Es gibt mehrere Möglichkeiten, SVG für eine bessere Leistung zu optimieren. Eine Möglichkeit besteht darin, den SVG -Code zu verkleinern, der unnötige Zeichen und Leerzeichen entfernt und so die Dateigröße verringert. Sie können auch die GZIP -Komprimierung verwenden, um die Dateigröße weiter zu reduzieren. Erwägen Sie auch, CSS und JavaScript zu verwenden, um SVG -Animationen zu erstellen oder SVGs zu manipulieren, anstatt mehrere SVG -Dateien einzubetten.

Kann SVG die Leistung von mobilen Websites verbessern?

Ja, SVG kann die Leistung mobiler Websites erheblich verbessern. Da SVGs auflösungsunabhängig sind, können sie ihre Qualität auf jeder Bildschirmgröße beibehalten und sie ideal für das reaktionsschnelle Webdesign machen. Darüber hinaus können ihre kleineren Dateigrößen die Seitenladegeschwindigkeiten verbessern, was für mobile Benutzer, die möglicherweise eine langsamere Internetverbindung haben, besonders wichtig ist.

Wie ist SVG in Bezug auf die Leistung mit anderen Bildformaten verglichen?

SVG ist im Allgemeinen besser als andere Bildformate in Bezug auf die Leistung. Ihre Dateigröße ist klein, wodurch die Ladegeschwindigkeit der Seite verbessert wird. Im Gegensatz zu Rasterbildern, die beim Zoomen pixelig werden können, behalten sie ihre Qualität in jeder Größe bei. Für stark detaillierte oder fotolige Bilder können Formate wie JPEG oder PNG jedoch besser geeignet sein.

Kann ich SVG verwenden, um Animationen zu erstellen?

Ja, Sie können SVG mit CSS oder JavaScript animieren. Dies ermöglicht interaktivere und attraktivere Designs, ohne dass zusätzliche HTTP -Anforderungen erforderlich sind. Denken Sie jedoch daran, dass komplexe Animationen die Dateigröße erhöhen und die Leistung beeinflussen können.

Ist SVG leicht zugänglich?

Ja, SVG kann durch Hinzufügen alternativer Text und anderer Metadaten zugänglich gemacht werden. Auf diese Weise können Bildschirmleser Bilder mit Sehbehinderungen mit Sehbehinderungen beschreiben und damit die Zugänglichkeit zu Ihrer Website verbessert.

Wie kann man lernt, SVG zu erstellen und zu verwenden?

Es sind viele Ressourcen online verfügbar, um SVG zu lernen. Websites wie MDN-Webdokumentation, CSS-Tricks und verschiedene Kodierungs-Bootcamps bieten Tutorials und Anleitungen zum Erstellen und Verwenden von SVG. Darüber hinaus gibt es viele Tools wie Adobe Illustrator und Inkscape, mit denen Sie SVG -Grafiken erstellen können.

Das obige ist der detaillierte Inhalt vonIst die Verwendung von SVG -Bildern gut für die Leistung Ihrer Website?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!