So konvertieren Sie von einem PNG in SVG

Das Finden der richtigen Balance zwischen qualitativ hochwertigen Bildern und Website-Geschwindigkeit ist entscheidend für die Benutzererfahrung (UX). Wahrscheinlich möchten Sie, dass Ihre Besucher qualitativ hochwertige Fotos genießen. Trotzdem möchten Sie nicht, dass Ihre Core Web Vitals darunter leiden.

Das SVG-Format verwendet Vektoren anstelle von Rastergrafiken wie PNG und JPEG, um ein Bild zu erstellen. Da es Winkel statt Pixel hat, kann ein SVG-Bild auf jede beliebige Größe skaliert werden, ohne verschwommen auszusehen. Die Verwendung dieses Formats ist eine großartige Möglichkeit, eine hervorragende Bildqualität für Ihre Besucher unabhängig von ihren Geräten ohne große Dateigrößen aufrechtzuerhalten.

In diesem Artikel vergleichen wir gängige Bildformate und erörtern, warum Sie SVG-Bilder für Ihre Website verwenden sollten. Außerdem zeigen wir Ihnen, wie Sie ein PNG-Bild am besten in eine SVG-Datei konvertieren können. Lass uns anfangen!

Was ist eine PNG-Datei?

Sie haben wahrscheinlich schon einmal von einem PNG-Bild gehört, aber wie unterscheidet es sich von einem JPEG oder einem anderen Bildtyp? Das PNG-Format wurde speziell für die Übertragung von Bildern ins Internet unter Beibehaltung der Bildqualität entwickelt.

PNG oder Portable Network Graphics. PNG-Bilder verwenden wie JPEGs Rastergrafiken. Kurz gesagt, dies ist ein Pixelraster, das definiert wird, um ein Bild zu erstellen:

Bildquelle: Pinterest

Eines der inhärenten Probleme von Rastergrafiken besteht darin, dass sie an Qualität verlieren, wenn Sie hineinzoomen. Der Grund dafür ist, dass Pixel mathematisch erhöht und oft zum Aufrunden gezwungen werden, was dazu führt, dass sie verschwommen aussehen. Leider können Bilder von geringer Qualität die UX Ihrer Website und sogar die Suchmaschinenoptimierung (SEO) beeinträchtigen.

Der Hauptvorteil von PNG-Bildern besteht darin, dass Sie sie aus einem komprimierten Format ohne Qualitätsverlust rekonstruieren können. Diese Eigenschaft macht sie zu einer häufigen Wahl für Websites.

Die meisten Bildbetrachter unterstützen standardmäßig auch das PNG-Format. Ihre Dateigröße ist jedoch tendenziell größer als die von JPEG-Dateien.

Was ist eine SVG-Datei?

SVG steht für Scalable Vector Graphics. Dieses Bildformat ist weniger verbreitet als PNG oder JPEG, hat aber einige wesentliche Vorteile.

SVG-Dateien verwenden Vektoren (im Wesentlichen Winkel und Entfernungen), um ein Bild zu erstellen. Dieses Format unterscheidet sich von Rastergrafiken, die ein Raster aus farbigen Pixeln verwenden. Ein SVG-Konverter nimmt ein Pixelraster und wandelt es für verschiedene Zwecke in SVG-Vektoren um.

Diese Unterscheidung ist bedeutsam, weil sie die Art und Weise verändert, wie ein Computer ein Bild verarbeitet. Die Hauptstärke von SVG-Bildern besteht darin, dass sie ohne Qualitätsverlust skaliert werden können. Das bedeutet, dass Sie ein Bild vergrößern oder die Größe ändern können, ohne die Auflösung zu verlieren oder Unschärfe zu verursachen.

Da sich die Winkel nicht ändern, wenn sich die Abmessungen ändern, ist ein SVG-Bild auf einem winzigen Telefon genauso scharf wie auf einem riesigen Fernsehbildschirm. Diese Qualität ist sehr vorteilhaft, um Ihre Website auf mobilen Geräten reaktionsschnell zu machen, und kann sogar Ihre SEO verbessern.

Was ist der Unterschied zwischen PNG und SVG?

PNG-Bilder sind Rastergrafiken (Pixel), während SVGs Vektoren verwenden. Es gibt noch einige weitere wichtige Unterschiede zwischen diesen Dateiformaten. Lass uns einen Blick darauf werfen!

Unterstützung

Das PNG-Format ist wie das JPEG-Format weit verbreitet und wird von den meisten Programmen standardmäßig unterstützt. Daher ist PNG eine häufige Wahl für Anwendungen, bei denen die Bildqualität wichtiger ist als die Dateigröße. Aus diesem Grund sehen Sie möglicherweise PNG-Bilder auf Foto- oder Video-Portfolio-Websites.

Obwohl die SVG-Dateiformatoption in vektorbasierten Grafikeditoren wie Adobe Illustrator zu finden ist, wird sie möglicherweise nicht von anderen Programmen unterstützt. Insbesondere bei älteren oder einfacheren Apps wie einigen E-Mail-Plattformen werden Vektorgrafiken möglicherweise nicht unterstützt oder erkannt. Daher ist SVG möglicherweise nicht für Ihre E-Mail-Marketingbotschaften geeignet.

Anzeige

Im Vergleich zum PNG-Format, das Rastergrafiken verwendet, um farbige Pixel auf einem Gitter anzuzeigen, verwendet das SVG-Format andererseits Vektoren, um die Grenzen verschiedener grafischer Elemente in einem Bild zu definieren.

Daher verlieren PNG-Bilder an Genauigkeit, wenn Sie sie vergrößern oder ihre Größe ändern. Sie sind möglicherweise nicht ideal für Produktbilder, bei denen Sie es Kunden ermöglichen, Ihre E-Commerce-Artikel genauer zu betrachten. SVG-Fotos werden jedoch niemals durch Größenänderungen an Klarheit verlieren.

Dateigröße

Die Dateigrößen bestimmen normalerweise, wo Sie entscheiden, ob Sie PNG- oder SVG-Bilder verwenden. Allerdings ist keines der Formate in jedem Anwendungsfall von Natur aus besser.

Für kleinere Bilder oder Bilder mit geringerer Qualität ist das PNG-Format oft ausreichend, einfacher zu verwenden und hat eine angemessene Dateigröße. Wenn Grafiken nicht im Mittelpunkt Ihrer Website stehen, kommen Sie normalerweise mit der Verwendung von PNGs davon, wenn Sie sie komprimieren und optimieren.

Bei vektorbasierten Grafiken können kleinere Bilder immer noch mehrere Winkel und Elemente enthalten, wodurch die Dateigröße größer wird. Tatsächlich sind die Abmessungen einer SVG-Datei weniger kritisch, da Sie ihre Größe unbegrenzt ändern können.

Mit zunehmender Größe und Qualität eines PNG-Bildes wächst auch die Dateigröße. Die Abmessungen wirken sich jedoch weniger auf die Dateigröße von SVG-Bildern aus. Dies macht SVG-Dateien für die meisten zu einer effizienteren Option.

Mit anderen Worten, mit zunehmender Größe und Qualität eines Bildes überholt das SVG-Format das PNG-Format als bessere Option. SVG könnte das ideale Format sein, wenn sich Ihre Website auf große, qualitativ hochwertige Fotos konzentriert.

Warum muss ich möglicherweise von PNG in SVG konvertieren?

SVG-Grafiken bieten konsistente Klarheit mit kleineren Dateigrößen auf Websites, auf denen Benutzer wahrscheinlich in Ihre Bilder hineinzoomen, sie auf verschiedenen Bildschirmen anzeigen oder ihre Größe ändern. Daher müssen sich Besucher nicht durch Unschärfe oder einen kleinen Bildschirm abmühen, ein Bild anzuzeigen:

Bildquelle: Wikimedia Commons

Das SVG-Format wird häufig im Grafikdesign und Druck verwendet, um die Bildqualität in verschiedenen Szenarien sicherzustellen. Obwohl dieses Format nicht so weit verbreitet ist wie PNG und JPEG, finden Sie es in Vektorgrafik-Editoren wie Adobe Illustrator.

SVG ist eine gute Wahl, wenn die Bildqualität auf Ihrer Website oder Ihren Marketingmaterialien konstant bleiben muss. Insgesamt können Sie qualitativ hochwertigere Bilder auf Ihrer Website hosten, indem Sie weniger Serverressourcen verbrauchen und die Leistung Ihrer Website weniger beeinträchtigen.

Wie konvertiere ich von PNG in SVG? (3 Methoden)

Adobe Illustrator wurde speziell für die Bearbeitung von Vektorgrafiken entwickelt. Diese Software ist jedoch möglicherweise komplexer als das, was Sie benötigen.

Durch das Konvertieren von PNG- in SVG-Dateien können Sie definitiv Zeit sparen und die Dateigröße für qualitativ hochwertige Bilder reduzieren. Hier sind einige kostenlose und einfache Online-Lösungen zum schnellen Konvertieren von PNG-Bildern in das SVG-Dateiformat!

1. Adobe Express

Wir haben Adobe Illustrator bereits als einen der beliebtesten Vektorgrafik-Editoren auf dem Markt erwähnt. Adobe hat jedoch eine einfachere Lösung zum Konvertieren von Bildern in ein Vektorformat.

Adobe Express ist eine kostenlose Online-Webanwendung, die dieselbe Technologie wie Adobe Illustrator verwendet, um JPEG- und PNG-Dateien in SVGs umzuwandeln. Adobe Express ist eine ausgezeichnete Option, da es von einem angesehenen Unternehmen stammt und zusätzliche hilfreiche Funktionen bietet. Neben der Konvertierung Ihrer Bilder können Sie mit Adobe Express Hintergründe hinzufügen oder entfernen, Filter anwenden und sogar Animationen erstellen.

Um den Adobe Express-Konverter zu verwenden, klicken Sie einfach auf die Schaltfläche Ihr Foto hochladen , um loszulegen:

Dadurch gelangen Sie zum Konvertierungsbildschirm, wo Sie Ihr Bild ziehen und ablegen oder eine Datei von Ihrem Gerät hochladen können. Der Vorgang beginnt automatisch, wenn Ihr Bild in Vektoren umgewandelt wird:

Der Vorgang dauert nur wenige Sekunden. Die maximale Dateigröße für die kostenlose Version von Adobe Express beträgt jedoch nur 10 MB, was für Bilder mit höherer Qualität möglicherweise nicht ausreicht.

2. FreeConvert

Eine weniger leistungsstarke, aber ebenso einfache Lösung ist FreeConvert. Diese Website bietet weniger Bildbearbeitungswerkzeuge und konzentriert sich auf das Konvertieren und Komprimieren von Bildern und anderen Medien in verschiedenen Formaten. FreeConvert kann jedoch Dateigrößen von bis zu 1 GB verarbeiten, was für die meisten Situationen mehr als ausreichend sein sollte:

Um ein PNG in ein SVG umzuwandeln, müssen Sie nur Ihr Bild auf die Benutzeroberfläche ziehen oder es von Ihrem Gerät hochladen. Sobald Ihr Bild hochgeladen ist, wählen Sie SVG als Ausgabe und klicken Sie auf die Schaltfläche Konvertieren :

Das Hochladen und Konvertieren der Datei dauert einige Sekunden. Sobald der Vorgang abgeschlossen ist, können Sie Ihr neu formatiertes Bild herunterladen.

3. Konvertierung

Convertio funktioniert ähnlich wie FreeConvert. Darüber hinaus bietet es verschiedene Formatierungswerkzeuge. Dazu gehören Bild-, Audio-, Video- und Dokumentkonverter. Die Dateigrößenbeschränkung für die kostenlose Version beträgt 100 MB, was für die meisten kleinen bis mittelgroßen Projekte ausreichen sollte.

Sie können entweder den bereitgestellten Link für einen vorausgewählten Konvertierungspfad verwenden oder Ihr Bild hochladen und die gewünschte Ausgabe auswählen:

Sobald Sie auf die Schaltfläche Konvertieren klicken, beginnt der Prozess automatisch und aktualisiert den Status. Wenn es fertig ist, wählen Sie die Schaltfläche Herunterladen , um Ihr neues SVG zu erhalten!

Abschluss

Jetzt, da Sie wissen, wie man PNG in SVG umwandelt, müssen Sie sich keine Gedanken mehr über Bilder mit geringer Qualität machen. Vektorbasierte Grafiken können ohne Auflösungsverlust in der Größe geändert, gezoomt und gestreckt werden.

Verwenden Sie eine dieser großartigen Optionen, um eine PNG-Datei in eine SVG-Datei umzuwandeln:

1. Adobe Express : Eine leistungsstarke Lösung eines bekannten Unternehmens, die auf der gleichen Technologie wie Adobe Illustrator basiert.
2. FreeConvert : Eine benutzerfreundliche Webanwendung, die alle Arten von Bilddateien bis zu 1 GB konvertieren kann.
3. Convertio : Eine weitere einfach zu bedienende Web-App, die verschiedene Dateitypen bis zu 100 MB konvertieren und komprimieren kann.

Die Wahl Ihres Bildformats ist nur ein Teil der Optimierung der Leistung Ihrer Website. Der von Ihnen gewählte WordPress-Hosting-Anbieter kann auch Ihre Ladegeschwindigkeiten beeinflussen. Bei WP Engine bieten wir leistungsorientierte Funktionen wie eine skalierbare Serverarchitektur, weltweite Rechenzentren, ein kostenloses Content Delivery Network (CDN) und mehr!