{"id":83299,"date":"2022-09-09T04:05:11","date_gmt":"2022-09-09T02:05:11","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/optimizar-imagenes-con-thumbor\/"},"modified":"2020-09-16T20:50:05","modified_gmt":"2020-09-16T23:50:05","slug":"optimizar-imagenes-con-thumbor","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/","title":{"rendered":"Optimieren Sie Bilder mit Thumbor"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Requisitos-previos\" >Bisherige Anforderungen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Formato-de-URL-en-miniatura\" >Miniaturbild-URL-Format<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Origen\" >Quelle<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Clave-de-seguridad\" >Sicherheitsschl\u00fcssel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Talla\" >Gr\u00f6\u00dfe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Filtros\" >Filter<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Transformando-imagenes\" >Bilder transformieren<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Compresion\" >Kompression<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Cambiar-el-tamano\" >Gr\u00f6\u00dfe \u00e4ndern<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Formatos-de-archivo\" >Dateiformate<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Proximos-pasos\" >N\u00e4chste Schritte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/optimizar-imagenes-con-thumbor\/#Apendice-thumborconf\" >Anhang: thumbor.conf<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Thumbor kann kostenlos verwendet werden, um die Gr\u00f6\u00dfe von Bildern bei Bedarf zu \u00e4ndern, zu komprimieren und zu transformieren.\n        <\/p>\n<p>\n          <time>23. September 2019<\/time><\/p>\n<\/header>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/thumbor.org\/\">Thumbor<\/a> ist ein kostenloses Open-Source-Imaging-CDN, mit dem Bilder einfach komprimiert, in der Gr\u00f6\u00dfe ge\u00e4ndert und transformiert werden k\u00f6nnen. In diesem Beitrag k\u00f6nnen Sie Thumbor aus erster Hand ausprobieren, ohne etwas zu installieren. Wir haben einen Thumbor-Sandbox-Server zum Testen eingerichtet <code>http:\/\/34.67.235.246:8888<\/code>. Das Bild, mit dem Sie experimentieren m\u00f6chten, ist unter http:\/\/34.67.235.246:8888\/unsafe\/https:\/\/web.dev\/backdrop-filter\/hero.jpg verf\u00fcgbar.<\/p>\n<h2 id=\"prequisites\"><span class=\"ez-toc-section\" id=\"Requisitos-previos\"><\/span>Bisherige Anforderungen <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In diesem Beitrag wird davon ausgegangen, dass Sie verstehen, wie Image-CDNs Ihre Upload-Leistung verbessern k\u00f6nnen. Andernfalls lesen Sie Bild-CDNs zum Optimieren von Bildern verwenden. Es wird auch davon ausgegangen, dass Sie zuvor grundlegende Websites erstellt haben.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Wenn Sie Thumbor auf Ihrem eigenen Server installieren und dann diesem Beitrag folgen m\u00f6chten, lesen Sie So installieren Sie Thumbor CDN Image. Wann immer du siehst <code>http:\/\/34.67.235.246:8888<\/code> In diesem Beitrag m\u00fcssen Sie diesen Ursprung durch den Ursprung Ihrer Thumbor-Instanz ersetzen.<\/p>\n<\/div>\n<h2 id=\"thumbor-url-format\"><span class=\"ez-toc-section\" id=\"Formato-de-URL-en-miniatura\"><\/span>Miniaturbild-URL-Format <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wie unter Verwenden von Bild-CDNs zur Optimierung von Bildern erw\u00e4hnt, verwendet jedes Bild-CDN ein etwas anderes URL-Format f\u00fcr Bilder. Abbildung 1 zeigt das Thumbor-Format.<\/p>\n<figure class=\"w-figure\">\n  <img alt='use-thumbor0-5292656' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor0-5292656.jpg' class=\"w-screenshot\"><figcaption>Thumbor-URL-Format<\/figcaption><\/figure>\n<h3 id=\"origin\"><span class=\"ez-toc-section\" id=\"Origen\"><\/span>Quelle <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wie alles <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/origin.html#concept-origin\">Herkunft<\/a>Der Ursprung einer URL Thumbor besteht aus drei Teilen: a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Uniform_Resource_Identifier#Definition\">planen<\/a> (was fast immer ist <code>http<\/code> oder <code>https<\/code>), ein Host und ein Port. In diesem Beispiel wird der Host durch eine IP-Adresse identifiziert. Wenn Sie jedoch einen DNS-Server verwenden, sieht dies m\u00f6glicherweise so aus <code>thumbor-server.my-site.com<\/code>. Standardm\u00e4\u00dfig verwendet Thumbor den Port <code>8888<\/code> Bilder zu dienen.<\/p>\n<h3 id=\"security-key\"><span class=\"ez-toc-section\" id=\"Clave-de-seguridad\"><\/span>Sicherheitsschl\u00fcssel <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>das <code>unsicher<\/code> Ein Teil der URL gibt an, dass Sie Thumbor ohne Sicherheitsschl\u00fcssel verwenden. Ein Sicherheitsschl\u00fcssel verhindert, dass ein Benutzer nicht autorisierte \u00c4nderungen an seinen Bild-URLs vornimmt. Durch \u00c4ndern der Bild-URL kann ein Benutzer Ihren Server (und Ihre Hosting-Rechnung) verwenden, um die Gr\u00f6\u00dfe seiner Bilder zu \u00e4ndern oder, b\u00f6swilliger, Ihren Server zu \u00fcberlasten. Diese Anleitung behandelt nicht die Einrichtung <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/thumbor\/thumbor\/wiki\/security\">Thumbor-Sicherheitsschl\u00fcsselfunktion<\/a>.<\/p>\n<h3 id=\"size\"><span class=\"ez-toc-section\" id=\"Talla\"><\/span>Gr\u00f6\u00dfe <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Dieser Teil der URL gibt die gew\u00fcnschte Gr\u00f6\u00dfe des Ausgabebildes an. Dies kann weggelassen werden, wenn Sie die Bildgr\u00f6\u00dfe nicht \u00e4ndern m\u00f6chten. Thumbor verwendet verschiedene Ans\u00e4tze wie Zuschneiden oder Skalieren, um die gew\u00fcnschte Gr\u00f6\u00dfe basierend auf den anderen URL-Parametern zu erreichen. Im n\u00e4chsten Abschnitt dieses Beitrags wird die Gr\u00f6\u00dfen\u00e4nderung von Bildern ausf\u00fchrlicher erl\u00e4utert.<\/p>\n<p>Versuchen Sie es jetzt:<\/p>\n<ol>\n<li>\n<p>Klicken Sie auf die folgende URL, um das Bild in seiner urspr\u00fcnglichen Gr\u00f6\u00dfe in einem neuen Tab anzuzeigen: http:\/\/34.67.235.246:8888\/unsafe\/https:\/\/web.dev\/backdrop-filter\/hero.jpg<\/p>\n<figure class=\"w-figure\">\n   <img alt='use-thumbor1-9279708' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor1-9279708.jpg' class=\"w-screenshot\"><figcaption>Original Bild<\/figcaption><\/figure>\n<\/li>\n<li>\n<p>\u00c4ndern Sie die Gr\u00f6\u00dfe des Bildes auf 100 \u00d7 100 Pixel: http:\/\/34.67.235.246:8888\/unsafe\/100damientos100\/https:\/\/web.dev\/backdrop-filter\/hero.jpg<\/p>\n<\/li>\n<\/ol>\n<figure class=\"w-figure\">\n  <img alt='use-thumbor2-7668204' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor2-7668204.jpg' class=\"w-screenshot\"><figcaption>Bildgr\u00f6\u00dfe auf 100 \u00d7 100 Pixel ge\u00e4ndert<\/figcaption><\/figure>\n<h3 id=\"filters\"><span class=\"ez-toc-section\" id=\"Filtros\"><\/span>Filter <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Filter transformieren ein Bild. Der Filterteil des URL-Segments beginnt mit <code>Filter:<\/code> gefolgt von einer Liste von Filtern, die durch Doppelpunkte getrennt sind; Dies kann weggelassen werden, wenn Sie keine Filter verwenden. Die Syntax f\u00fcr einzelne Filter \u00e4hnelt beispielsweise einem Funktionsaufruf <code>Graustufen ()<\/code>), die null oder mehr Argumente enth\u00e4lt.<\/p>\n<p>Versuchen Sie es jetzt:<\/p>\n<ol>\n<li>\n<p>Wenden Sie einen einzelnen Filter an: einen Gau\u00dfschen <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thumbor.readthedocs.io\/en\/latest\/blur.html\">verwischen<\/a> Effekt mit einem Radius von 25 Pixel: http:\/\/34.67.235.246:8888\/unsafe\/filters:blur(25)\/https:\/\/web.dev\/backdrop-filter\/hero.jpg<\/p>\n<figure class=\"w-figure\">\n   <img alt='use-thumbor3-6838206' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor3-6838206.jpg' class=\"w-screenshot\"><figcaption>Verschwommenes Bild<\/figcaption><\/figure>\n<\/li>\n<li>\n<p>Wenden Sie mehrere Filter an. Konvertieren zu <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thumbor.readthedocs.io\/en\/latest\/grayscale.html\">Graustufen<\/a> y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thumbor.readthedocs.io\/en\/latest\/rotate.html\">drehen<\/a> das Bild um 90 Grad: http:\/\/34.67.235.246:8888\/unsafe\/filters:grayscale():blur(90)\/https:\/\/web.dev\/backdrop-filter\/hero.jpg<\/p>\n<\/li>\n<\/ol>\n<figure class=\"w-figure\">\n  <img alt='use-thumbor4-7302444' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor4-7302444.jpg' class=\"w-screenshot\"><figcaption>Graustufen, gedrehtes Bild<\/figcaption><\/figure>\n<h2 id=\"transforming-images\"><span class=\"ez-toc-section\" id=\"Transformando-imagenes\"><\/span>Bilder transformieren <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dieser Abschnitt konzentriert sich auf die Funktionen von Thumbor, die f\u00fcr die Leistung am relevantesten sind: Komprimieren, \u00c4ndern der Gr\u00f6\u00dfe und Konvertieren zwischen Dateiformaten.<\/p>\n<h3 id=\"compression\"><span class=\"ez-toc-section\" id=\"Compresion\"><\/span>Kompression <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>das <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thumbor.readthedocs.io\/en\/latest\/quality.html\">Qualit\u00e4t<\/a> Der Filter komprimiert JPEG-Bilder auf die gew\u00fcnschte Bildqualit\u00e4tsstufe (1-100). Wenn keine Qualit\u00e4tsstufe angegeben ist, komprimiert Thumbor das Bild auf eine Qualit\u00e4tsstufe von 80. Dies ist eine gute Standardeinstellung: Die Qualit\u00e4tsstufen 80-85 haben normalerweise nur geringe Auswirkungen auf die Bildqualit\u00e4t, reduzieren jedoch normalerweise die Bildgr\u00f6\u00dfe um 30-40%.<\/p>\n<p>Versuchen Sie es jetzt:<\/p>\n<ol>\n<li>\n<p>Komprimieren Sie das Bild auf eine Qualit\u00e4t von 1 (sehr schlecht): http:\/\/34.67.235.246:8888\/unsafe\/filters:quality(1)\/https:\/\/web.dev\/backdrop-filter\/hero.jpg<\/p>\n<figure class=\"w-figure\">\n   <img alt='use-thumbor5-8750607' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor5-8750607.jpg' class=\"w-screenshot\"><figcaption>Schlechte Bildqualit\u00e4t<\/figcaption><\/figure>\n<\/li>\n<li>\n<p>Komprimieren Sie das Bild mit den Standardkomprimierungseinstellungen von Thumbor: http:\/\/34.67.235.246:8888\/unsafe\/filters:quality()\/https:\/\/web.dev\/backdrop-filter\/hero.jpg<\/p>\n<\/li>\n<\/ol>\n<figure class=\"w-figure\">\n  <img alt='use-thumbor6-7488573' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor6-7488573.jpg' class=\"w-screenshot\"><figcaption>Komprimiertes Bild<\/figcaption><\/figure>\n<h3 id=\"resizing\"><span class=\"ez-toc-section\" id=\"Cambiar-el-tamano\"><\/span>Gr\u00f6\u00dfe \u00e4ndern <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Verwenden Sie das Format, um die Gr\u00f6\u00dfe eines Bildes unter Beibehaltung des urspr\u00fcnglichen Seitenverh\u00e4ltnisses zu \u00e4ndern <code>$WIDTHx0<\/code> oder <code>0x$HEIGHT<\/code> innerhalb <code>Gr\u00f6\u00dfe<\/code> Teil der URL-Zeichenfolge.<\/p>\n<p>Versuchen Sie es jetzt:<\/p>\n<ol>\n<li>\n<p>\u00c4ndern Sie die Gr\u00f6\u00dfe des Bilds auf eine Breite von 200 Pixel, wobei Sie das urspr\u00fcngliche Seitenverh\u00e4ltnis beibehalten: http:\/\/34.67.235.246:8888\/unsafe\/200damientos0\/https:\/\/web.dev\/backdrop-filter\/hero.jpg<\/p>\n<p> <!-- lint disable code-block-style --><\/p>\n<figure class=\"w-figure\">\n   <img alt='use-thumbor7-8111926' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor7-8111926.jpg' class=\"w-screenshot\"><figcaption>Die Bildgr\u00f6\u00dfe wurde auf eine Breite von 200 Pixel ge\u00e4ndert<\/figcaption><\/figure>\n<\/li>\n<li>\n<p>\u00c4ndern Sie die Gr\u00f6\u00dfe des Bilds auf eine H\u00f6he von 500 Pixel, wobei Sie das urspr\u00fcngliche Seitenverh\u00e4ltnis beibehalten: http:\/\/34.67.235.246:8888\/unsafe\/0x500\/https:\/\/web.dev\/backdrop-filter\/hero.jpg<\/p>\n<\/li>\n<\/ol>\n<figure class=\"w-figure\">\n  <img alt='use-thumbor8-1110217' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor8-1110217.jpg' class=\"w-screenshot\"><figcaption>Die Bildgr\u00f6\u00dfe wurde auf eine H\u00f6he von 500 Pixel ge\u00e4ndert<figcaption>\n<\/figcaption><\/figcaption><\/figure>\n<p>Sie k\u00f6nnen die Gr\u00f6\u00dfe von Bildern auch mit dem auf einen Prozentsatz des Originals \u00e4ndern <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thumbor.readthedocs.io\/en\/latest\/proportion.html\">Anteil<\/a> Filter. Wenn Sie die Gr\u00f6\u00dfe in Verbindung mit dem Seitenverh\u00e4ltnisfilter angeben, wird die Bildgr\u00f6\u00dfe ge\u00e4ndert, und anschlie\u00dfend wird das Seitenverh\u00e4ltnisfilter angewendet.<\/p>\n<p>Versuchen Sie es jetzt:<\/p>\n<ol>\n<li>\n<p>\u00c4ndern Sie die Gr\u00f6\u00dfe des Bildes vom Original auf 50%: http:\/\/34.67.235.246:8888\/unsafe\/filters:proportion(.5)\/https:\/\/web.dev\/backdrop-filter\/hero.jpg<\/p>\n<figure class=\"w-figure\">\n   <img alt='use-thumbor9-7898390' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor9-7898390.jpg' class=\"w-screenshot\"><figcaption>Bildgr\u00f6\u00dfe ge\u00e4ndert auf 50% der Originalgr\u00f6\u00dfe<\/figcaption><\/figure>\n<\/li>\n<li>\n<p>\u00c4ndern Sie die Gr\u00f6\u00dfe des Bilds auf 1000 Pixel Breite und \u00e4ndern Sie dann die Gr\u00f6\u00dfe des Bilds von der aktuellen Gr\u00f6\u00dfe auf 10%: http:\/\/34.67.235.246:8888\/unsafe\/1000x\/filters:proportion(.1)\/https: \/\/ Web. dev \/ backdrop-filter \/ hero.jpg<\/p>\n<\/li>\n<\/ol>\n<figure class=\"w-figure\">\n  <img alt='use-thumbor10-9271832' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor10-9271832.jpg' class=\"w-screenshot\"><figcaption>Die Bildgr\u00f6\u00dfe wurde auf eine Breite von 100 Pixel ge\u00e4ndert<\/figcaption><\/figure>\n<p>Diese Methoden sind nur einige der vielen Optionen von Thumbor zum Zuschneiden und \u00c4ndern der Gr\u00f6\u00dfe. Weitere Informationen zu anderen Optionen finden Sie unter <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/thumbor\/thumbor\/wiki\/Usage\">Benutzen<\/a>.<\/p>\n<h3 id=\"file-formats\"><span class=\"ez-toc-section\" id=\"Formatos-de-archivo\"><\/span>Dateiformate <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>das <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thumbor.readthedocs.io\/en\/latest\/format.html\">Format<\/a> Filter konvertiert Bilder in <code>JPEG<\/code>, <code>webp<\/code>, <code>gif<\/code>oder <code>png<\/code>. Beachten Sie, dass Sie dies tun m\u00fcssen, wenn Sie die Leistung optimieren <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/image-optimization\">Verwenden Sie JPEG oder WebP<\/a> da PNG- und GIF-Dateien in der Regel erheblich gr\u00f6\u00dfer sind und nicht so gut komprimiert werden.<\/p>\n<p>Versuchen Sie es jetzt:<\/p>\n<ol>\n<li>Konvertieren Sie das Bild in WebP. Wenn Sie die \u00f6ffnen <strong>Netz<\/strong> DevTools-Bereich des Dokuments <strong>Antwortkopf f\u00fcr den Inhaltstyp<\/strong> zeigt, dass der Server ein WebP-Image zur\u00fcckgegeben hat: http:\/\/34.67.235.246:8888\/unsafe\/filters:format(webp)\/https:\/\/web.dev\/backdrop-filter\/hero.jpg<\/li>\n<\/ol>\n<figure class=\"w-figure\">\n  <img alt='use-thumbor11-5687756' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/Use-thumbor11-5687756.jpg' class=\"w-screenshot\"><figcaption>das <code>Inhaltstyp<\/code> Antwortheader in DevTools angezeigt<\/figcaption><\/figure>\n<h2 id=\"next-steps\"><span class=\"ez-toc-section\" id=\"Proximos-pasos\"><\/span>N\u00e4chste Schritte <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Versuchen Sie es mit anderen <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/thumbor.readthedocs.io\/en\/latest\/filters.html\">Filter<\/a> und Transformationen in der <code>hero.jpg<\/code> Bild.<\/p>\n<p>Wenn Sie mit Ihrer eigenen Installation von Thumbor fortfahren, lesen Sie bitte den folgenden Anhang, in dem erl\u00e4utert wird, wie und warum Sie Thumbor verwenden <code>thumbor.conf<\/code> Verfahren.<\/p>\n<h2 id=\"appendix:-thumbor.conf\"><span class=\"ez-toc-section\" id=\"Apendice-thumborconf\"><\/span>Blinddarm: <code>thumbor.conf<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Viele der in diesem Beitrag beschriebenen Konfigurationsoptionen sowie viele andere k\u00f6nnen durch Konfigurieren und Verwenden von a als Standard festgelegt werden <code>thumbor.conf<\/code> Konfigurationsdatei. Konfiguration in der <code>thumbor.conf<\/code> Die Datei wird auf alle Bilder angewendet, es sei denn, die URL-Zeichenfolgenparameter \u00fcberschreiben sie.<\/p>\n<ol>\n<li>\n<p>F\u00fchren Sie die aus <code>thumbor-config<\/code> Befehl zum Erstellen eines neuen <code>thumbor.conf<\/code> Verfahren.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\">thumbor-config <span class=\"token operator\">&gt;<\/span> .\/thumbor.conf<\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<li>\n<p>\u00d6ffne dein neues <code>thumbor.conf<\/code> Verfahren. das <code>thumbor-config<\/code> Der Befehl hat eine Datei generiert, in der alle Thumbor-Konfigurationsoptionen aufgelistet und erl\u00e4utert werden.<\/p>\n<\/li>\n<li>\n<p>Konfigurieren Sie die Einstellungen, indem Sie die Zeilen auskommentieren und die Standardwerte \u00e4ndern. M\u00f6glicherweise ist es hilfreich, die folgenden Einstellungen vorzunehmen:<\/p>\n<p> <!-- lint disable no-inline-padding --><\/p>\n<ul>\n<li><code>QUALIT\u00c4T<\/code><\/li>\n<li><code>AUTO_WEBP<\/code><\/li>\n<li><code>MAXIMALE BREITE<\/code>  y <code>MAXIMALE H\u00d6HE<\/code><\/li>\n<li><code>ALLOW_ANIMATED_GIFS<\/code><\/li>\n<\/ul>\n<\/li>\n<li>\n<p>F\u00fchren Sie Thumbor mit dem aus <code>--conf<\/code> Flagge, um Ihre zu verwenden <code>thumbor.conf<\/code> die Einstellungen.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\">thumbor --conf \/path\/to\/thumbor.conf<\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<\/ol>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Thumbor se puede utilizar de forma gratuita para cambiar el tama\u00f1o, comprimir y transformar im\u00e1genes a pedido. 23 de septiembre de 2019 Thumbor es un CDN de im\u00e1genes de c\u00f3digo&#8230;<\/p>","protected":false},"author":1,"featured_media":83300,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83299","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Optimizar im\u00e1genes con Thumbor - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Thumbor se puede utilizar de forma gratuita para cambiar el tama\u00f1o, comprimir y transformar im\u00e1genes a pedido. 23 de septiembre de 2019 Thumbor es un CDN\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimizar im\u00e1genes con Thumbor\" \/>\n<meta property=\"og:description\" content=\"Thumbor se puede utilizar de forma gratuita para cambiar el tama\u00f1o, comprimir y transformar im\u00e1genes a pedido. 23 de septiembre de 2019 Thumbor es un CDN\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-09T02:05:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4192614.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"801\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/bilder-mit-daumen-optimieren\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/bilder-mit-daumen-optimieren\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Optimizar im\u00e1genes con Thumbor\",\"datePublished\":\"2022-09-09T02:05:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/bilder-mit-daumen-optimieren\\\/\"},\"wordCount\":1293,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/bilder-mit-daumen-optimieren\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4192614.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/bilder-mit-daumen-optimieren\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/bilder-mit-daumen-optimieren\\\/\",\"name\":\"Optimizar im\u00e1genes con Thumbor - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/bilder-mit-daumen-optimieren\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/bilder-mit-daumen-optimieren\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4192614.jpg\",\"datePublished\":\"2022-09-09T02:05:11+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Thumbor se puede utilizar de forma gratuita para cambiar el tama\u00f1o, comprimir y transformar im\u00e1genes a pedido. 23 de septiembre de 2019 Thumbor es un CDN\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/bilder-mit-daumen-optimieren\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/bilder-mit-daumen-optimieren\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4192614.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4192614.jpg\",\"width\":1200,\"height\":801,\"caption\":\"hero-4192614-8597059-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Optimieren Sie Bilder mit Thumbor \u2013 R Marketing Digital","description":"Thumbor kann kostenlos verwendet werden, um die Gr\u00f6\u00dfe von Bildern bei Bedarf zu \u00e4ndern, zu komprimieren und zu transformieren. 23. September 2019 Thumbor ist ein CDN","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:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/","og_locale":"de_DE","og_type":"article","og_title":"Optimizar im\u00e1genes con Thumbor","og_description":"Thumbor se puede utilizar de forma gratuita para cambiar el tama\u00f1o, comprimir y transformar im\u00e1genes a pedido. 23 de septiembre de 2019 Thumbor es un CDN","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-09T02:05:11+00:00","og_image":[{"width":1200,"height":801,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4192614.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Optimizar im\u00e1genes con Thumbor","datePublished":"2022-09-09T02:05:11+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/"},"wordCount":1293,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4192614.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/","name":"Optimieren Sie Bilder mit Thumbor \u2013 R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4192614.jpg","datePublished":"2022-09-09T02:05:11+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Thumbor kann kostenlos verwendet werden, um die Gr\u00f6\u00dfe von Bildern bei Bedarf zu \u00e4ndern, zu komprimieren und zu transformieren. 23. September 2019 Thumbor ist ein CDN","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/bilder-mit-daumen-optimieren\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4192614.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4192614.jpg","width":1200,"height":801,"caption":"hero-4192614-8597059-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83299"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83299\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83300"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}