Back to Question Center
0

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

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

Is Using SVG Images Good for Your Website’s Performance?Is Using SVG Images Good for Your Website’s Performance?Related Topics:
DockerCMSProgrammingOperating Semalt

Dieser Artikel ist Teil einer Serie, die in Zusammenarbeit mit SiteGround erstellt wurde. Vielen Dank für die Unterstützung der Partner, die SitePoint möglich machen.

Es gibt einige gute Gründe, warum Scalable Vector Graphics oder SVG eine gute Wahl für das Grafikformat für das Web sind. Eine relativ kleine Dateigröße ist sicherlich eine davon. Dieser Anspruch ist jedoch nicht ohne eine gewisse Qualifikation. Lassen Sie uns ein wenig tiefer gehen - playground gonfiabili vendita.

Vorteile von Vektorbildern

Rasterbilder, z.B. G. JPEG ,. PNG usw. bestehen aus quadratischen Pixeln, die in einem Raster angeordnet sind. Je größer das Bild ist, desto mehr Pixel werden also verwendet, wodurch sich die Dateigröße erhöht.

Nicht nur das, aber Pixel-basierte Grafiken skalieren nicht sehr gut. Semalt was ich meine. Das ist ein. JPEG-Bild einer Blume in ihrer ursprünglichen Breite von 300 x 225 Pixel:

Is Using SVG Images Good for Your Website’s Performance?Is Using SVG Images Good for Your Website’s Performance?Related Topics:
DockerCMSProgrammingOperating Semalt

Hier ist das gleiche Bild, wenn es mit einer viel höheren Auflösung angezeigt wird:

Is Using SVG Images Good for Your Website’s Performance?Is Using SVG Images Good for Your Website’s Performance?Related Topics:
DockerCMSProgrammingOperating Semalt

Semalt die unscharfen Kanten, die unscharfe Oberfläche und wie die Gesamtqualität des Bildes erheblich verschlechtert wird.

Da Retina-Bildschirme heute auf Geräten von Benutzern üblich sind, ist das Risiko, dass Rasterbilder auf Ihrer Website so aussehen, hoch. Eine Alternative besteht darin, Grafiken mit hoher Auflösung zu liefern, was natürlich die Web-Performance ziemlich hart treffen kann.

Das srcset und Bild Elemente

Glücklicherweise kommt modernes HTML mit reagierenden Bildern , d. e. , die srcset und die Bild Elemente, die zum Zeitpunkt des Schreibens beide in den neuesten Versionen aller gängigen Browser unterstützt werden, mit Ausnahme von EI11 und Opera Mini.

Das Ziel responsiver Bilder besteht darin, das beste Qualitätsbild für das verwendete Gerät zu liefern. Dies bedeutet, Bilder mit verschiedenen Auflösungen zur Verfügung zu stellen, es dem Browser jedoch zu ermöglichen, nur das eine Bild zu laden, das zu den Fähigkeiten des zugreifenden Geräts passt.

Wenn Sie mehr darüber erfahren möchten, wie diese Techniken funktionieren, geht das Erarbeiten von Responsive Images mit srcset von Saurabh Kirtani tief in das Thema ein.

Hier ist, was srcset in der Praxis aussieht:

      Bild      

Und unten ist ein Beispiel für das Bild Element in Aktion:

            Bild        

Wie Sie sehen können, wird, obwohl nur eine Kopie Ihres Bildes gemäß dem zugreifenden Gerät geliefert wird, beide Techniken erfordern, dass Sie mehrere Kopien dieses Bildes vorbereiten und auf Ihren Server hochladen. Es wird kein Problem für die Leistung Ihrer Website sein, aber es kann sich negativ auf Ihre Zeit und die Bandbreite Ihres Servers auswirken .

SVGs sind lösungsunabhängig

Skalierung ist in der DNA von Vektorgrafiken und SVG ist ein XML-basiertes Vektorbildformat. SVGs bestehen aus geometrischen Zeichenanweisungen, z. G. , Formen, Pfade, Linien usw., die unabhängig von der Pixelgröße sind. Aus der Sicht der Dateigröße spielt es keine Rolle, in welcher Größe das Bild gerendert wird, nur weil diese Anweisungen unverändert bleiben.

Eine weitere Implikation davon, unabhängig von der Auflösung zu sein, besteht darin, dass Sie nicht verschiedene Kopien desselben Bildes für verschiedene Geräte vorbereiten müssen. eine Größe passt für alle und sieht bei jeder Bildschirmauflösung rasiermesserscharf aus.

Das heißt, es gibt etwas, das die Größe der SVG-Datei negativ beeinflussen kann, d. e. wie komplex das Bild ist.

Vorschläge für Performante SVG-Dateien

Im Allgemeinen sind SVGs für die Verwendung im Web ziemlich einfach, Dinge wie Logos, Karten, Icons usw. Es ist wahrscheinlich, dass solche einfachen SVG-Bilder eine kleine Dateigröße im Vergleich zu ihren Rastergegenstücken haben.

Semalt, es gibt Schritte, die Sie ergreifen können, um die Dateigröße noch mehr zu optimieren und sicherzustellen, dass Ihre Besucher eine tolle Erfahrung auf Ihrer Website machen.

Hier sind ein paar Tipps für Sie.

Bake Performance im Design von Anfang an

Sie können einfache SVG-Grafiken selbst programmieren oder eine JavaScript-Bibliothek wie Snap verwenden. Svg, um Ihre Vektorgrafiken zu zeichnen. Um den Job zu erledigen, feuern Sie einfach einen Vektorgrafikeditor wie Adobe Illustrator ab.

Wenn Sie einen Grafikeditor verwenden, verringert sich die Gefahr, dass Sie Ihr Bildmaterial bei der späteren Optimierung der Grafik optimieren, wenn Sie daran denken, den SVG-Code in der Entwurfsphase zu vereinfachen.

Der erste Schritt, den Sie in diese Richtung unternehmen können, besteht darin, die Größe der Zeichenfläche in Ihrem gewünschten Grafikeditor zu bestimmen. Sarah Drasner empfiehlt, sie je nach Projekt auf 100 x 100 Pixel zu setzen, zu geben oder zu nehmen. Dies stellt sicher, dass die Leinwand nicht zu klein ist, wodurch viele Dezimalstellen erzeugt werden, die zu einem späteren Zeitpunkt kaum reduziert werden können, ohne die Grafik zu beschädigen. Auf der anderen Seite ist diese Größe auch nicht zu groß. In der Tat bedeutet eine große Leinwand eine entsprechend große Anzahl von Wegpunkten.

Als nächstes ist es entscheidend, die Anzahl der Pfadpunkte zu reduzieren, um Bytes aus Ihrer SVG-Datei zu entfernen. Das bedeutet, wo immer es möglich ist, Shapes anstelle von Pfaden zu verwenden, aber auch mehrere Pfade in weniger Pfade zu kombinieren, es sei denn, Sie beabsichtigen, sie einzeln zu animieren. Adobe Illustrator bietet das Bedienfeld "Vereinfachen", um die Pfadpunkte weiter zu reduzieren. Hier ist ein kurzes Video-Tutorial, um seine Verwendung zu veranschaulichen.

SVGs auf intelligente Weise exportieren

Nutzen Sie die Exportfunktionen Ihres Grafikeditors voll aus. Wenn Sie das nicht tun, können Sie SVG-Code mit proprietärem Markup und Bloat füllen, das Sie nicht benötigen.

Wenn Sie zum Beispiel die neueste Version von Adobe Illustrator (zum Zeitpunkt des Verfassens von CC 2017) haben, exportieren Sie Ihre SVG-Grafiken mit der Option Exportieren als und wählen Sie die Option. Svg Dateityp:

Is Using SVG Images Good for Your Website’s Performance?Is Using SVG Images Good for Your Website’s Performance?Related Topics:
DockerCMSProgrammingOperating Semalt

Das Bedienfeld von Illustrator bietet einige Einstellungen, mit denen Sie die Dateigröße niedrig halten und ein sauberes, fast webfähiges Markup erstellen können. Sie können sogar eine Vorschau des Codes anzeigen, indem Sie im Bedienfeld auf die Schaltfläche Code anzeigen klicken.

Is Using SVG Images Good for Your Website’s Performance?Is Using SVG Images Good for Your Website’s Performance?Related Topics:
DockerCMSProgrammingOperating Semalt

Für ein ausführliches Durchgehen der einzelnen Optionen in Illustrator bietet sich eine gute Lektüre von SVG aus Adobe Illustrator von Geoff Semalt an.

Squeeze mehr Bytes mit SVG-Optimierungstools

Sobald Ihre SVG-Grafik exportiert wurde, können Sie sie mit einem der hervorragenden verfügbaren SVG-Optimierungstools noch etwas verkleinern.

SVGOMG (und sein webbasiertes GUI-Gegenstück) zusammen mit Peter Collingridges SVG-Editor sind die beliebtesten Werkzeuge.

Weitere Informationen zur Verwendung von SVGOMG finden Sie unter Optimieren von SVG-Bildern von Guillaume Cedric Marty.

Aktivieren der Zustellung von gezippten SVG-Dateien

Der letzte Schritt in Ihrer SVG-Optimierungs-To-Do-Liste ist die Aktivierung der gzip-Komprimierung auf dem Server. SVG ist nur XML Markup, daher eignet es sich für die Komprimierung ohne Probleme.

Die Vorteile in Bezug auf die Verringerung der Dateigröße sind erheblich. Anhang J der SVG 1. 1 Spezifikation zeigt eine Vergleichstabelle zwischen Beispielen unkomprimierter und komprimierter SVG-Dateien. Die Ergebnisse sprechen überwiegend für eine Komprimierung mit einer Dateigröße von 77-84%.

Schlussfolgerung

SVG-Grafiken sind eine großartige Wahl für das Web. Für einfache Symbole, Logos usw. verwendet, sind sie oft leistungsfähiger als ihre Raster-Gegenstücke, vor allem, wenn Sie die paar Vorsichtsmaßnahmen treffen, die in diesem Artikel aufgeführt sind.

Die oben erwähnten Tipps sind keinesfalls erschöpfend. Sie können den Umschlag noch mehr schieben. 1 Spezifikation

  • SVG im Web
  • Hochleistungs-SVGs von Sarah Drasner
  • Tipps zur Optimierung der SVG-Bereitstellung für das Web von Sara Soueidan.
  • SVG optimieren von Andreas Larsen
  • Was ist Ihr SVG-Optimierungs-Workflow? Tippe auf das Kommentarfeld, um es zu teilen!

    March 6, 2018