{"id":4655,"date":"2014-06-23T10:10:07","date_gmt":"2014-06-23T08:10:07","guid":{"rendered":"http:\/\/blog.flyerpilot.de\/?p=4655"},"modified":"2023-11-09T11:14:45","modified_gmt":"2023-11-09T10:14:45","slug":"pixelbild-und-vektorgrafik","status":"publish","type":"post","link":"https:\/\/www.flyerpilot.de\/magazin\/flyerpilot-intern\/presse\/pixelbild-und-vektorgrafik","title":{"rendered":"Pixel vs. Vektor &#8211; Pixelbild und Vektorgrafik"},"content":{"rendered":"<h2>Einleitung<\/h2>\n<p>Dieser Artikel befasst sich mit dem Unterschied zwischen Pixelbildern und Vektorgrafiken. Falls ihr schon einmal mit der Herstellung von Print- oder Onlinemedien zu tun hatt\u00a0 ist euch der Unterschied sicher gel\u00e4ufig. Mir wird immer wieder die Frage gestellt: \u201eKann ich das Logo auf meiner Webseite nicht auch f\u00fcr ein <a title=\"Plakat und Poster drucken\" href=\"https:\/\/www.flyerpilot.de\/plakate-drucken\" rel=\"follow\">Plakat<\/a> verwenden?\u201c Im Folgenden habe ich die wichtigsten Fakten und Informationen \u00fcber die beiden Grafikformate zusammengetragen.<\/p>\n<h2>Pixelbild<\/h2>\n<p>Grafiken, die auf Pixeln basieren werden allgemein als Bitmap-Grafiken oder Rasterbilder bezeichnet. Das Wort Pixel ist im Grunde eine Kombination aus zwei W\u00f6rtern &#8222;pix&#8220; und &#8222;el&#8220;. Das Wort &#8222;pix&#8220; stammt von dem Wort Bild und das andere Wort &#8222;el&#8220; stammt von dem Wort Element. Ein Pixel ist das, was bei einem analogen Foto das Korn ist. Ein digitales Bild besteht aus einem Raster, und ein Pixel ist der kleinste Bildpunkt. Je weniger Pixel ein Bild besitzt, desto grobk\u00f6rniger sieht es aus.<\/p>\n<p>Die Fotografie ist der h\u00e4ufigste Vertreter der Pixelbilder. Es gibt mittlerweile eine Vielzahl von Bildbearbeitungssoftware, die es wie zum Beispiel Adobe Photoshop, Adobe Lightroom, Gimp, PaintShopPro, um nur einige zu nennen.<\/p>\n<p>Rasterbilder erkennt ihr an den folgenden Dateiendungen: jpg \/ jpeg, psd, png, tiff, bmp und gif<\/p>\n<figure id=\"attachment_6696\" aria-describedby=\"caption-attachment-6696\" style=\"width: 1920px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-6696 size-full\" title=\"pixelbild-vs-vektorgrafik_02\" src=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_02.jpg\" alt=\"Detailausschnitt der Aufl\u00f6sung einer Pixelgrafik\" width=\"1920\" height=\"1039\" srcset=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_02.jpg 1920w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_02-300x162.jpg 300w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_02-768x416.jpg 768w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_02-1024x554.jpg 1024w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption id=\"caption-attachment-6696\" class=\"wp-caption-text\">Pixelbild bearbeiten<\/figcaption><\/figure>\n<p><center><sub>Zoomansicht eines Pixelbildes (\u00a9 Dirk Wiedewilt &#8211; fotolia)<\/sub><\/center><\/p>\n<h2>Vorteile von Rasterbildern<\/h2>\n<ul>\n<li>Detailreichtum: Habt ihr euch schon einmal die Frage gestellt wof\u00fcr der\u00a0 Begriff &#8222;dpi&#8220; steht? Es bedeutet &#8222;dots per inch&#8220;, eine Ma\u00dfeinheit, wie viel detaillierte Farbinformationen ein Rasterbild enth\u00e4lt. Ein 1 x 1 cm quadratisches Bild hat bei einer Aufl\u00f6sung von 300 dpi &#8211; 300 einzelnen Quadrate, die dem Foto Farbe, Schattierung und Details liefern. Je mehr dpi das Bild enth\u00e4lt, desto mehr subtile Details sind erkennbar.<\/li>\n<li>Pr\u00e4zise Bearbeitung: Jede der einzelnen Pixel-Farbinformation kann separat modifiziert werden. Je nachdem wie tief in die Bildstruktur eingegriffen wird, ist der kreative Freiraum bei der Verfremdung eines Fotos fast grenzenlos.<\/li>\n<\/ul>\n<figure id=\"attachment_6699\" aria-describedby=\"caption-attachment-6699\" style=\"width: 1920px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-6699 size-full\" title=\"pixelbild-vs-vektorgrafik_05\" src=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_05.jpg\" alt=\"Pixelbild und Vektorgrafik im Vergleich\" width=\"1920\" height=\"1039\" srcset=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_05.jpg 1920w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_05-300x162.jpg 300w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_05-768x416.jpg 768w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_05-1024x554.jpg 1024w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption id=\"caption-attachment-6699\" class=\"wp-caption-text\">Vorteile von Rasterbildern<\/figcaption><\/figure>\n<p><center><sub>Qualit\u00e4tsverlust bei der Vergr\u00f6\u00dferung von Pixelbildern (\u00a9 Dirk Wiedewilt &#8211; fotolia)<\/sub><\/center><\/p>\n<h2>Nachteile von Rasterbildern<\/h2>\n<ul>\n<li>Qualit\u00e4tsverlust bei der Vergr\u00f6\u00dferung: Der allergr\u00f6\u00dfte Nachteil von Pixelbildern ist, dass sie bei der Vergr\u00f6\u00dferung pixelig werden (auch bekannt als grobk\u00f6rnig). Warum das so ist? Nun, es gibt eine endliche Anzahl von Bildpunkten in allen Rasterbildern; wenn Ihr ein Foto vergr\u00f6\u00dfert, rechnet der Computer Farbt\u00f6ne hinzu um die entstandenen L\u00fccken zu f\u00fcllen. Diese Interpolation von Daten bewirkt, dass das Bild unscharf erscheint, da der Rechner keine M\u00f6glichkeit hat, den genauen Farbton der Farben, die eingef\u00fcgt werden sollen, zu wissen.<\/li>\n<li>Gro\u00dfe Dateigr\u00f6\u00dfe: Eine bearbeitete Photoshop-Datei, die meist \u00fcber mehrere Ebenen und Einstellebenen verf\u00fcgt, hat schnell ein Dateigr\u00f6\u00dfe von 100 MB und mehr. Jede Farbinformationen eines Pixels muss einzeln in der Datei hinterlegt werden, das fordert ihren Tribut im Speicher. Um den enormen Datenmengen zu entgegnen wurden Komprimierungsmethoden entwickelt. Im Format TIF kommt bspw. die LZW-Komprimierung zum Einsatz. Wenn in einem Bild mehrere gleichfarbige Pixel nebeneinander liegen werden sie als 1 Wert abgespeichert &#8211; das spart Platz. Sehr effektiv ist die Kompression des Formates JPG. Hier werden mehrere Pixel zu Quadraten zusammengefasst und die Kompression ist von Hand sehr gut steuerbar. Es kann jedoch bei hoher Kompression zur Bildung von Artefakten kommen.<\/li>\n<\/ul>\n<figure id=\"attachment_6695\" aria-describedby=\"caption-attachment-6695\" style=\"width: 1920px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-6695 size-full\" title=\"pixelbild-vs-vektorgrafik_01\" src=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_01.jpg\" alt=\"Pixel vs. Vektor - der Unterschied zwischen Pixelbild und Vektorgrafik\" width=\"1920\" height=\"1039\" srcset=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_01.jpg 1920w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_01-300x162.jpg 300w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_01-768x416.jpg 768w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_01-1024x554.jpg 1024w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption id=\"caption-attachment-6695\" class=\"wp-caption-text\">Nachteile bei verwendung von Rasterbildern<\/figcaption><\/figure>\n<h2>Vektorgrafik<\/h2>\n<p>Vektorbasierte Grafiken haben ihren Anwendungsbereich meist als Strichzeichnungen. Anders als pixelbasierte Grafiken, bestehen Vektorgrafiken aus mathematische Funktionen. Eine Vektorgrafik verwendet mathematische Formeln um Punkte, Linien und Kurven zu zeichnen. Farben und Formen werden auf mathematisch definierte Bereiche angewendet und k\u00f6nnen anhand der dargestellten Objekte ver\u00e4ndert werden. Anders als bei Pixelbilder, wo man jedes Pixel einzeln ver\u00e4ndern muss.<\/p>\n<p>Wo findet man Vektorgrafiken h\u00e4ufig? Meist sind es Schriften, Logos, Infografiken und Diagramme. Bevorzugtes Programm des Designers zum Erstellen und Bearbeiten von Vektordateien ist \u00a0Adobe Illustrator.<\/p>\n<figure id=\"attachment_6697\" aria-describedby=\"caption-attachment-6697\" style=\"width: 1920px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-6697 size-full\" title=\"pixelbild-vs-vektorgrafik_03\" src=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_03.jpg\" alt=\"Detail-Ansicht bei einer Vektorgrafik\" width=\"1920\" height=\"1039\" srcset=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_03.jpg 1920w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_03-300x162.jpg 300w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_03-768x416.jpg 768w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_03-1024x554.jpg 1024w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption id=\"caption-attachment-6697\" class=\"wp-caption-text\">Vektorgrafik immer gut zu skalieren<\/figcaption><\/figure>\n<p>Vektorgrafiken erkennt ihr an den folgenden Dateiendungen: eps, ai und pdf.<\/p>\n<p><center><sub>Zoomansicht einer Vektorgrafik (\u00a9 Dirk Wiedewilt &#8211; fotolia)<\/sub><\/center><\/p>\n<h2>Vorteile von Vektorgrafiken<\/h2>\n<ul>\n<li>Stufenlos skalierbar: Durch das Wunder der Mathematik k\u00f6nnen Vektor-Dateien nach oben oder unten, so viel wie ihr wollen skaliert werden, ohne dass die Bildqualit\u00e4t leidet. W\u00e4hrend bei der Vergr\u00f6\u00dferung eines Rasterbildes die Farben der fehlenden Pixel hinzugeraten werden m\u00fcssen, verwendet ein Vektor-Bild einfach die urspr\u00fcngliche mathematischen Gleichung, um jedes Mal die gew\u00fcnschte Form neu zu berechnen.<\/li>\n<li>Kleinere Dateigr\u00f6\u00dfe: Um einen Vektor zu berechnen ben\u00f6tit man lediglich den Start- und Endpunkt. F\u00fcr einfache Grafiken, wie geometrische Formen oder Typografie, bedeutet dies eine viel kleinere Dateigr\u00f6\u00dfe und schnellere Verarbeitungsgeschwindigkeit.<\/li>\n<li>Bearbeitbarkeit: Im Gegensatz zu den \u00fcblichen Bildformaten, wie jpg, png und tiff sind vektorbasierte Dateien nicht auf eine Ebene reduziert, wenn man sie in einem Bearbeitungsprogramm \u00f6ffnet. Man kann ohne Probleme die Farben und Eigenschaften der einzelnen Elemente editieren und in weitere Projekte kopieren.<\/li>\n<\/ul>\n<figure id=\"attachment_6698\" aria-describedby=\"caption-attachment-6698\" style=\"width: 1920px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-6698 size-full\" title=\"pixelbild-vs-vektorgrafik_04\" src=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_04.jpg\" alt=\"Pixel vs. Vektor - Pixelbild und Vektorgrafik\" width=\"1920\" height=\"1039\" srcset=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_04.jpg 1920w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_04-300x162.jpg 300w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_04-768x416.jpg 768w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_04-1024x554.jpg 1024w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption id=\"caption-attachment-6698\" class=\"wp-caption-text\">Vorteile von Vektorgrafiken<\/figcaption><\/figure>\n<p><center><sub>Pfadansicht einer Vektorgrafik (\u00a9 Dirk Wiedewilt &#8211; fotolia)<\/sub><\/center><\/p>\n<h2>Nachteile von Vektorgrafiken<\/h2>\n<ul>\n<li>Begrenzte Anzahl an Details: Aufgrund der mathematischen Berechnung von Verl\u00e4ufen und Farben in Vektoren werden diese nie die Komplexit\u00e4t einer nat\u00fcrlichen Ablichtung erreichen. Mitr einem Pixelbild lassen sich deutlich mehr Tiefendetails und Schattierungen wiedergeben.<\/li>\n<li>Begrenzte Effekte: Durch die Definition von Vektor Grafiken durch einfache Punkte und Linien m\u00fcssen nat\u00fcrliche Effekte &#8211; wie Unsch\u00e4rfe und Reflektionen m\u00fchsam per Hand angelegt werden. Es gibt nur wenige Illustratoren, die es schaffen, dass eine Vektorgrafik aussieht wie ein Foto. Das nachfolgende Bild wurde mit der Interaktiv-abpausen-Funktion von Adobe Illustrator erstellt.<\/li>\n<\/ul>\n<figure id=\"attachment_6700\" aria-describedby=\"caption-attachment-6700\" style=\"width: 1920px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-6700\" title=\"pixelbild-vs-vektorgrafik_06\" src=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_06.jpg\" alt=\"Vergleich zwischen Pixelbild und Vektorgrafik\" width=\"1920\" height=\"1039\" srcset=\"https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_06.jpg 1920w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_06-300x162.jpg 300w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_06-768x416.jpg 768w, https:\/\/www.flyerpilot.de\/magazin\/wp-content\/uploads\/2016\/12\/pixelbild-vs-vektorgrafik_06-1024x554.jpg 1024w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><figcaption id=\"caption-attachment-6700\" class=\"wp-caption-text\">Nachteile von Vektorgrafiken<\/figcaption><\/figure>\n<p><center><sub>\u00a9 Dirk Wiedewilt<\/sub><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Einleitung Dieser Artikel befasst sich mit dem Unterschied zwischen Pixelbildern und Vektorgrafiken. Falls ihr schon einmal mit der Herstellung von Print- oder Onlinemedien zu tun hatt\u00a0 ist euch der Unterschied sicher gel\u00e4ufig. Mir wird immer wieder die Frage gestellt: \u201eKann ich das Logo auf meiner Webseite nicht auch f\u00fcr ein Plakat verwenden?\u201c Im Folgenden habe &hellip; <a href=\"https:\/\/www.flyerpilot.de\/magazin\/flyerpilot-intern\/presse\/pixelbild-und-vektorgrafik\" class=\"more-link\"><span class=\"screen-reader-text\">&#8222;Pixel vs. Vektor &#8211; Pixelbild und Vektorgrafik&#8220; <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":3,"featured_media":6732,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[506],"tags":[],"class_list":{"0":"post-4655","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-presse"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/posts\/4655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/comments?post=4655"}],"version-history":[{"count":3,"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/posts\/4655\/revisions"}],"predecessor-version":[{"id":7342,"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/posts\/4655\/revisions\/7342"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/media\/6732"}],"wp:attachment":[{"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/media?parent=4655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/categories?post=4655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.flyerpilot.de\/magazin\/wp-json\/wp\/v2\/tags?post=4655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}