{"id":21870,"date":"2019-01-07T11:00:34","date_gmt":"2019-01-07T10:00:34","guid":{"rendered":"https:\/\/kinsta.com\/?p=4337"},"modified":"2023-07-27T11:03:50","modified_gmt":"2023-07-27T10:03:50","slug":"optimiert-bilder-fur-web","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/","title":{"rendered":"Wie man Bilder f\u00fcr Web und Performance optimiert"},"content":{"rendered":"<p>Vertrau uns, Du willst nicht, dass Google Deine Webseite hasst. Gl\u00fccklicherweise kannst Du die Dateigr\u00f6\u00dfen Deines Bildes reduzieren, um die Leistung Deiner Webseite zu verbessern.<\/p>\n<p>Ein Problem bei der Formatierung ist, dass \u00c4nderungen oft die Qualit\u00e4t beeintr\u00e4chtigen (was wiederum dazu f\u00fchren kann, dass der Besucher Deine Webseite hasst). Das ist keine schlechte Sache, solange man sie nicht h\u00e4sslich macht.<\/p>\n<p>Es gibt einige Tricks und Techniken, mit denen Du die Dateigr\u00f6\u00dfe des Bildes reduzieren und trotzdem sch\u00f6n genug halten kannst, um sie stolz auf Deiner Webseite anzuzeigen.<\/p>\n<p>Lass uns also einen Blick darauf werfen, wie Du Deine Bilder formatieren kannst, ohne sie zu verunstalten, und wie Du <strong>Bilder f\u00fcr Web und Performance optimieren<\/strong> kannst.<\/p>\n\n<div  class=\"featured-snippet\" id=\"featuredSnippet\">\n    <div class=\"featured-snippet__content\">\n        <h2>Was bedeutet es, Bilder zu optimieren?<\/h2>\n        <div><p>Gro\u00dfe Bilder verlangsamen Deine Webseiten, was zu einem suboptimalen Benutzererlebnis f\u00fchrt. Die Optimierung von Bildern ist der Prozess der <strong>Verringerung der Dateigr\u00f6\u00dfe<\/strong>, entweder mit einem Plug-In oder einem Skript, was wiederum die Ladezeit der Seite beschleunigt. Verlorene und verlustfreie Kompression sind zwei g\u00e4ngige Methoden.<\/p>\n<\/div>\n    <\/div>\n    <div class=\"featured-snippet__footer\">\n        <div class=\"arrow-down\"><\/div>\n        <div class=\"featured-snippet__footer--content row nocol middle-xs between-xs reverse\">\n            <div style=\"margin-left: auto; position: relative; top: -1px\" class=\"row nocol middle-xs\">\n                <div class=\"color--mediumGray\" style=\"font-size: 14px; vertical-align: middle;\">\n                    <svg  class=\"icon icon--logo display--block\" aria-hidden=\"true\" focusable=\"false\"><use xlink:href=\"https:\/\/kinsta.com\/de\/wp-content\/themes\/kinsta\/dist\/sprite.svg?v=e8af2143e3b8bceb5561b327e81ec085#logo\" \/><\/svg>                <\/div>\n                <div class=\"text--bold color--mediumGray\" style=\"padding-left: 3px;\">Support<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3>Schau dir unseren <a href=\"https:\/\/www.youtube.com\/watch?v=rMKI-fLBTfM\">Video-Leitfaden<\/a> zur Optimierung von Bildern f\u00fcr SEO an<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=rMKI-fLBTfM\"><\/kinsta-video>\n<h2><a id=\"benefits-of-formatting-images\"><\/a>Die Vorteile der Formatierung Deiner Bilder<\/h2>\n<p>Erstens, warum musst du Deine Bilder formatieren? Was sind die Vorteile? Es gibt zahlreiche Vorteile bei der Optimierung Deiner Bilder f\u00fcr die Leistung. Laut <a href=\"https:\/\/httparchive.org\/reports\/page-weight\" target=\"_blank\" rel=\"noopener noreferrer\">HTTP Archive<\/a> machen <strong>Bilder per November 2018 durchschnittlich 21% des Gesamtgewichts einer Webseite aus<\/strong>. Wenn es also darum geht, <a href=\"https:\/\/kinsta.com\/de\/lernen\/wordpress-beschleunigen\/\" target=\"_blank\" rel=\"noopener noreferrer\">deine Seite zu optimieren<\/a>,\u00a0nach Video Content, sind Bilder der erste Anlaufpunkt!<\/p>\n<p>Sie sind wichtiger als Skripte und Schriften. Und ironischerweise ist ein guter Bildoptimierungs-Workflow eines der am einfachsten zu implementierenden Mittel, aber viele Webseitenbetreiber \u00fcbersehen dies.<\/p>\n<figure style=\"width: 1403px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/11\/durchschnittliche-bytes-pro-seite-1.png\" alt=\"Durchschnittliche Bytes pro Seite\" width=\"1403\" height=\"1030\"><figcaption class=\"wp-caption-text\">Durchschnittliche Bytes pro Seite<\/figcaption><\/figure>\n<p>Hier ist ein Blick auf die wichtigsten Vorteile:<\/p>\n<ul>\n<li>Es wird die Ladegeschwindigkeit Deiner Seite verbessern (unsere Fallstudie unten belegt, wie sehr sie Deine Geschwindigkeit beeinflusst). Wenn Deine Seite zu lange braucht, um geladen zu werden, werden Deine Besucher es vielleicht leid, zu warten und zu etwas Anderem \u00fcbergehen. Weitere Informationen findest Du in unserem <a href=\"https:\/\/kinsta.com\/de\/lernen\/website-geschwindigkeit\/\" target=\"_blank\" rel=\"noopener noreferrer\">ausf\u00fchrlichen Leitfaden zur Optimierung der Seitengeschwindigkeit<\/a>.<\/li>\n<li>Kombiniert mit einem <a href=\"https:\/\/kinsta.com\/de\/blog\/beste-seo-plugins-fur-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">gro\u00dfartigen SEO WordPress Plug-In<\/a> verbessert es die <a href=\"https:\/\/kinsta.com\/de\/blog\/wofur-steht-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a>. Die Webseite wird in den Suchmaschinenergebnissen einen h\u00f6heren Rang einnehmen. Gro\u00dfe Dateien verlangsamen Deine Webseite und <a href=\"https:\/\/kinsta.com\/de\/blog\/alternative-suchmaschinen\/\">Suchmaschinen<\/a> hassen langsame Websites. Google wird die Bilder wahrscheinlich auch schneller f\u00fcr die Google-Bildsuche durchsuchen und indizieren. Du bist neugierig, wieviel Prozent Deines Traffics von der Google-Bildsuche kommt? Du kannst ein <a href=\"https:\/\/kinsta.com\/de\/blog\/google-analytics-wordpress\/\">Google Analytics WordPress<\/a> plugin oder segment verwenden, um den <a href=\"https:\/\/passion.digital\/blog\/how-to-check-image-traffic-in-ga\/\" target=\"_blank\" rel=\"noopener noreferrer\">Traffic der Google-Bildsuche zu \u00fcberpr\u00fcfen<\/a>.<\/li>\n<li>Die Erstellung von Backups wird schneller ablaufen.<\/li>\n<li>Kleinere Bilddateigr\u00f6\u00dfen verbrauchen weniger Bandbreite. Netzwerke und Browser werden dies zu sch\u00e4tzen wissen.<\/li>\n<li>Ben\u00f6tigt <a href=\"https:\/\/kinsta.com\/de\/blog\/festplattennutzung-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">weniger Speicherplatz auf deinem Server<\/a> (abh\u00e4ngig davon, wie viele Miniaturansichten Du optimierst).<\/li>\n<\/ul>\n\n<p>Als Kinsta-Kunde kannst du kostenlos von der Bildoptimierung profitieren, indem du die automatische Bildoptimierung mit nur wenigen Klicks aktivierst. Darauf gehen wir weiter unten n\u00e4her ein.<\/p>\n<h2><a id=\"how-to-optimize-images\"><\/a>Wie optimiere ich Bilder f\u00fcr das Web und die Leistung?<\/h2>\n<p>Das Hauptziel der Formatierung der Bilder ist es, das <strong>Gleichgewicht zwischen der niedrigsten Dateigr\u00f6\u00dfe und einer akzeptablen Qualit\u00e4t zu finden<\/strong>.<\/p>\n<p>Es gibt mehr als eine M\u00f6glichkeit, fast alle dieser Optimierungen durchzuf\u00fchren. Eine der beliebtesten Methoden ist es, sie einfach zu komprimieren, bevor sie auf <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-wordpress\/\">WordPress<\/a> hochgeladen werden. Normalerweise kann dies mit einem Tool wie Adobe Photoshop oder Affinity Photo erfolgen. Einige dieser Aufgaben k\u00f6nnen auch mit Plug-Ins durchgef\u00fchrt werden, auf die wir im Folgenden n\u00e4her eingehen werden.<\/p>\n\n<p>Die beiden wichtigsten Punkte sind das <strong>Dateiformat<\/strong> und die <strong>Art der Komprimierung<\/strong>, die du verwendest. Wenn du die richtige Kombination aus Dateiformat und Komprimierungsart w\u00e4hlst, kannst du die Bildgr\u00f6\u00dfe bis zum F\u00fcnffachen reduzieren. Du musst mit jedem Bild oder Dateiformat experimentieren, um herauszufinden, was am besten funktioniert.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"5\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3 id=\"choose-the-right-file-format\">1. Das richtige Dateiformat ausw\u00e4hlen<\/h3>\n<p>Bevor Du anf\u00e4ngst, Deine Bilder zu bearbeiten, stelle sicher, dass Du <a href=\"https:\/\/kinsta.com\/de\/blog\/bilddateitypen\/\">den besten Dateityp<\/a> ausgew\u00e4hlt hast. Es gibt mehrere Arten von Dateien, die Du verwenden kannst:<\/p>\n<ul style=\"margin-left: 30px\">\n<li><strong>PNG<\/strong> \u2013 erzeugt Bilder in h\u00f6herer Qualit\u00e4t, hat aber auch eine gr\u00f6\u00dfere Dateigr\u00f6\u00dfe. Wurde als verlustfreies Bildformat erstellt, kann aber auch verlustbehaftet sein.<\/li>\n<li><strong>JPEG<\/strong> \u2013 verwendet <a href=\"https:\/\/kinsta.com\/de\/blog\/verlustbehaftete-kompression\/\" target=\"_blank\" rel=\"noopener noreferrer\">verlustbehaftete und verlustfreie Optimierung<\/a>. Die Qualit\u00e4tsstufe kann f\u00fcr ein ausgewogenes Verh\u00e4ltnis von Qualit\u00e4t und Dateigr\u00f6\u00dfe angepasst werden.<\/li>\n<li><strong>GIF<\/strong> \u2013 verwendet nur 256 Farben. Es ist die beste Wahl f\u00fcr animierte Bilder. Es wird strikt verlustfreie Kompression verwendet<\/li>\n<\/ul>\n<p>Es gibt noch einige andere, wie JPEG XR und WebP, aber sie werden nicht von allen Browsern unterst\u00fctzt. Im Idealfall solltest Du JPEG oder JPG f\u00fcr Bilder mit viel Farbe und PNG f\u00fcr simple Bilder verwenden.<\/p>\n<p>(Empfohlene Lekt\u00fcre: <a href=\"https:\/\/kinsta.com\/de\/blog\/jpg-vs-jpeg\/\">JPG vs. JPEG: Das g\u00e4ngigste Bilddateiformat verstehen<\/a>)<\/p>\n<h3 id=\"compression-quality-vs-size\">2. Qualit\u00e4t und Gr\u00f6\u00dfe der Komprimierung im Auge behalten<\/h3>\n<p>Hier ist ein Beispiel daf\u00fcr, was passieren kann, wenn Du ein Bild zu stark komprimierst. Das erste Bild zeigt die Verwendung einer sehr niedrigen Kompressionsrate, was zu h\u00f6chster Qualit\u00e4t (aber gr\u00f6\u00dferer Dateigr\u00f6\u00dfe) f\u00fchrt. Das zweite wiederum arbeitet mit einer sehr hohen Komprimierungsrate, was zu einer sehr geringen Bildqualit\u00e4t (aber auch einer geringeren Dateigr\u00f6\u00dfe) f\u00fchrt. Hinweis: Das unver\u00e4nderte Originalbild betr\u00e4gt 2,06 MB.<\/p>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/11\/niedrige-kompression-hohe-qualitat.jpg\" alt=\"Niedrige Kompression (hohe Qualit\u00e4t)\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">Niedrige Kompression (hohe Qualit\u00e4t) JPG &#8211; 590 KB<\/figcaption><\/figure>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/11\/hohe-kompression-niedrige-qualitat.jpg\" alt=\"Hohe Kompression (niedrige Qualit\u00e4t)\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">Hohe Kompression (niedrige Qualit\u00e4t) JPG &#8211; 68 KB<\/figcaption><\/figure>\n<p>Wie man sieht, ist das erste Bild oben 590 KB gro\u00df. Das ist ziemlich gro\u00df f\u00fcr ein Foto! Es ist im Allgemeinen am besten, wenn Du das Gesamtgewicht einer Webseite unter 1 oder 2 MB Gr\u00f6\u00dfe halten kannst. 590 KB w\u00e4ren schon ein Viertel davon. Das zweite Bild sieht offensichtlich schrecklich aus, aber dann sind es nur noch 68 KB. Was Du tun solltest, ist, eine goldene Mitte zwischen der Kompressionsrate (Qualit\u00e4t) und der Dateigr\u00f6\u00dfe zu finden.<\/p>\n<p>Also haben wir das Bild wieder mit einer mittleren Kompressionsrate aufgenommen und wie Du unten sehen kannst, sieht die Qualit\u00e4t jetzt gut aus und die Dateigr\u00f6\u00dfe betr\u00e4gt 151 KB, was f\u00fcr ein hochaufl\u00f6sendes Foto akzeptabel ist. Dies ist fast 4x kleiner als das Originalfoto bei geringer Kompression. Normalerweise sollten einfachere Bilder wie PNGs unter 100 KB oder weniger liegen, um die beste Leistung zu erzielen.<\/p>\n<figure style=\"width: 1717px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/11\/mittlere-kompression-medium-qualitat-jpg-1.jpg\" alt=\"Mittlere Kompression toll Qualit\u00e4t jpg\" width=\"1717\" height=\"1151\"><figcaption class=\"wp-caption-text\">Mittlere Kompression (toll Qualit\u00e4t) JPG &#8211; 151 KB<\/figcaption><\/figure>\n<h3 id=\"lossy-vs-lossless-optimization\">3. Verlustbehaftete vs. verlustfreie Optimierung verstehen<\/h3>\n<p>Es ist auch wichtig zu verstehen, dass es zwei Arten von Kompression gibt, die Du verwenden kannst, <a href=\"https:\/\/kinsta.com\/de\/blog\/verlustbehaftete-vs-verlustfreie\/\">verlustbehaftet und verlustfrei<\/a>.<\/p>\n<p><strong>Verlustbehaftet:<\/strong> Dies ist ein Filter, der einen Teil der Daten eliminiert. Dies f\u00fchrt zu einer Verschlechterung des Bildes, so dass man darauf achten muss, wie stark man das Bild verkleinern kann. Die Dateigr\u00f6\u00dfe kann um ein Vielfaches reduziert werden. Mit Werkzeugen wie Adobe Photoshop, Affinity Photo oder anderen Bildbearbeitungsprogrammen kann man die Qualit\u00e4tseinstellungen eines Bildes anpassen. Bei dem oben dargestellten Beispiel handelt es sich um eine <a href=\"https:\/\/kinsta.com\/de\/blog\/verlustbehaftete-kompression\/\">verlustbehaftete Kompression<\/a>.<\/p>\n<p><strong>Verlustfrei: <\/strong>Dies ist ein Filter, der die Daten komprimiert. Dies verringert nicht die Qualit\u00e4t, aber es erfordert, dass die Bilder dekomprimiert werden, bevor sie gerendert werden k\u00f6nnen. Du kannst eine verlustfreie Kompression auf Deinem Desktop mit Tools wie Photoshop, <a href=\"https:\/\/nikkhokkho.sourceforge.io\/static.php?page=FileOptimizer\" target=\"_blank\" rel=\"noopener noreferrer\">FileOptimizer<\/a> oder <a href=\"https:\/\/imageoptim.com\/api\" target=\"_blank\" rel=\"noopener noreferrer\">ImageOptim<\/a> durchf\u00fchren.<\/p>\n<p>Am besten probierst Du Deine verschiedenen Kompressionstechniken aus, um zu sehen, was f\u00fcr jedes Bild oder Format am besten funktioniert. Wenn Deine Tools die Option haben, stelle sicher, dass Du das Bild f\u00fcr das Web speicherst. Diese Option ist in vielen Bildbearbeitungsprogrammen enthalten und bietet Dir die M\u00f6glichkeit, die Qualit\u00e4t anzupassen, damit Du eine optimale Komprimierung durchf\u00fchren kannst. Qualit\u00e4tsverluste sind meist unausweichlich, also experimentiere, um die beste Balance zu finden, ohne die Bilder zu sehr zu verzerren.<\/p>\n<h3 id=\"image-optimization-tools-and-programs\">4. Use Image Optimization Tools and Programs<\/h3>\n<p>Es gibt eine Vielzahl von kostenlosen und kostenpflichtigen Tools und Programmen, mit denen du deine Bilder optimieren kannst.<\/p>\n<p>Einige geben dir die Werkzeuge an die Hand, um deine eigenen Optimierungen vorzunehmen, andere \u00fcbernehmen die Arbeit f\u00fcr dich. Wir pers\u00f6nlich sind gro\u00dfe Fans von <a href=\"https:\/\/affinity.serif.com\/en-us\/photo\/\">Affinity Photo<\/a>, da es g\u00fcnstig ist und dir fast identische Funktionen wie Adobe Photoshop bietet.<\/p>\n<figure style=\"width: 2165px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2015\/11\/affinity-photo.jpg\" alt=\"affinity photo\" width=\"2165\" height=\"1354\" data-must_clone=\"true\"><figcaption class=\"wp-caption-text\">Compressing photo in Affinity Photo<\/figcaption><\/figure>\n<p>Hier sind einige zus\u00e4tzliche Tools und Programme zum Ausprobieren:<\/p>\n<ul style=\"margin-left: 30px\">\n<li><a href=\"https:\/\/www.adobe.com\/products\/photoshop.html\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Photoshop<\/a><\/li>\n<li><a href=\"https:\/\/www.gimp.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gimp<\/a><\/li>\n<li><a href=\"https:\/\/www.getpaint.net\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Paint.NET<\/a><\/li>\n<li><a href=\"http:\/\/www.lcdf.org\/gifsicle\/\" target=\"_blank\" rel=\"noopener noreferrer\">GIFsicle<\/a><\/li>\n<li><a href=\"https:\/\/www.jpegmini.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JPEG Mini<\/a><\/li>\n<li><a href=\"https:\/\/optipng.sourceforge.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">OptiPNG<\/a><\/li>\n<li><a href=\"https:\/\/pngquant.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">pngquant<\/a><\/li>\n<li><a href=\"https:\/\/nikkhokkho.sourceforge.io\/static.php?page=FileOptimizer\" target=\"_blank\" rel=\"noopener noreferrer\">FileOptimizer<\/a><\/li>\n<li><a href=\"https:\/\/imageoptim.com\/api\" target=\"_blank\" rel=\"noopener noreferrer\">ImageOptim<\/a><\/li>\n<li><a href=\"https:\/\/trimage.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Trimage<\/a><\/li>\n<li><a href=\"https:\/\/imageresizer.com\/image-compressor\" target=\"_blank\" rel=\"noopener noreferrer\">ImageResize.org<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#image-optimization-1\">Die Bildoptimierungsfunktion von Kinsta<\/a><\/li>\n<\/ul>\n<p>Vergiss nicht, dass deine Methoden zur Bereitstellung von Bildern genauso wichtig sind wie die Dateigr\u00f6\u00dfe. Viele Premium Hosts wie Kinsta <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#kinstas-cdn\">setzen ein CDN<\/a> ein, um Bilder und andere Dateien schnell an die Nutzer\/innen auszuliefern. Die <a href=\"https:\/\/kinsta.com\/de\/blog\/cloudflare-integration\/\">kostenlose Cloudflare-Integration<\/a> von Kinsta sch\u00fctzt alle Seiten auf der Plattform und macht sie sowohl schnell als auch sicher.<\/p>\n<h3 id=\"resizing-images-to-scale\">5. Bilder skalieren<\/h3>\n<p>In der Vergangenheit war es sehr wichtig, dass man Bilder hochl\u00e4dt, um sie zu skalieren und sie nicht von CSS skalieren zu lassen. Dies ist jedoch unbedeutsamer geworden, da WordPress 4.4 nun <a href=\"https:\/\/make.wordpress.org\/core\/2015\/11\/10\/responsive-images-in-wordpress-4-4\/\" target=\"_blank\" rel=\"noopener noreferrer\">reaktionsschnelle Bilder<\/a>\u00a0unterst\u00fctzt (nicht durch CSS verkleinert).<\/p>\n<p>Grunds\u00e4tzlich erstellt WordPress automatisch mehrere Gr\u00f6\u00dfen von jedem Bild, das in die Medienbibliothek hochgeladen wird. Durch die Einbeziehung der verf\u00fcgbaren Gr\u00f6\u00dfen eines Bildes in ein\u00a0<code>srcset<\/code>-Attribut k\u00f6nnen Browser nun die am besten geeignete Gr\u00f6\u00dfe herunterladen und die anderen ignorieren. Nachfolgend siehst Du ein Beispiel daf\u00fcr, wie Dein Code tats\u00e4chlich aussieht.<\/p>\n<div id class=\"wp-caption aligncenter\">\n<figure style=\"width: 1386px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"srcset responsive images example in code\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2018\/05\/srcset-reaktionsschnellen-bildes.png\" alt=\"Beispiel eines srcset reaktionsschnellen Bildes im Code\" width=\"1386\" height=\"302\"><figcaption class=\"wp-caption-text\">Beispiel eines srcset reaktionsschnellen Bildes im Code<\/figcaption><\/figure>\n<\/div>\n<p>So kann es mit immer mehr HiDPI-Displays heutzutage gut sein, eine geeignete Mitte zu finden. Sagen wir 2x oder 3x die Spalten- oder Div-Gr\u00f6\u00dfe Deiner Webseite, aber immer noch weniger als die Originalgr\u00f6\u00dfe. Der Browser zeigt die richtige Wahl an, basierend auf der Aufl\u00f6sung des Ger\u00e4ts.<\/p>\n<p>Die WordPress-Medienbibliothek <a href=\"https:\/\/kinsta.com\/de\/blog\/thumbnails-regenerieren\/\">erstellt Miniaturansichten basierend auf den Einstellungen<\/a>. Das Original bleibt jedoch erhalten und unber\u00fchrt. Wenn Du die Gr\u00f6\u00dfe Deiner Bilder \u00e4ndern und Speicherplatz sparen m\u00f6chtest, indem Du das Original nicht speicherst, kannst du ein kostenloses Plugin wie <a href=\"https:\/\/wordpress.org\/plugins\/imsanity\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imsanity<\/a> verwenden.<\/p>\n<figure style=\"width: 1626px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" title=\"WordPress media settings\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2017\/05\/wordpress-medieneinstellungen.png\" alt=\"WordPress-Medieneinstellungen\" width=\"1626\" height=\"1314\"><figcaption class=\"wp-caption-text\">WordPress-Medieneinstellungen<\/figcaption><\/figure>\n<p>Imsanity erlaubt es Dir, eine Vernunftgrenze festzulegen, so dass alle hochgeladenen Bilder auf eine angemessene Gr\u00f6\u00dfe beschr\u00e4nkt werden, die immer noch mehr als ausreichend f\u00fcr die Bed\u00fcrfnisse einer typischen Webseite ist. Imsanity klinkt sich unmittelbar nach dem Hochladen des Bildes, aber vor der WordPress-Verarbeitung in WordPress ein. WordPress verh\u00e4lt sich also in jeder Hinsicht genau gleich, au\u00dfer dass es so ist, als h\u00e4tte der Mitwirkende sein Bild vor dem Hochladen auf eine angemessene Gr\u00f6\u00dfe skaliert.<\/p>\n<h2><a id=\"image-optimization-wordpress-plugins\"><\/a>Bildoptimierungs-Plug-Ins, die Du verwenden kannst<\/h2>\n<p>Zum Gl\u00fcck musst du bei WordPress nicht alle Formatierungen und Komprimierungen von Hand vornehmen. Du kannst Plugins verwenden, die zumindest einen Teil der Arbeit automatisch f\u00fcr dich erledigen.<\/p>\n<p>Es gibt mehrere Plugins, die deine Bilddateien automatisch optimieren, wenn du sie hochl\u00e4dst. Sie k\u00f6nnen sogar Bilder optimieren, die du bereits hochgeladen hast. Das ist eine praktische Funktion &#8211; vor allem, wenn du bereits eine Website mit vielen Bildern hast. Hier findest du einige der besten Plugins, mit denen du deine Bilder f\u00fcr eine bessere Leistung formatieren kannst.<\/p>\n<p>Es ist jedoch wichtig, dass du dich nicht nur auf die Plugins selbst verl\u00e4sst. Du solltest zum Beispiel keine 2 MB gro\u00dfen Bilder in deine WordPress-Mediathek hochladen. Das kann dazu f\u00fchren, dass der Speicherplatz deines Hosts sehr schnell aufgebraucht ist.<\/p>\n<p>Die beste Methode ist, das Bild vorher in einem Bildbearbeitungsprogramm zu verkleinern, es dann hochzuladen und eines der folgenden Plugins zu verwenden, um es weiter zu verkleinern.<\/p>\n<p>Bevor du dich f\u00fcr eines dieser Tools oder Plugins entscheidest, solltest du jedoch \u00fcberpr\u00fcfen, ob dein <a href=\"https:\/\/kinsta.com\/de\/blog\/agenturorientiertes-managed-hosting\/\">Hosting-Anbieter<\/a> nicht integrierte Tools anbietet, die die Arbeit f\u00fcr dich erledigen. Kinsta-Kunden haben zum Beispiel Zugang zu einer <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#image-optimization-1\">kostenlosen Bildoptimierungsfunktion<\/a>, die automatisch optimierte Kopien aller WordPress-Bilder erstellt, die kostenlos gespeichert werden. Die kleinere der beiden Bilddateien wird dann \u00fcber das <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#kinstas-cdn\">blitzschnelle Kinsta&#8217;s CDN<\/a> ausgeliefert, um die Geschwindigkeit noch weiter zu erh\u00f6hen. Die Kunden k\u00f6nnen sogar zwischen verlustfreier und verlustbehafteter Komprimierung w\u00e4hlen, je nachdem, was sie brauchen.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"7\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3 id=\"imagify\">1. Imagify Image Optimizer<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/11\/imagify-image-optimizer.jpg\" alt=\"Imagify Image Optimizer Plugin \" width=\"1349\" height=\"437\"><\/a><figcaption class=\"wp-caption-text\">Imagify Image Optimizer plugin<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imagify<\/a> wird von demselben Team entwickelt, das auch WP Rocket entwickelt hat, was den meisten von Euch wahrscheinlich bekannt ist. Es ist WooCommerce, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-fotogalerie-plugins\/#nextgen-gallery\" target=\"_blank\" rel=\"noopener noreferrer\">NextGen Gallery<\/a> und WP Retina kompatibel. Es hat auch eine Massenoptimierungsfunktion und Du kannst zwischen drei verschiedenen Stufen der Kompression, normal, aggressiv und ultra, w\u00e4hlen. Es hat auch eine Wiederherstellungsfunktion, so dass man, wenn man mit der Qualit\u00e4t unzufrieden ist, mit einem Klick wiederherstellen und neu komprimieren kann, und zwar auf einem Niveau, das seinen Bed\u00fcrfnissen besser entspricht. Es gibt eine kostenlose und eine Premium-Version. Bei einem kostenlosen Konto ist die Anzahl der Bilder auf 25 MB pro Monat begrenzt.<\/p>\n<p>Das Entfernen des Originalbildes und die Gr\u00f6\u00dfen\u00e4nderung Deiner gr\u00f6\u00dferen Bilder kann auch mit diesem Plug-In durchgef\u00fchrt werden.<\/p>\n<figure style=\"width: 1554px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/05\/resize-imagify-1.png\" alt=\"\u00c4ndern der Bildgr\u00f6\u00dfe in Imagify\" width=\"1554\" height=\"649\" data-must_clone=\"true\"><figcaption class=\"wp-caption-text\">\u00c4ndern der Bildgr\u00f6\u00dfe in Imagify<\/figcaption><\/figure>\n<p>Imagify <strong>komprimiert auch Bilder auf ihren Servern von Drittanbietern<\/strong>, nicht auf Deinem, was sehr wichtig ist, um die Leistung hoch zu halten. Imagify sollte Deine WordPress-Seite nicht verlangsamen.<\/p>\n<h3 id=\"optimole\">2. Optimole<\/h3>\n<figure id=\"attachment_39491\" aria-describedby=\"caption-attachment-39491\" style=\"width: 1539px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-39491 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2017\/05\/optimole-1-1.jpg\" alt=\"Optimole\" width=\"1539\" height=\"495\"><\/a><figcaption id=\"caption-attachment-39491\" class=\"wp-caption-text\">Optimole plugin<\/figcaption><\/figure>\n<p>Optimole ist ein Bildoptimierungs-Plugin von WordPress, das die Gr\u00f6\u00dfe Ihrer Bilder automatisch reduziert, ohne dass auf der anderen Seite Arbeit anf\u00e4llt. Es hat einen gro\u00dfen Vorteil, wenn es um die Ladegeschwindigkeit deiner Website geht, da es vollst\u00e4ndig Cloud-basiert ist und nie Bilder liefert, die gr\u00f6\u00dfer sind als sie sollten, d.h. es zeigt die perfekte Bildgr\u00f6\u00dfe f\u00fcr den Ansichtsfenster und Browser des Besuchers.<\/p>\n<p>Dar\u00fcber hinaus bietet das Plugin ein verz\u00f6gertes Laden und einen effizienten Bildersatz &#8211; es verschlechtert die Bildqualit\u00e4t, wenn der Besucher eine langsamere Internetverbindung hat &#8211; was es von der Masse abhebt. Es erkennt auch automatisch den Browser des Benutzers und bedient WebP, wenn es unterst\u00fctzt wird.<\/p>\n<p>Alle Bilder, die Optimole komprimiert, werden \u00fcber ein schnelles CDN bereitgestellt. Du kannst Optimole kostenlos ausprobieren oder auf den Premium-Plan upgraden, wenn du zus\u00e4tzliche Bandbreite und Verarbeitungsplatz ben\u00f6tigst.<\/p>\n<h3 id=\"optimus\">3. Optimus Image Optimizer<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/optimus\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/11\/optimus-image-optimizer.jpg\" alt=\"Optimus Image Optimizer Plugin\" width=\"1349\" height=\"437\"><\/a><figcaption class=\"wp-caption-text\">Optimus Image Optimizer Plugin<\/figcaption><\/figure>\n<p>Der <a href=\"https:\/\/wordpress.org\/plugins\/optimus\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimus WordPress Image Optimizer<\/a> verwendet eine verlustfreie Kompression, um Deine Bilder zu optimieren. Verlustfrei bedeutet, dass keine Qualit\u00e4tsverluste zu verzeichnen sind. Es unterst\u00fctzt WooCoomerce und Multi-Site und hat eine nette Massenoptimierungsfunktion f\u00fcr diejenigen mit bereits gro\u00dfen bestehenden Medienbibliotheken. Es ist auch mit dem WP Retina WordPress Plug-In kompatibel. Du kannst zwischen einer kostenlosen und einer Premium Version w\u00e4hlen. In der Premium-Version bezahlst Du einmal j\u00e4hrlich und kannst eine unbegrenzte Anzahl von Bildern komprimieren. Wenn Du es mit dem Cache Enabler Plug-In kombinierst, kannst Du auch in WebP-Bilder eintauchen, ein neues leichtes Bildformat von Google.<\/p>\n<h3 id=\"wp-smush\">4. WP Smush<\/h3>\n<figure style=\"width: 1637px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/11\/wp-smush.png\" alt=\"WP Smush Plugin\" width=\"1637\" height=\"528\"><\/a><figcaption class=\"wp-caption-text\">WP Smush Plugin<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Smush<\/a> bietet sowohl eine kostenlose als auch eine Premium-Version an. Es reduziert die verborgenen Informationen aus Bildern, um die Gr\u00f6\u00dfe zu reduzieren, ohne die Qualit\u00e4t zu beeintr\u00e4chtigen. Es scannt Bilder und reduziert sie, w\u00e4hrend Du sie auf Deine Webseite hochl\u00e4dst. Au\u00dferdem werden Bilder gescannt, die Du bereits hochgeladen hast, und diese werden ebenfalls reduziert. Es kann bis zu 50 Dateien auf einmal verarbeiten. Du kannst auch manuell arbeiten, wenn Du willst. Die Bildtypen JPEG, GIF und PNG k\u00f6nnen komprimiert werden. Die Dateigr\u00f6\u00dfen sind auf 1 MB begrenzt.<\/p>\n<ul>\n<li>Es ist kompatibel mit einigen der beliebtesten Plugins f\u00fcr Medienbibliotheken wie WP All Import und WPML.<\/li>\n<li>Die gesamte Bildoptimierung erfolgt mit verlustfreien Komprimierungstechniken, die die Bildqualit\u00e4t auf hohem Niveau halten.<\/li>\n<li>Es spielt keine Rolle, in welchem Verzeichnis Du Deine Bilder speicherst. Smush findet sie und komprimiert sie.<\/li>\n<li>Smush hat die M\u00f6glichkeit, Breite und H\u00f6he f\u00fcr alle Bilder automatisch einzustellen, so dass alle Deine Bilder in der gleichen Gr\u00f6\u00dfe dargestellt werden<\/li>\n<\/ul>\n<h3 id=\"tinypng\">5. TinyPNG (auch komprimierte JPGs)<\/h3>\n<figure style=\"width: 1639px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/tiny-compress-images\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/11\/tinypng.png\" alt=\"TinyPNG Plugin\" width=\"1639\" height=\"528\"><\/a><figcaption class=\"wp-caption-text\">TinyPNG Plugin<\/figcaption><\/figure>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tiny-compress-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">TinyPNG<\/a> verwendet die Dienste TinyJPG und TinyPNG (mit dem kostenlosen Konto kannst Du etwa 100 Bilder pro Monat komprimieren), um Deine JPG- und PNG-Bilder zu optimieren. Das Programm komprimiert automatisch neue Bilder und komprimiert Deine vorhandenen Bilder. Es wird CMYK in RBG konvertieren, um Platz zu sparen. JPEG-Bilder werden bis zu 60% und PNG-Bilder bis zu 80% komprimiert, ohne dass die Bildqualit\u00e4t sichtbar beeintr\u00e4chtigt wird. Eine Gr\u00f6\u00dfenbeschr\u00e4nkung f\u00fcr Dateien gibt es nicht.<\/p>\n<h3 id=\"imagerecycle\">6. ImageRecycle<\/h3>\n<figure style=\"width: 1349px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/imagerecycle-pdf-image-compression\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2017\/05\/imagerecycle-pdf-image-kompression.png\" alt=\"ImageRecycle - Plugin f\u00fcr Bild- und PDF-Optimierung\" width=\"1349\" height=\"437\"><\/a><figcaption class=\"wp-caption-text\">ImageRecycle &#8211; Plugin f\u00fcr Bild- und PDF-Optimierung<\/figcaption><\/figure>\n<p>Das <a href=\"https:\/\/wordpress.org\/plugins\/imagerecycle-pdf-image-compression\/\" target=\"_blank\" rel=\"noopener noreferrer\">ImageRecyle<\/a> Plug-In ist ein automatischer Bild- und PDF-Optimierer. Dieses Plug-In konzentriert sich nicht nur auf die Bildkompression, sondern auch auf PDFs. Eine wirklich praktische Funktion ist die M\u00f6glichkeit, die minimale Dateigr\u00f6\u00dfe f\u00fcr die Kompression einzustellen. Wenn man beispielsweise Bilder mit einer Gr\u00f6\u00dfe von 80 KB hat, kann man sie automatisch von der Komprimierung ausschlie\u00dfen lassen. Dadurch wird sichergestellt, dass Bilder und Dateien nie zu stark komprimiert werden. Es beinhaltet auch Massenoptimierung und automatische Bildgr\u00f6\u00dfenanpassung. Sie bieten eine kostenlose 15-t\u00e4gige Testversion, aber dies ist ein Premium-Service, und Bilder werden \u00fcber ihre Server hochgeladen und komprimiert. Sie berechnen nicht pro Monat, sondern nach der Gesamtzahl der komprimierten Bilder, beginnend bei $10 f\u00fcr 10.000.<\/p>\n<h3>7. EWWW Image Optimizer<\/h3>\n<figure id=\"attachment_129416\" aria-describedby=\"caption-attachment-129416\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-129416 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/05\/ewww-image-optimizer.jpg\" alt=\"EWWW Image Optimizer plugin\" width=\"1200\" height=\"389\"><figcaption id=\"caption-attachment-129416\" class=\"wp-caption-text\">EWWW Image Optimizer<\/figcaption><\/figure>\n<p>Der <a href=\"https:\/\/wordpress.org\/plugins\/ewww-image-optimizer\/\">EWWW Image Optimizer<\/a> hilft dir dabei, deine Bilder zu verkleinern und deine Seite schneller zu machen &#8211; und das mit weniger Aufwand. Es gibt keine Gr\u00f6\u00dfenbeschr\u00e4nkungen und viel Flexibilit\u00e4t f\u00fcr fortgeschrittene Nutzer. Du kannst die Standardeinstellungen verwenden oder das Plugin ganz nach deinen W\u00fcnschen anpassen.<\/p>\n<p>Der kostenlose Modus erlaubt eine unbegrenzte J<a href=\"https:\/\/kinsta.com\/de\/blog\/jpg-vs-jpeg\/\">PG-Komprimierung<\/a> und WebP-Konvertierung und ist ideal f\u00fcr Hobbyseiten oder Blogs, die gerade erst anfangen. Alle EWWW IO-Nutzer k\u00f6nnen den Bulk Optimizer verwenden, um ihre vorhandenen Bilder zu komprimieren, oder den Listenmodus der Medienbibliothek nutzen, um bestimmte Bilder auszuw\u00e4hlen, die komprimiert werden sollen. Zus\u00e4tzliche Ordner k\u00f6nnen gescannt werden, um sicherzustellen, dass jedes einzelne Bild auf deiner Seite richtig optimiert ist.<\/p>\n<p>EWWW IO erm\u00f6glicht es dir sogar, deine Bilder in die Formate der n\u00e4chsten Generation wie <a href=\"https:\/\/kinsta.com\/de\/blog\/webp\/\">WebP<\/a> zu konvertieren oder das beste Bildformat f\u00fcr ein Bild mit Multi-Format-Konvertierungsoptionen zu finden.<\/p>\n<div class=\"phenom-desc\">\n<div class=\"comment-container\">\n<div class=\"action-comment can-view-video markeddown js-comment\" dir=\"auto\">\n<div class=\"current-comment js-friendly-links js-open-card\">\n<p>Mit der Premium Compress API kannst du die Komprimierung auf ein ganz neues Niveau heben, ohne Qualit\u00e4tseinbu\u00dfen und mit durchschnittlichen Einsparungen von 50%. Sie schaltet auch die PDF-Komprimierung frei und beinhaltet praktische 30-Tage-Bilder-Backups. Mit dem optionalen Easy IO CDN werden Bilder automatisch komprimiert, an die Seiten- und Ger\u00e4tegr\u00f6\u00dfe angepasst, verz\u00f6gert geladen und in das WebP-Format der n\u00e4chsten Generation konvertiert.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2><a id=\"case-study\"><\/a>Fallstudie zur Optimierung von Bildern<\/h2>\n<p>Wir haben uns entschieden, unsere eigene kleine Fallstudie und Tests durchzuf\u00fchren, um Dir zu zeigen, wie sehr die Optimierung Deiner Bilder f\u00fcr das Web die Gesamtgeschwindigkeit Deiner WordPress-Seite beeinflussen kann.<\/p>\n<h3>Unkomprimierte JPGs<\/h3>\n<p>Zuerst haben wir 6 unkomprimierte JPGs, die alle \u00fcber 1 MB gro\u00df waren, auf unsere Testseite hochgeladen. Dann haben wir 5 Tests mit Pingdom durchgef\u00fchrt und den Durchschnitt genommen. Wie Du am <a href=\"https:\/\/tools.pingdom.com\/#!\/dbKwjQ\/https:\/\/perfmatters.io\/uncompressed-jpg\/\" target=\"_blank\" rel=\"noopener noreferrer\">Geschwindigkeitstest<\/a> unten sehen kannst, betrug unsere Gesamtladezeit 1,55 Sekunden und die gesamte Seitengr\u00f6\u00dfe 14,7 MB.<\/p>\n<figure style=\"width: 1693px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/11\/geschwindigkeitstest-unkomprimierten-jpg.png\" alt=\"Geschwindigkeitstest mit unkomprimierten JPGs\" width=\"1693\" height=\"535\"><figcaption class=\"wp-caption-text\">Geschwindigkeitstest mit unkomprimierten JPGs<\/figcaption><\/figure>\n<h3>Komprimierte JPGs<\/h3>\n<p>Wir haben dann die JPGs mit dem Imagify WordPress-Plug-in komprimiert, mit der &#8222;aggressiven Einstellung&#8220;. Wir haben dann wieder 5 Tests mit Pingdom absolviert und den Durchschnitt genommen. Wie Du am <a href=\"https:\/\/tools.pingdom.com\/#!\/eHwxw9\/https:\/\/perfmatters.io\/compressed-jpg\/\" target=\"_blank\" rel=\"noopener noreferrer\">Geschwindigkeitstest<\/a> unten sehen kannst, wurde unsere Gesamtladezeit auf 476 ms und die gesamte Seitengr\u00f6\u00dfe auf 2,9 MB reduziert. Unsere <strong>Gesamtladezeiten wurden um 54,88% und die Seitengr\u00f6\u00dfe um 80,27% reduziert<\/strong>.<\/p>\n<figure style=\"width: 1686px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2015\/11\/geschwindigkeitstest-compressed-jpg.png\" alt=\"Geschwindigkeitstest mit komprimierten JPGs\" width=\"1686\" height=\"535\"><figcaption class=\"wp-caption-text\">Geschwindigkeitstest mit komprimierten JPGs<\/figcaption><\/figure>\n<p>Es gibt fast keine andere Optimierung, die Du auf Deiner Webseite vornehmen kannst, die Dir eine Verk\u00fcrzung der Ladezeiten um \u00fcber 50% bringt. Deshalb ist die Bildoptimierung so wichtig, obendrein wurde der Prozess durch das Plug-in automatisiert. Es ist ein praktischer Ansatz f\u00fcr eine schnellere WordPress-Seite. Die einzige andere drastische Optimierung, die Du machen k\u00f6nntest, w\u00e4re, Deine WordPress-Hosts zu \u00e4ndern. Viele Kunden, die zu Kinsta \u00fcbersiedeln, sehen mehr als 45% Geschwindigkeitssteigerungen. Stell Dir vor, du ziehst zu <a href=\"https:\/\/kinsta.com\/de\/\" target=\"_blank\" rel=\"noopener noreferrer\">Kinsta<\/a> und optimierst Deine Bilder!<\/p>\n<p>Durch die Optimierung der Bilder, sei es mit einem Fotobearbeitungsprogramm oder einem WordPress-Plug-in, kannst Du auch die Warnung &#8222;Bilder optimieren&#8220; beheben, die Du in Google PageSpeed Insights erh\u00e4ltst (wie unten gezeigt.)<\/p>\n<figure style=\"width: 1898px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2017\/05\/pagespeed-insights-bildoptimierungswarnung.png\" alt=\"PageSpeed Insights Bildoptimierungswarnung\" width=\"1898\" height=\"1211\"><figcaption class=\"wp-caption-text\">PageSpeed Insights Bildoptimierungswarnung<\/figcaption><\/figure>\n<p>Wenn Du andere Optimierungswarnungen von Geschwindigkeitstest-Tools hast, schau Dir unseren Beitrag bei <a href=\"https:\/\/kinsta.com\/de\/blog\/google-pagespeed-insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google PageSpeed Insights<\/a> und unsere ausf\u00fchrliche <a href=\"https:\/\/kinsta.com\/de\/blog\/pingdom-speed-test\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pingdom-Anleitung<\/a> an.<\/p>\n<p><kinsta-video src=\"https:\/\/kinsta.wistia.com\/medias\/qvfucq5kz6?videoFoam=true&#038;videoWidth=640\"><\/kinsta-video><\/p>\n<p>\u00a0<\/p>\n<p><strong>Wir haben unser Wissen \u00fcber die effektive Verwaltung von Websites in gro\u00dfem Ma\u00dfstab in einem E-Book und einem Videokurs zusammengefasst. Klicke hier, um den <a href=\"https:\/\/kinsta.com\/de\/ebooks\/wordpress\/mehrere-wordpress-seiten-verwalten\/?utm_campaign=how-to-speed-up-your-wordpress-site&#038;utm_source=blog-knowledgebase&#038;utm_medium=video\">Leitfaden zur Verwaltung von 60+ WordPress-Seiten<\/a> herunterzuladen!<\/strong><\/p>\n<h2><a id=\"using-svgs\"><\/a>SVGs verwenden: Die Vorteile, die du kennen musst<\/h2>\n<p>Eine weitere Empfehlung ist die Verwendung von<a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-svg\/\"> SVG-Dateien<\/a> neben deinen anderen Bildern. SVG ist ein skalierbares Vektorformat, das sich hervorragend f\u00fcr Logos, Symbole, Text und einfache Bilder eignet. Hier sind ein paar Gr\u00fcnde, warum:<\/p>\n<ul>\n<li>SVGs sind sowohl in Browsern als auch in Bildbearbeitungswerkzeugen automatisch skalierbar. Das ist der Traum eines Web- und Grafikdesigners!<\/li>\n<li>Google indiziert SVGs, so wie es <a href=\"https:\/\/kinsta.com\/de\/blog\/svg-vs-png\/\">PNGs<\/a> und JPGs macht, sodass du Dir keine Sorgen um SEO machen musst.<\/li>\n<li>SVGs sind traditionell (nicht immer) kleiner in der Dateigr\u00f6\u00dfe als PNGs oder JPGs. Dies kann zu schnelleren Ladezeiten f\u00fchren.<\/li>\n<\/ul>\n<p>Genki hat einen gro\u00dfartigen Artikel geschrieben, in dem er die Gr\u00f6\u00dfe von <a href=\"https:\/\/web.archive.org\/web\/20200729105713\/http:\/\/genkihagata.com\/blog\/svg-vs-flat-images.html\" target=\"_blank\" rel=\"noopener noreferrer\">SVG vs. PNG vs. JPEG<\/a> vergleicht. Nachfolgend findest Du einige Beispiele aus seinem Test, in denen er die drei verschiedenen Bildtypen vergleicht.<\/p>\n<h3>JPG (optimized size: 81.4 KB)<\/h3>\n<figure id class=\"wp-caption aligncenter\">\n<p><figure style=\"width: 1280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2017\/04\/jpg-bild.jpg\" alt=\"JPG Bild\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">JPG Bild<\/figcaption><\/figure><\/figure>\n<h3>PNG (optimierte Gr\u00f6\u00dfe: 85,1 KB)<\/h3>\n<figure id class=\"wp-caption aligncenter\">\n<p><figure style=\"width: 1280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2017\/04\/png-bild.png\" alt=\"PNG Bild\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">PNG Bild<\/figcaption><\/figure><\/figure>\n<h3>SVG (optimized size: 6.1 KB)<\/h3>\n<figure id class=\"wp-caption aligncenter\">\n<p><figure style=\"width: 1280px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2017\/04\/svg-grosse.png\" alt=\"SVG (optimierte Gr\u00f6\u00dfe: 6,1 KB)\" width=\"1280\" height=\"535\"><figcaption class=\"wp-caption-text\">SVG (optimierte Gr\u00f6\u00dfe: 6,1 KB)<\/figcaption><\/figure><figcaption class=\"wp-caption-text\">SVG image<\/figcaption><\/figure>\n<p>Wie man oben sehen kann, ist die SVG eine Verringerung der Dateigr\u00f6\u00dfe um 92,51% im Vergleich zum JPG. Und im Vergleich zum PNG, 92,83%. Schau Dir unser Tutorial an, <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-svg\/\" target=\"_blank\" rel=\"noopener noreferrer\">wie man SVGs auf deiner WordPress-Seite verwendet<\/a>.<\/p>\n<h2><a id=\"best-practices\"><\/a>Best Practices f\u00fcr die Optimierung von Bildern f\u00fcr das Web<\/h2>\n<p>Hier sind einige der g\u00e4ngigsten Vorgehensweisen, wenn es darum geht, wie man Bilder f\u00fcr das Web optimiert:<\/p>\n<ul>\n<li>Wenn Du ein WordPress-Plug-in verwendest, <strong>benutze eines, das Bilder extern auf ihren Servern komprimiert und optimiert<\/strong>. Dies wiederum reduziert die Belastung der eigenen Webseite.<\/li>\n<li>Verwende nach M\u00f6glichkeit Vektorbilder neben Deinen PNGs und JPGs.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-cdn\/\"> Nutze ein CDN<\/a>, um Deine Bilder schnell an Besucher auf der ganzen Welt zu verteilen. Das Kinsta CDN verf\u00fcgt \u00fcber eine <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#kinstas-cdn#code-minification-1\">Code-Minifizierungsfunktion<\/a>, die direkt in das <a href=\"https:\/\/kinsta.com\/de\/mykinsta\/\">MyKinsta Dashboard<\/a> integriert ist. Damit k\u00f6nnen <a href=\"https:\/\/kinsta.com\/de\/preise\/?plan=visits-business1\">Kinsta-Kunden<\/a> die automatische CSS- und JavaScript-Minifizierung mit einem einfachen Klick aktivieren.<\/li>\n<li>Entferne unn\u00f6tige Bilddaten.<\/li>\n<li>Beschneide den wei\u00dfen Bereich und erstelle ihn neu, indem du CSS verwendest, um das Padding bereitzustellen.<\/li>\n<li>CSS3-Effekte so weit wie m\u00f6glich nutzen.<\/li>\n<li>Speichere Deine Bilder in den richtigen Ma\u00dfen, obwohl WordPress jetzt reaktionsschnelle Bilder unterst\u00fctzt, um sie bereitzustellen, ohne die Gr\u00f6\u00dfe mit CSS zu \u00e4ndern.<\/li>\n<li>Verwende immer das .ico Dateiformat f\u00fcr dein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-favicon\/\">Favicon<\/a>.<\/li>\n<li>Verwende Webfonts, anstatt Text in Bildern zu platzieren &#8211; sie sehen besser aus, wenn sie skaliert werden und ben\u00f6tigen weniger Platz.<\/li>\n<li>Rasterbilder nur f\u00fcr Szenen mit vielen Formen und Details verwenden.<\/li>\n<li>Reduziere die Bit-Tiefe auf eine kleinere Farbpalette.<\/li>\n<li><strong>Verwende nach M\u00f6glichkeit verlustbehaftete Komprimierung.<\/strong><\/li>\n<li>Experimentiere, um die besten Einstellungen f\u00fcr jedes Format zu finden.<\/li>\n<li>Verwende GIF, wenn sie Animation ben\u00f6tigen (aber <a href=\"https:\/\/woorkup.com\/compress-animated-gif\/\" target=\"_blank\" rel=\"noopener noreferrer\">komprimiere Deine animierten GIFs<\/a>).<\/li>\n<li>Verwende PNG, wenn Du hohe Details und hohe Aufl\u00f6sungen brauchst.<\/li>\n<li>Verwende JPG f\u00fcr allgemeine Fotos und Screenshots.<\/li>\n<li>Entferne nicht ben\u00f6tigte Metadaten von Bildern.<\/li>\n<li>Automatisiere den Prozess so weit wie m\u00f6glich.<\/li>\n<li>In einigen F\u00e4llen solltest du Bilder f\u00fcr ein schnelleres Rendering der ersten <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-lazy-load\/\">Seite lazy loaden<\/a>.<\/li>\n<li>Speichere Bilder als &#8222;optimiert f\u00fcr das Web&#8220; in Tools wie Photoshop.<\/li>\n<li>Verwende WebP in Chrome, um kleinere Bilder bereitzustellen.<\/li>\n<li>Nutze die integrierte <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-cdn\/kinsta-cdn\/#image-optimization-1\">Bildoptimierungsfunktion<\/a> von Kinsta<\/li>\n<\/ul>\n\n<p>Sobald Du Deine Bilder f\u00fcr eine bessere Leistung und nach den besten Praktiken formatiert hast, wird Deine Webseite von Suchmaschinen, Browsern und Netzwerken besser angenommen und f\u00fcr Deine Leser schneller geladen werden. Oh, und stelle sicher, dass Du unser Tutorial \u00fcber <a href=\"https:\/\/kinsta.com\/de\/blog\/hotlinking\/\" target=\"_blank\" rel=\"noopener noreferrer\">Hotlinking<\/a> liest, um zu verhindern, dass Leute Deine Bilder und Bandbreite stehlen.<\/p>\n<p>Sind die Bilder f\u00fcr eine bessere Leistung formatiert? Formatierst Du sie von Hand, benutzt Du ein Plugin oder beides? Gibt es ein anderes Tool oder Plugin, das Du empfehlen w\u00fcrdest? Hast Du etwas hinzuzuf\u00fcgen? Lass uns \u00fcber Deine Techniken und Vorgehensweisen unten in den Kommentaren Bescheid wissen!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vertrau uns, Du willst nicht, dass Google Deine Webseite hasst. Gl\u00fccklicherweise kannst Du die Dateigr\u00f6\u00dfen Deines Bildes reduzieren, um die Leistung Deiner Webseite zu verbessern. Ein &#8230;<\/p>\n","protected":false},"author":38,"featured_media":58021,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[30,29],"topic":[947,988,1012],"class_list":["post-21870","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webperf","tag-wordpress","topic-bild-optimierung","topic-webdesign","topic-wordpress-website-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wie man Bilder f\u00fcr Web und Performance optimiert (2026)<\/title>\n<meta name=\"description\" content=\"Bilder sind oft das #1 Element f\u00fcr langsame Ladezeiten. Erfahren Sie, wie Sie Bilder f\u00fcr das Internet und die Leistung auf Ihrer WordPress-Site optimieren.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie man Bilder f\u00fcr Web und Performance optimiert\" \/>\n<meta property=\"og:description\" content=\"Bilder sind oft das #1 Element f\u00fcr langsame Ladezeiten. Erfahren Sie, wie Sie Bilder f\u00fcr das Internet und die Leistung auf Ihrer WordPress-Site optimieren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fm.brianleejackson\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-07T10:00:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T10:03:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/wie-optimiert-bilder-fur-web.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brian Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Bilder sind oft das #1 Element f\u00fcr langsame Ladezeiten. Erfahren Sie, wie Sie Bilder f\u00fcr das Internet und die Leistung auf Ihrer WordPress-Site optimieren.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/wie-optimiert-bilder-fur-web.png\" \/>\n<meta name=\"twitter:creator\" content=\"@brianleejackson\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"21\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\"},\"author\":{\"name\":\"Brian Jackson\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\"},\"headline\":\"Wie man Bilder f\u00fcr Web und Performance optimiert\",\"datePublished\":\"2019-01-07T10:00:34+00:00\",\"dateModified\":\"2023-07-27T10:03:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\"},\"wordCount\":4089,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/how-to-optimize-images-for-web-and-performance.jpeg\",\"keywords\":[\"webperf\",\"WordPress\"],\"articleSection\":[\"WordPress Leistungstutorials\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\",\"name\":\"Wie man Bilder f\u00fcr Web und Performance optimiert (2026)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/how-to-optimize-images-for-web-and-performance.jpeg\",\"datePublished\":\"2019-01-07T10:00:34+00:00\",\"dateModified\":\"2023-07-27T10:03:50+00:00\",\"description\":\"Bilder sind oft das #1 Element f\u00fcr langsame Ladezeiten. Erfahren Sie, wie Sie Bilder f\u00fcr das Internet und die Leistung auf Ihrer WordPress-Site optimieren.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/how-to-optimize-images-for-web-and-performance.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/how-to-optimize-images-for-web-and-performance.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bild-Optimierung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/bild-optimierung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Wie man Bilder f\u00fcr Web und Performance optimiert\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\",\"name\":\"Brian Jackson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"caption\":\"Brian Jackson\"},\"description\":\"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fm.brianleejackson\",\"https:\/\/www.linkedin.com\/in\/brianleejackson\",\"https:\/\/x.com\/brianleejackson\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/brianjackson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wie man Bilder f\u00fcr Web und Performance optimiert (2026)","description":"Bilder sind oft das #1 Element f\u00fcr langsame Ladezeiten. Erfahren Sie, wie Sie Bilder f\u00fcr das Internet und die Leistung auf Ihrer WordPress-Site optimieren.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/","og_locale":"de_DE","og_type":"article","og_title":"Wie man Bilder f\u00fcr Web und Performance optimiert","og_description":"Bilder sind oft das #1 Element f\u00fcr langsame Ladezeiten. Erfahren Sie, wie Sie Bilder f\u00fcr das Internet und die Leistung auf Ihrer WordPress-Site optimieren.","og_url":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_author":"https:\/\/www.facebook.com\/fm.brianleejackson","article_published_time":"2019-01-07T10:00:34+00:00","article_modified_time":"2023-07-27T10:03:50+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/wie-optimiert-bilder-fur-web.png","type":"image\/png"}],"author":"Brian Jackson","twitter_card":"summary_large_image","twitter_description":"Bilder sind oft das #1 Element f\u00fcr langsame Ladezeiten. Erfahren Sie, wie Sie Bilder f\u00fcr das Internet und die Leistung auf Ihrer WordPress-Site optimieren.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/wie-optimiert-bilder-fur-web.png","twitter_creator":"@brianleejackson","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Brian Jackson","Gesch\u00e4tzte Lesezeit":"21\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/"},"author":{"name":"Brian Jackson","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7"},"headline":"Wie man Bilder f\u00fcr Web und Performance optimiert","datePublished":"2019-01-07T10:00:34+00:00","dateModified":"2023-07-27T10:03:50+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/"},"wordCount":4089,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/how-to-optimize-images-for-web-and-performance.jpeg","keywords":["webperf","WordPress"],"articleSection":["WordPress Leistungstutorials"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/","url":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/","name":"Wie man Bilder f\u00fcr Web und Performance optimiert (2026)","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/how-to-optimize-images-for-web-and-performance.jpeg","datePublished":"2019-01-07T10:00:34+00:00","dateModified":"2023-07-27T10:03:50+00:00","description":"Bilder sind oft das #1 Element f\u00fcr langsame Ladezeiten. Erfahren Sie, wie Sie Bilder f\u00fcr das Internet und die Leistung auf Ihrer WordPress-Site optimieren.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/how-to-optimize-images-for-web-and-performance.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2019\/01\/how-to-optimize-images-for-web-and-performance.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Bild-Optimierung","item":"https:\/\/kinsta.com\/de\/thema\/bild-optimierung\/"},{"@type":"ListItem","position":3,"name":"Wie man Bilder f\u00fcr Web und Performance optimiert"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7","name":"Brian Jackson","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","caption":"Brian Jackson"},"description":"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.","sameAs":["https:\/\/www.facebook.com\/fm.brianleejackson","https:\/\/www.linkedin.com\/in\/brianleejackson","https:\/\/x.com\/brianleejackson"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/brianjackson\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/21870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=21870"}],"version-history":[{"count":18,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/21870\/revisions"}],"predecessor-version":[{"id":60201,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/21870\/revisions\/60201"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/translations\/it"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/translations\/fr"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/translations\/se"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/translations\/dk"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/21870\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/58021"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=21870"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=21870"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=21870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}