{"id":24157,"date":"2024-01-07T12:45:44","date_gmt":"2024-01-07T12:45:44","guid":{"rendered":"https:\/\/yorkshiredesign.co.uk\/?page_id=24157"},"modified":"2025-04-17T12:01:12","modified_gmt":"2025-04-17T11:01:12","slug":"bildoptimierung","status":"publish","type":"page","link":"https:\/\/yorkshiredesign.co.uk\/de\/pagespeed-leitfaden\/bildoptimierung\/","title":{"rendered":"Bildoptimierung"},"content":{"rendered":"
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Bild Optimierung<\/span><\/h1>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>
\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Quetschen<\/span> Diese KBs<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Webdesign-<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

Bildoptimierung macht Ihre Website schlanker<\/p>\n

Weniger Gewicht, mehr Geschwindigkeit<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n Gehen Sie zu Imagify<\/span>\n \t

\n\t \t\n\t \t\t\n\t \t\t\tGehen Sie zu Imagify\t\t\t\t<\/span>\t\n\t \t<\/span>\n\t \t\t \t
<\/div>\n\t <\/div>\n\t<\/a> <\/div>\n <\/div>\n<\/div>
\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Was ist Bild<\/span> Optimierung?<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

Die Bildoptimierung ist ein sehr einfacher Prozess. Es ist auch das Einzige, was Ihre Website am meisten beschleunigt \u2013 insbesondere, wenn Sie eine Website mit vielen Bildern haben. Im Wesentlichen bedeutet die Optimierung eines Bildes einfach, die Dateigr\u00f6\u00dfe zu verkleinern. Die Technologie entwickelt sich st\u00e4ndig weiter und heutzutage sind WEBP und AVIF die besten Bildformate. Beide Formate werden von modernen Browsern vollst\u00e4ndig unterst\u00fctzt und detaillierte Informationen zum technischen Aspekt dieser Bildkomprimierungstechniken finden Sie unter Dieser Webentwickler<\/strong><\/a> Seite.<\/p>\n

Aufgrund der Qualit\u00e4t moderner Kameras und verf\u00fcgbarer Archivbilder k\u00f6nnen die Bilddateien sehr gro\u00df sein \u2013 manche sogar 5-10 MB oder mehr. Bilder dieser Gr\u00f6\u00dfe k\u00f6nnen einfach nicht auf Websites verwendet werden, da das Herunterladen viel zu lange dauert und Sie erreichen Pagespeed-Scores<\/a> schlecht. Was Sie tun m\u00fcssen, ist, sie zu verkleinern. Hier kommt Bildoptimierungssoftware ins Spiel.<\/p>\n

Die Bildoptimierung kann auf zwei Arten erfolgen \u2013 entweder manuell oder mit Software. Die manuelle Methode eignet sich hervorragend, wenn Sie eine erstellen neue Website<\/a>, aber f\u00fcr bestehende Websites, die oft Hunderte oder mehr Bilder enthalten, ist es weitaus zeiteffizienter, sich f\u00fcr eine Bildoptimierungssoftware zu entscheiden. Es gibt eine ganze Reihe von Bildoptimierungs-Plugins, aber dasjenige, das ich am meisten empfehle, ist Stellen Sie sich vor<\/strong><\/a>. Es ist f\u00fcr bis zu 200 Bilder pro Monat kostenlos, unterst\u00fctzt WEBP und funktioniert meiner Erfahrung nach mit allen Arten von Websites.<\/p>\n

Wie zuvor werde ich ein gutes Video mit einem \u00dcberblick \u00fcber die Hauptfunktionen bereitstellen und dabei Tipps und Dinge aufschreiben, auf die man achten sollte.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Quetschen<\/span> Diese KBs<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Webdesign-<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

Bildoptimierung macht Ihre Website schlanker<\/p>\n

Weniger Gewicht, mehr Geschwindigkeit<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n Gehen Sie zu Imagify<\/span>\n \t

\n\t \t\n\t \t\t\n\t \t\t\tGehen Sie zu Imagify\t\t\t\t<\/span>\t\n\t \t<\/span>\n\t \t\t \t
<\/div>\n\t <\/div>\n\t<\/a>\n\t
\n\t\t
\n\t\t\t

Was ist Bild<\/span> Optimierung?<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

Die Bildoptimierung ist ein sehr einfacher Prozess. Es ist auch das Einzige, was Ihre Website am meisten beschleunigt \u2013 insbesondere, wenn Sie eine Website mit vielen Bildern haben. Im Wesentlichen bedeutet die Optimierung eines Bildes einfach, die Dateigr\u00f6\u00dfe zu verkleinern. Die Technologie entwickelt sich st\u00e4ndig weiter und heutzutage sind WEBP und AVIF die besten Bildformate. Beide Formate werden von modernen Browsern vollst\u00e4ndig unterst\u00fctzt und detaillierte Informationen zum technischen Aspekt dieser Bildkomprimierungstechniken finden Sie unter Dieser Webentwickler<\/strong><\/a> Seite.<\/p>\n

Aufgrund der Qualit\u00e4t moderner Kameras und verf\u00fcgbarer Archivbilder k\u00f6nnen die Bilddateien sehr gro\u00df sein \u2013 manche sogar 5-10 MB oder mehr. Bilder dieser Gr\u00f6\u00dfe k\u00f6nnen einfach nicht auf Websites verwendet werden, da das Herunterladen viel zu lange dauert und sich negativ auf Ihren Pagespeed-Score auswirkt. Was Sie tun m\u00fcssen, ist, sie zu verkleinern. Hier kommt Bildoptimierungssoftware ins Spiel.<\/p>\n

Die Bildoptimierung kann auf zwei Arten erfolgen \u2013 entweder manuell oder mit Software. Die manuelle Methode eignet sich hervorragend, wenn Sie eine neue Website erstellen. Bei bestehenden Websites mit h\u00e4ufig Hunderten oder mehr Bildern ist der Einsatz einer Bildoptimierungssoftware jedoch weitaus zeiteffizienter. Es gibt eine ganze Reihe von Bildoptimierungs-Plugins, aber dasjenige, das ich am meisten empfehle, ist Stellen Sie sich vor<\/strong><\/a>. Es ist f\u00fcr bis zu 200 Bilder pro Monat kostenlos, unterst\u00fctzt WEBP und funktioniert meiner Erfahrung nach mit allen Arten von Websites.<\/p>\n

Wie zuvor werde ich ein gutes Video mit einem \u00dcberblick \u00fcber die Hauptfunktionen bereitstellen und dabei Tipps und Dinge aufschreiben, auf die man achten sollte.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Was ist Bild<\/span> Optimierung?<\/h1>\n\n\t\t<\/div>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

Die Bildoptimierung ist ein einfacher Prozess. Es ist auch das Einzige, was Ihre Website am meisten beschleunigt \u2013 insbesondere, wenn Sie eine Website mit vielen Bildern haben. Im Wesentlichen bedeutet die Optimierung eines Bildes einfach, die Dateigr\u00f6\u00dfe zu verkleinern.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Webdesign-<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

Die Technologie entwickelt sich st\u00e4ndig weiter und heutzutage sind WEBP und AVIF die besten Bildformate.<\/p>\n

Beide Formate werden von modernen Browsern vollst\u00e4ndig unterst\u00fctzt und detaillierte Informationen zum technischen Aspekt dieser Bildkomprimierungstechniken finden Sie unter Dieser Webentwickler<\/strong><\/a> Seite.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

Aufgrund der Qualit\u00e4t moderner Kameras und verf\u00fcgbarer Archivbilder k\u00f6nnen die Bilddateien sehr gro\u00df sein \u2013 manche sogar 5-10 MB oder mehr. Bilder dieser Gr\u00f6\u00dfe k\u00f6nnen einfach nicht auf Websites verwendet werden, da das Herunterladen viel zu lange dauert und sich negativ auf Ihren Pagespeed-Score auswirkt. Was Sie tun m\u00fcssen, ist, sie zu verkleinern. Hier kommt Bildoptimierungssoftware ins Spiel.<\/p>\n

Die Bildoptimierung kann auf zwei Arten erfolgen \u2013 entweder manuell oder mit Software. Die manuelle Methode eignet sich hervorragend, wenn Sie eine neue Website erstellen. Bei bestehenden Websites mit h\u00e4ufig Hunderten oder mehr Bildern ist der Einsatz einer Bildoptimierungssoftware jedoch weitaus zeiteffizienter.<\/p>\n

Es gibt eine ganze Reihe von Bildoptimierungs-Plugins, aber dasjenige, das ich am meisten empfehle, ist Stellen Sie sich vor<\/strong><\/a>. Es ist f\u00fcr bis zu 200 Bilder pro Monat kostenlos, unterst\u00fctzt WEBP und funktioniert meiner Erfahrung nach mit allen Arten von Websites.<\/p>\n

Wie zuvor werde ich ein gutes Video mit einem \u00dcberblick \u00fcber die Hauptfunktionen bereitstellen und dabei Tipps und Dinge aufschreiben, auf die man achten sollte.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>

<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Wie benutzt man Stellen Sie sich vor<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Wie man Optimieren<\/span> Ihre Bilder<\/h2>\n\n\t\t<\/div>\n\t<\/div>\n
\n
\n

\n \n <\/span>\n <\/span>\n <\/span>\n Eine Sache mit dem Branding<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Imagify bietet drei Optimierungsstufen: Standard, Aggressiv und Ultra. Bei diesen Ebenen geht es im Wesentlichen um die Bildqualit\u00e4t. Einer der Nachteile bei der Bildoptimierung besteht darin, dass Sie an Bildqualit\u00e4t verlieren. Es ist nur klein und normalerweise nicht wahrnehmbar, kann aber auffallen, wenn Ihnen eine ultrahohe Bildqualit\u00e4t wichtig ist. Dies ist h\u00e4ufig auf Websites wie Fotografie-, Kunst- oder Schmuckseiten usw. der Fall.<\/p>\n

Macht es Degradieren<\/span> Bilder Viel?<\/p>\n

Vieles h\u00e4ngt von der Art der Bilder ab, die Sie verwenden. Beispielsweise werden sie bei der Standardqualit\u00e4t \u00fcberhaupt nicht beeintr\u00e4chtigt, w\u00e4hrend sie bei der Ultra-Qualit\u00e4t etwas verpixelt werden, aber nicht zu stark. Diese Website ist als Beispiel auf die Qualit\u00e4t \u201eaggressiv\u201c eingestellt. Der Vorteil besteht darin, dass die Bilder viel kleiner als bei der Standardeinstellung sind und daher schneller geladen werden, ohne dass es zu einem Verlust der Bildqualit\u00e4t kommt.<\/p>\n

Manche Leute entscheiden sich direkt f\u00fcr die Ultra-Einstellung und merken den Unterschied wirklich. Wenn Sie mit der Optimierung beginnen, Stellen Sie sicher, dass Sie das K\u00e4stchen ankreuzen, um die Originale aufzubewahren<\/strong>. Wenn Ihnen die Ultra-Einstellung nicht gef\u00e4llt, k\u00f6nnen Sie auf diese Weise auf eine h\u00f6here Qualit\u00e4t zur\u00fcckgreifen.<\/p>\n

Im Allgemeinen verschlechtert die aggressive Einstellung die Qualit\u00e4t Ihrer Bilder um etwa 15% auf ein Niveau von 85%. Dies ist f\u00fcr das menschliche Auge nicht wahrnehmbar und die h\u00e4ufigste Einstellung. Wenn die Bildqualit\u00e4t nicht entscheidend ist oder Sie Grafiken im Cartoon-Stil anstelle von Fotos verwenden, entscheiden Sie sich f\u00fcr Ultra. Es ist immer noch v\u00f6llig akzeptabel. Normalerweise reduzieren Sie mit einer Ultra-Einstellung die Bildgr\u00f6\u00dfe um etwa 851 TP3T. Das bedeutet, dass ein 1-MB-Bild nur noch 100 bis 150 Pfund gro\u00df ist, was einen enormen Unterschied macht Seitenladezeit und Seitengeschwindigkeit<\/a> Partituren.<\/p>\n

Kann ich Alles machen<\/span> Meine Bilder auf einmal?<\/p>\n

Ja, das k\u00f6nnen Sie \u2013 sehen Sie sich das Video an, um eine Anleitung zur Funktionsweise von Imagify zu erhalten. A Der beste Tipp ist, auch Ihr Thema einzubeziehen<\/a> Ordner in den Optimierungen. Ihr Theme wird viele Bilder enthalten, von denen einige auf Ihrer Website verwendet werden. Indem Sie Ihre Themenbilder einf\u00fcgen, k\u00f6nnen Sie die Anzahl der Bilder, die Sie auf Ihrer Website optimieren k\u00f6nnen, maximieren.<\/p>\n

Um abzusch\u00e4tzen, wie viele Bilder Sie optimieren m\u00fcssen, schauen Sie in Ihrer Medienbibliothek nach. Hier erfahren Sie, wie viele Bilder Sie haben. Dann multiplizieren Sie dies mit 4 (im Durchschnitt). Dies liegt daran, dass WordPress mehrere Versionen Ihrer Bilder f\u00fcr responsives Design erstellt (Miniaturansicht, 300 x 300 Pixel usw.). Du brauchst Optimieren Sie jede Version jedes Bildes<\/a> um alle Vorteile der Bildoptimierung auf allen Ger\u00e4ten nutzen zu k\u00f6nnen.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Manuelle Optimierung<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Die manuelle Bildoptimierung ist wirklich etwas f\u00fcr Puristen. Ein Vorteil davon ist, dass Sie ein vollst\u00e4ndig optimiertes Bild in der richtigen Gr\u00f6\u00dfe hochladen und daher \u00fcberhaupt keine Bildoptimierungssoftware ausf\u00fchren m\u00fcssen. Au\u00dferdem sparen Sie Platz auf dem Server, da dort keine Bilder in voller Gr\u00f6\u00dfe vorhanden sind. Allerdings ist es ziemlich zeitintensiv, daher w\u00fcrde ich den meisten Leuten empfehlen, einfach Imagify zu verwenden.<\/p>\n

Ich habe Die Zeit<\/span> \u2013 Was ist dabei?<\/p>\n

Zun\u00e4chst m\u00fcssen Sie die Bildabmessungen kennen, die Sie verwenden. Dazu gibt es eine gute Anleitung Bildgr\u00f6\u00dfen und Best Practices<\/strong><\/a> auf dieser Seite. Sobald Sie Ihre Bildgr\u00f6\u00dfen kennen, k\u00f6nnen Sie gro\u00dfe Bilder mit jedem Bildsoftware-Tool auf die exakte Gr\u00f6\u00dfe zuschneiden. Paint.net<\/strong><\/a> ist kostenlos und normalerweise gut genug daf\u00fcr.<\/p>\n

Nachdem Sie Ihre Bilder in der richtigen Gr\u00f6\u00dfe erstellt haben, k\u00f6nnen Sie diese mit einem Online-Tool optimieren. Eines der besten, das es seit Jahren gibt, ist TinyPNG.com<\/strong><\/a>. Sie laden einfach Ihre Bilder hoch und laden dann die viel kleinere Version herunter, die erstellt wird. Zwei Tipps zum Hochladen dieser Bilder auf WordPress:<\/p>\n

Zun\u00e4chst einmal klingt es albern, aber stellen Sie sicher, dass Sie die neu optimierte Version aus dem Ordner \u201eDownloads\u201c auf Ihre Website hochladen. Es ist so einfach, das falsche Bild von Ihrem Desktop oder wo auch immer Sie Ihre Bilder speichern, hochzuladen. Zweitens verwenden Sie einen etwas anderen Namen f\u00fcr den neuen Bildtitel. Das liegt am Caching. Ihre WordPress-Installation erkennt die neue Bildgr\u00f6\u00dfe m\u00f6glicherweise l\u00e4ngere Zeit nicht, wenn Sie das Bild mit demselben Dateinamen hochladen.<\/p>\n

Nachdem Sie dies getan haben, k\u00f6nnen Sie noch einen Schritt weiter gehen und die neu optimierten Bilder in das WEBP-Format konvertieren. Tun Sie dies, bevor Sie sie hochladen. Gehe zum CloudConvert<\/strong><\/a> Webseite. Es folgt genau dem gleichen Prozess wie TinyPNG, au\u00dfer dass Sie sich f\u00fcr die Konvertierung in WEBP entscheiden. Laden Sie dann die Dateien herunter und laden Sie sie auf Ihren Server hoch.<\/p>\n

Die Verwendung von Software wie Imagify ist viel einfacher, aber am Ende haben Sie optimierte Rohbilder hochgeladen, sodass Sie keine Bildkonvertierungstools verwenden oder st\u00e4ndig WEBP-Konvertierungen ausf\u00fchren m\u00fcssen.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Sollte ich WEBP verwenden?<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

WEBP ist ein neueres Bildformat, das von Google entwickelt wurde. Die Bilder sind viel kleiner als herk\u00f6mmliche JPG- und PNG-Formate. Sie sollten sie also verwenden \u2013 vorausgesetzt, Ihr Server unterst\u00fctzt die Konvertierung herk\u00f6mmlicher Bilder in WEBP.<\/p>\n

WEBP entstand tats\u00e4chlich im Jahr 2010, wird aber dennoch immer noch als \u201eaufstrebendes\u201c Format angesehen. M\u00f6glicherweise lesen Sie, dass Sie neben den WEBP-Formaten auch die Original-JPG-\/PNG-Bilder als Ersatz ben\u00f6tigen, aber die Wahrheit ist, dass Chrome, Firefox, Safari und alle anderen gro\u00dfen Browser dies unterst\u00fctzen, sodass es jetzt in Ordnung ist, nur WEBP-Versionen zu haben.<\/p>\n

Funktioniert mein Server Unterst\u00fctzung<\/span> Ihnen?<\/p>\n

Imagify verf\u00fcgt \u00fcber eine automatische Einstellung, um es auf Ihrem Server zu aktivieren. Die meisten Bildoptimierer, die in WEBP konvertieren, tun dies. Es pr\u00fcft und teilt Ihnen mit, ob Ihr Server keine WEBP-Bilder bereitstellt. Grunds\u00e4tzlich muss WordPress Ihre Bilddateien auf eine von zwei Arten neu schreiben, damit es funktioniert. Einige Server erlauben es, andere nicht:<\/p>\n

Der beste Weg ist \u00fcber Bild-Tags. Dies ist ein HTML5-Befehl, der das ersetzen wird Teil zu a Etikett. Es ist ziemlich einfach, aber nicht alle Server unterst\u00fctzen es. Die zweite M\u00f6glichkeit besteht darin, die Dateien \u00fcber die .htaccess-Datei neu zu schreiben. Dies ist nicht die bevorzugte Vorgehensweise, da dadurch die Serveranforderungen beim Laden der Seite erh\u00f6ht werden. Es ist jedoch immer noch von Vorteil, WEBP zu verwenden, wenn Sie dies auf diese Weise tun m\u00fcssen.<\/picture>\n

Kinsta ist NGINX und ist bereits f\u00fcr WEBP eingerichtet, falls Sie ein nicht kompatibles Server-Setup haben.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Wie lange dauert es?<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Imagify ist ein automatisierter Prozess, der sehr schnell ist. Die ben\u00f6tigte Zeit h\u00e4ngt wirklich von den Bildgr\u00f6\u00dfen ab, die Sie verwenden. Die Optimierung eines normalen Bildes mit weniger als 1 MB dauert einige Sekunden.<\/p>\n

Denken Sie daran, die Anzahl der in Ihrer Medienbibliothek angezeigten Bilder mit 4 zu multiplizieren, damit alle Responsive-Gr\u00f6\u00dfen optimiert werden k\u00f6nnen. Angenommen, Sie haben 100 Bilder, 400 werden optimiert. Multiplizieren Sie das mit einem Durchschnitt von jeweils etwa 5 Sekunden und Sie bekommen die Idee. Die Fertigstellung wird etwas mehr als eine halbe Stunde dauern.<\/p>\n

Gr\u00f6\u00dfere Bilder k\u00f6nnen l\u00e4nger dauern und die Fertigstellung von Gesch\u00e4ften kann sehr lange dauern. Wenn Sie beispielsweise \u00fcber 10.000 Bilder in der Medienbibliothek verf\u00fcgen, m\u00fcssen Sie 40.000 responsive Bilder optimieren. Multiplizieren Sie das jeweils mit 5 Sekunden und Sie haben 2\/3 Tage Zeit, um Ihre Bilder zu optimieren.<\/p>\n

Allerdings verf\u00fcgt eine durchschnittliche Website nicht ann\u00e4hernd \u00fcber diese Menge an Bildern, sodass der Vorgang innerhalb einer Stunde oder so abgeschlossen sein sollte.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

Imagify \u2013 Sehen Sie sich das Video an<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t\n\t\t\t