Leider verstehen viele Webseitenbesitzer immer noch nicht, welche Bilddateitypen sie f\u00fcr die verschiedenen Anwendungsf\u00e4lle w\u00e4hlen sollen. Das Ergebnis? Am Ende verlangsamen sie die Ladegeschwindigkeit ihrer Webseite<\/a>, weil ihre Bilder nicht das beste verf\u00fcgbare Format haben und auch nicht optimiert sind.<\/p>\n In diesem Artikel behandeln wir die wichtigsten Bilddateierweiterungen und wann du sie verwenden solltest, um deinen Besuchern die bestm\u00f6gliche Nutzererfahrung zu bieten.<\/p>\n Bilddateitypen und -formate werden in zwei verschiedene Hauptkategorien unterteilt: Rasterbilddateien und Vektorbilddateien.<\/p>\n Schauen wir uns jede Kategorie genauer an.<\/p>\n Die g\u00e4ngigsten Bildformate f\u00fcr das Web (JPEG, GIF und PNG<\/a>) befinden sich alle unter der Kategorie Raster.<\/p>\n Rasterbild-Dateitypen zeigen statische Bilder an, bei denen jedes Pixel eine bestimmte Farbe, Position und Proportion hat, die auf ihrer Aufl\u00f6sung basieren (zum Beispiel 1280\u00d7720).<\/p>\n Da sie statisch sind, kannst du die Gr\u00f6\u00dfe der Bilder nicht effizient \u00e4ndern, das urspr\u00fcngliche Design und die Pixel werden einfach gedehnt, um den zus\u00e4tzlichen Platz zu f\u00fcllen. Dadurch entsteht am Ende ein verschwommenes, verpixeltes oder anderweitig verzerrtes Bild.<\/p>\n Die gro\u00dfe Mehrheit der Fotos oder Bilder, die du im Internet siehst, verwenden ein Rasterbildformat.<\/p>\n SVG<\/a>, EPS, AI und PDF<\/a> sind Beispiele f\u00fcr Vektorbild-Dateitypen.<\/p>\n Im Gegensatz zu den statischen Rasterbilddateiformaten, bei denen jede Designform und -farbe an ein Pixel gebunden ist, sind diese Formate flexibler.<\/p>\n Vektorgrafiken verwenden stattdessen ein System von Linien und Kurven auf einer kartesischen Ebene, skaliert im Vergleich zur Gesamtfl\u00e4che, nicht zu einem einzelnen Pixel.<\/p>\n Das bedeutet, dass du die urspr\u00fcngliche Bildaufl\u00f6sung endlos vergr\u00f6\u00dfern kannst, ohne Qualit\u00e4tsverlust oder Verzerrung.<\/p>\n Wie du sehen kannst, ist der Qualit\u00e4tsunterschied bei 7-facher Vergr\u00f6\u00dferung v\u00f6llig unvergleichbar.<\/p>\n Da die SVG die Positionen anhand eines Prozentsatzes der Gesamtfl\u00e4che und nicht anhand von Pixeln berechnet, gibt es \u00fcberhaupt keine Verpixelung.<\/p>\n\n Im Folgenden decken wir alle wichtigen Grafikdateiformate ab, von Web-Rasterbildern \u00fcber Vektoren bis hin zu Bildbearbeitungssoftware-Dateien.<\/p>\n Wir machen einen Deep-Dive und behandeln die Vor- und Nachteile, Browser- und Betriebssystem-Support und die idealen Anwendungsf\u00e4lle f\u00fcr jedes Format.<\/p>\n JPEG (oder JPG)<\/a> ist ein Rasterbild-Dateiformat mit verlustbehafteter Komprimierung<\/a>, das es f\u00fcr den Austausch von Bildern geeignet macht. JPEGs sind „verlustbehaftet“, d.h. sie reduzieren die Dateigr\u00f6\u00dfe, aber auch die Qualit\u00e4t der Bilder, wenn du das Format verwendest.<\/p>\n JPEG ist immer noch einer der meistverwendeten Bilddateitypen, die du im Internet sehen wirst, weil es komprimiert ist und praktisch universellen Browser\/OS Support bietet.<\/p>\n Die meisten Social-Media-Plattformen<\/a> (wie Facebook und Instagram) wandeln hochgeladene Bilddateien automatisch in JPEGs um. Sie verwenden auch einzigartige Social-Media-Bildgr\u00f6\u00dfen<\/a>, um die Aufl\u00f6sung deiner Fotos zu steuern.<\/p>\n PNG ist ein Rastergrafikformat, das verlustfreie Komprimierung unterst\u00fctzt, wobei Details und Kontrast zwischen den Farben erhalten bleiben.<\/p>\n Insbesondere bietet PNG eine viel bessere Lesbarkeit von Text als JPEG.<\/p>\n Das macht PNG zu einer beliebteren Wahl f\u00fcr Infografiken, Banner<\/a>, Screenshots und andere Grafiken, die sowohl Bilder als auch Text enthalten.<\/p>\n Das GIF ist ein weiterer Bilddateityp, der unter das Rasterformat f\u00e4llt. Es verwendet verlustfreie Kompression, „beschr\u00e4nkt“ das Bild aber auf 8 Bit pro Pixel und eine begrenzte Palette von 256 Farben.<\/p>\n Das GIF-Format<\/a> ist am bekanntesten (und am meisten benutzt) f\u00fcr animierte Bilder, weil es durch seine 8-Bit-Beschr\u00e4nkung die Dateigr\u00f6\u00dfen von Animationen klein und internetfreundlich h\u00e4lt.<\/p>\n WebP ist ein Bildformat, das speziell entwickelt wurde, um eine bessere verlustfreie und verlustbehaftete Kompression von Bildern zu erm\u00f6glichen.<\/p>\n Der Wechsel von JPEG und PNG zu WebP kann dabei helfen, Speicherplatz<\/a> und Bandbreite auf dem Server zu sparen, mit bis zu 35% kleineren Bilddateien bei gleicher Qualit\u00e4t.<\/p>\n Ein Format, das in dieser Anleitung zu Bilddateitypen nicht fehlen sollte, haben wir TIFF.<\/p>\n TIFF, was die Abk\u00fcrzung f\u00fcr Tagged Image File Format ist, ist ein Rasterbildformat, das am h\u00e4ufigsten zum Speichern und Bearbeiten von Bildern verwendet wird, die sp\u00e4ter f\u00fcr den Druck verwendet werden.<\/p>\n While it does support lossy compression, it’s typically used as a lossless image format. Furthermore, most professional graphics applications that support TIFF (Photoshop, Illustrator, etc.) do not use compression. Thus, it’s common for TIFF images to be large in file size.<\/span><\/p>\n Bitmap (BMP) ist ein meist veraltetes Bilddateiformat, das einzelne Pixel mit wenig bis keiner Komprimierung abbildet. Das bedeutet, dass BMP-Dateien leicht extrem gro\u00df werden k\u00f6nnen und unpraktisch zu speichern oder zu handhaben sind.<\/p>\n HEIF, kurz f\u00fcr High Efficiency Image File Format, ist ein Bildformat, das von dem Team hinter dem MPEG-Videoformat<\/a> entwickelt wurde, um eine direkte Konkurrenz zu JPEG zu sein.<\/p>\n Theoretisch ist die Komprimierung fast doppelt so effizient wie JPEG, was zu Bildern von bis zu doppelter Qualit\u00e4t bei identischen Dateigr\u00f6\u00dfen f\u00fchrt.<\/p>\n Es ist ein Rasterbildformat, das auf Pixel-Mapping basiert, was bedeutet, dass man die Bilder nicht ohne Qualit\u00e4tsverlust vergr\u00f6\u00dfern kann.<\/p>\n Das Scalable Vector Graphics-Dateiformat, normalerweise als SVG bezeichnet, wurde vom W3C als Markup-Sprache entwickelt, um zweidimensionale Bilder direkt im Browser zu rendern.<\/p>\n Es verl\u00e4sst sich nicht auf Pixel wie ein Rasterformat, sondern verwendet XML-Text, um Formen und Linien zu umrei\u00dfen, \u00e4hnlich wie mathematische Gleichungen Graphen erzeugen.<\/p>\n Das bedeutet, dass man SVG-Bilder ohne Qualit\u00e4tsverlust endlos skalieren kann.<\/p>\n Im Wesentlichen ist eine EPS-Datei (Encapsulated PostScript) eine Vektorbilddatei, die zum Speichern von Illustrationen in Adobe Illustrator und anderer Illustrationssoftware wie CorelDraw verwendet wird.<\/p>\n Wie SVG-Dateien ist EPS eigentlich ein textbasiertes Dokument, das Formen und Linien mit Code umrei\u00dft, anstatt Pixel und Farben abzubilden. Folglich unterst\u00fctzen EPS-Dateien auch verlustfreie Skalierung.<\/p>\n Wahrscheinlich assoziierst du PDF mit dem Speichern, Abspeichern und Lesen von meist textbasierten Dokumenten. Das ist vollkommen verst\u00e4ndlich – das Dokument ist schlie\u00dflich im Namen enthalten.<\/p>\n Aber PDF-Dateien basieren eigentlich auf der gleichen PostScript-Sprache, die auch EPS-Vektorbilddateien unterst\u00fctzt und mit der man auch Bilder und Illustrationen speichern kann.<\/p>\n Es ist das Bildformat der Wahl zum Speichern von Illustrationen, Magazincovern und mehr f\u00fcr den sp\u00e4teren Druck. Es ist auch die bevorzugte Wahl f\u00fcr unsere Kinsta Ebooks<\/a>.<\/p>\n Wie der Name schon sagt, ist das PSD-Dateiformat ein Bildformat, das zum Speichern von Bilddokumenten verwendet wird und mit Adobe Photoshop in Entwicklung ist.<\/p>\n Es ist kein websicheres Bildformat<\/strong>, daher wird es weder von Browsern noch von normalen Bildbetrachtern oder Editoren unterst\u00fctzt.<\/p>\n AI ist ein weiteres Bildformat, das speziell von Adobe entwickelt wurde, um nicht nur das Bild, sondern auch den Projektstatus zu speichern.<\/p>\n Wie PSD ist es nicht f\u00fcr den Gebrauch im Web gedacht<\/strong> und wird von keinem Browser und den meisten Standard-Bildbetrachtern unterst\u00fctzt.<\/p>\n Im Gegensatz zu PSD-Dateien kannst du AI-Dateien ohne Qualit\u00e4tsverlust frei skalieren.<\/p>\n XCF, was f\u00fcr eXperimental Computing Facility steht, ist ein Bilddateityp, der dem Open Source Bildeditor GIMP entstammt<\/a>. Es ist das \u00c4quivalent zu PSD-Dateien und speichert Pfade, Transparenz, Filter und mehr.<\/p>\n Noch einmal, dies ist ein nativer Dateityp zum Speichern von Projekten und es wird von keinem Browser <\/strong>oder Standard-Bildbetrachter unterst\u00fctzt.<\/p>\n Das INDD ist ein nativer Dateityp f\u00fcr Adobe InDesign-Benutzer, in dem du Projektdateien mit Seiteninhalt, Stilen, Farbfeldern und mehr speichern kannst.<\/p>\n Obwohl es manchmal als Bilddateiformat bezeichnet wird, neigt es dazu, \u00fcber den Text hinaus auf visuelle Elemente zu verweisen.<\/p>\n Es wird nicht von irgendwelchen Browsern oder Standard-Bildbetrachtern unterst\u00fctzt, da es kein websicheres Format <\/strong>ist.<\/p>\n Rohbildformate sind die Dateitypen, die eine Digitalkamera verwendet, um Bilder in voller Qualit\u00e4t f\u00fcr die sp\u00e4tere Nachbearbeitung und Bearbeitung zu speichern.<\/p>\n Die wichtigsten Rohbild-Dateitypen nach Kamerahersteller:<\/p>\n Rather than the 256 shades per color channel (8 bit) available in a JPEG file, RAW files offer up to 16,384 shades per color channel (14 bit) in a single picture. That gives you more flexibility when tweaking colors and contrast in post-processing.<\/span><\/p>\n RAW-Bilder sind nicht f\u00fcr das Web<\/strong> oder das Teilen von Bildern gedacht und werden von keinem g\u00e4ngigen Browser oder Bildbetrachter unterst\u00fctzt.<\/p>\n Basierend auf Daten, die sich auf die Internetnutzung beziehen, sind die drei gebr\u00e4uchlichsten Bilddateitypen PNG, JPEG und SVG.<\/p>\n Schauen wir uns unten an, was sie so weit verbreitet macht.<\/p>\n Da sich PNG als Format besser f\u00fcr Text innerhalb des Bildes eignet, wird es \u00f6fter f\u00fcr Screenshots, Banner (je nach Gr\u00f6\u00dfe der Werbebanner<\/a>) und vieles mehr verwendet.<\/p>\n Da es verlustfrei komprimiert wird, wird es auch von Designern und Fotografen verwendet, um hochwertige Bilder zum Beispiel auf ihren Portfolio-Webseiten<\/a> zu pr\u00e4sentieren.<\/p>\n Diese beiden Faktoren, zusammen mit seinem universellen Browser und OS Support, machen es zum beliebtesten Bilddateityp im Web. PNGs sind auf sage und schreibe 77 % aller Webseiten zu finden.<\/p>\n Die verlustbehaftete Komprimierung bedeutet, dass JPEG eine bessere Option ist, um Bilder in deinem gesamten Inhalt zu pr\u00e4sentieren. Der Qualit\u00e4tsverlust ist f\u00fcr den durchschnittlichen Internetnutzer kaum sichtbar, und du kannst viel Speicherplatz und Bandbreite sparen.<\/p>\n Aus diesem Grund ist es das zweitbeliebteste Format im Internet, das von fast 72% der Webseiten verwendet wird. Die meisten Webseiten verwenden sowohl PNGs als auch JPEGs f\u00fcr verschiedene Zwecke.<\/p>\n Zur Erinnerung: Es gibt keinen Unterschied zwischen JPG und JPEG<\/a>, es sind zwei verschiedene Akronyme und Dateierweiterungen f\u00fcr dasselbe Format.<\/p>\n SVG-Dateien sind skalierbare Vektordateien, die sich perfekt f\u00fcr Icons, Logos, Grafiken und einfache Illustrationen eignen. Das Bild kann sogar direkt als CSS-Code<\/a> in die Seite eingef\u00fcgt werden.<\/p>\n Aus diesem Grund stehen SVGs an dritter Stelle und werden von 27% der Webseiten verwendet.<\/p>\n Obwohl es selten das Format der Wahl f\u00fcr statische Bilder ist, hat GIF ein Comeback als die #1 Wahl f\u00fcr das Teilen von Animationen gemacht.<\/p>\n Infolgedessen verwenden etwa 22% der Webseiten GIFs auf ihren Seiten, obwohl sie wahrscheinlich auch PNGs und JPEGs als Standardformate verwenden.<\/p>\n Rohe Bildformate haben die h\u00f6chste Qualit\u00e4t, haben aber unangemessen gro\u00dfe Dateigr\u00f6\u00dfen von bis zu Hunderten von Megabyte.<\/p>\n F\u00fcr Web-Bilder bietet das WebP-Dateiformat 25-35% kleinere Dateigr\u00f6\u00dfen<\/a> als JPEG bei gleicher Qualit\u00e4t der Fotos, was bedeutet, dass du bei gleichem Speicherplatz qualitativ hochwertigere Bilder hochladen und deine Webseite beschleunigen kannst<\/a>.<\/p>\n HEIF ist eine weitere JPEG-Alternative mit effizienterer Komprimierung, wird aber derzeit von keinem der g\u00e4ngigen Browser unterst\u00fctzt.<\/p>\n PNG-Dateien bieten eine verlustfreie Komprimierung, aber das bedeutet, dass die Dateigr\u00f6\u00dfen extrem gro\u00df und das Laden der Dateien sehr langsam ist. Eine einzelne PNG-Datei kann oft Hunderte von KB oder sogar 1MB+ gro\u00df sein. Wenn ihr jedoch einige Taktiken wie Lazy Loading (seit WordPress 5.5 im Core verf\u00fcgbar)<\/a> und ein CDN<\/a> ausnutzt, k\u00f6nntet ihr immer noch eine schnelle Webseite haben.<\/p>\n \u00a0<\/p>\n Die gebr\u00e4uchlichsten Bilddateiformate f\u00fcr das Web, die Transparenz unterst\u00fctzen, sind PNG, WebP, GIF und sogar SVG.<\/p>\n Die meisten nativen Projektbild-Dateitypen wie PSD, XCF und AI unterst\u00fctzen ebenfalls Transparenz.<\/p>\n Auf der anderen Seite unterst\u00fctzt das popul\u00e4re JPEG-Bildformat keine Transparenz<\/strong>.<\/p>\n Der Hauptunterschied zwischen PNG und JPEG ist, dass PNG ein verlustfreies Bildformat ist, w\u00e4hrend JPEG ein verlustbehaftetes ist. Das bedeutet im Grunde genommen, dass PNG Kompressionstechniken verwendet, ohne die urspr\u00fcngliche Qualit\u00e4t oder Detailgenauigkeit des Bildes zu beeintr\u00e4chtigen.<\/p>\n F\u00fcr Text in Bildern, Tutorial-Screenshots und wenn du m\u00f6chtest, dass Schilder oder andere feine Elemente auf einem Foto 100% sichtbar sind, ist PNG das richtige Format.<\/p>\nWas sind die verschiedenen Bilddateitypen?<\/h2>\n
Rasterbild-Dateiformate<\/h3>\n
![\"Rasterbild](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/raster-image-jpg.jpg\")
Vektor-Bild-Dateiformate<\/h3>\n
![\"Vektorbildformat-Vergr\u00f6\u00dferung\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/vector-image.jpg\")
Die 15 beliebtesten Bilddateitypen<\/h2>\n
1.JPEG (And JPG) \u2014 Joint Photographic Experts Group<\/h3>\n
![\"Tiger-Bild](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/tiger-jpg.jpg\")
Vorteile und Nachteile<\/h4>\n
\n
Browser und OS Support<\/h4>\n
\n
Use Cases<\/h4>\n
\n
2. PNG \u2014 Portable Network Graphics<\/h3>\n
![\"Kinsta's](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/kinsta-resource-center-png-image.png\")
Vorteile und Nachteile<\/h4>\n
\n
Browser und OS Support<\/h4>\n
\n
Use Cases<\/h4>\n
\n
3. GIF \u2014 Graphics Interchange Format<\/h3>\n
![\"Beispiel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/turtle-dancing-gif.gif\")
Vorteile und Nachteile<\/h4>\n
\n
Browser und OS Support<\/h4>\n
\n
Use Cases<\/h4>\n
\n
4. WebP<\/h3>\n
![\"Beispiel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/webp-image-compression.jpg\")
Vorteile und Nachteile<\/h4>\n
\n
Browser und OS Support<\/h4>\n
\n
Use Cases<\/h4>\n
\n
5. TIFF<\/h3>\n
![\"Image](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/tiff-icon.jpg\"){kind=icon}
Vorteile und Nachteile<\/h4>\n
\n
Browsers und OS Support<\/h4>\n
\n
Use Cases<\/h4>\n
\n
6. BMP \u2014 Bitmap<\/h3>\n
![\"Image](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/bmp-vs-gif.png\")
Vorteile und Nachteile<\/h4>\n
\n
Browsers und OS Support<\/h4>\n
\n
Use Cases<\/h4>\n
\n
7. \u00a0HEIF \u2014 High Efficiency Image File Format<\/h3>\n
![\"Image](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/jpeg-vs-heif.jpg\")
Vorteile und Nachteile<\/h4>\n
\n
Browsers und OS Support<\/h4>\n
\n
Use Cases<\/h4>\n
\n
8. SVG \u2014 Scalable Vector Graphics<\/h3>\n
![\"Image](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/1200px-SVG_logo.svg.png\"){kind=logo}
Vorteile und Nachteile<\/h4>\n
\n
Browsers und OS Support<\/h4>\n
\n
Use Cases<\/h4>\n
\n
9. EPS \u2014 Encapsulated Postscript<\/h3>\n
![\"EPS](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/pasted-image-0-3.png\")
Vorteile und Nachteile<\/h4>\n
\n
Browsers und OS Support<\/h4>\n
\n
Use Cases<\/h4>\n
\n
10. PDF \u2014 Portable Document Format<\/h3>\n
![\"PDF-Datei](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-pdf.png\")
Vorteile und Nachteile<\/h4>\n
\n
Browsers und OS Support<\/h4>\n
\n
Use Cases<\/h4>\n
\n
11. PSD – Photoshop-Dokument<\/h3>\n
![\"Image](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/psd-logo.png\"){kind=logo}
Vorteile und Nachteile<\/h4>\n
\n
Use Cases<\/h4>\n
\n
12. AI \u2014 Adobe Illustrator Artwork<\/h3>\n
![\"Adobe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-illustrator-file-icon.png\"){kind=icon}
Vorteile und Nachteile<\/h4>\n
\n
Use Cases<\/h4>\n
\n
13. XCF \u2014 eXperimental Computing Facility<\/h3>\n
![\"xcf](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/xcf-icon.png\"){kind=icon}
Vorteile und Nachteile<\/h4>\n
\n
Use Cases<\/h4>\n
\n
14. \u00a0INDD \u2014 Adobe InDesign Document<\/h3>\n
![\"adobe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-indesign-icon.png\"){kind=icon}
Vorteile und Nachteile<\/h4>\n
\n
Use Cases<\/h4>\n
\n
15. Raw Image File Types<\/h3>\n
\n
Vorteile und Nachteile<\/h4>\n
\n
Use Cases<\/h4>\n
\n
Bild-Dateitypen FAQs<\/h2>\n
Was sind die 3 \u00fcblichen Dateitypen einer Bilddatei?<\/h3>\n
![\"Nutzungsstatistiken](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/09\/image-file-types-stats.png\")
1. PNG: Screenshots, Banner, Infografiken, Bilder<\/h4>\n
2. JPEG: Bilder<\/h4>\n
3. SVG: Logos, Icons und Illustrationen<\/h4>\n
Ehrenvolle Erw\u00e4hnung: Animierte GIF-Bilder<\/h4>\n
![\"Animiertes](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/comeback-gif.gif\")
Welches Bildformat ist die h\u00f6chste Qualit\u00e4t?<\/h3>\n
Welche Dateiformate unterst\u00fctzen die Transparenz?<\/h3>\n
Ist PNG besser als JPEG?<\/h3>\n