Optimieren Sie Bilder mit Thumbor

Thumbor kann kostenlos verwendet werden, um die Größe von Bildern bei Bedarf zu ändern, zu komprimieren und zu transformieren.

23. September 2019

Thumbor es un CDN de imágenes de Open Source y gratuito que facilita la compresión, el cambio de tamaño y la transformación de imágenes. Esta publicación te permite probar Thumbor de primera mano sin necesidad de instalar nada. Hemos configurado un Server Thumbor Sandkasten para que lo pruebes http://34.67.235.246:8888. Das Bild, mit dem Sie experimentieren möchten, ist unter http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg verfügbar.

Bisherige Anforderungen

Esta publicación asume que comprende cómo las CDN de imagen pueden mejorar el rendimiento de su carga. De lo contrario, consulte Usar CDN de imágenes para optimieren imágenes. También asume que ha creado sitios Netz básicos antes.

Formato de Url en miniatura

Wie unter Verwenden von Bild-CDNs zur Optimierung von Bildern erwähnt, verwendet jedes Bild-CDN ein etwas anderes URL-Format für Bilder. Abbildung 1 zeigt das Thumbor-Format.

Quelle

Wie alles HerkunftDer Ursprung einer URL Thumbor besteht aus drei Teilen: a planen (was fast immer ist http oder https), un host y un puerto. En este ejemplo, el host se identifica mediante una IP Adresse, pero si está utilizando un servidor DNS, podría verse como thumbor-server.my-site.com. Standardmäßig verwendet Thumbor den Port 8888 Bilder zu dienen.

Sicherheitsschlüssel

das unsicher parte de la URL indica que estás usando Thumbor sin una clave de seguridad. Una clave de seguridad evita que un Nutzername realice cambios no autorizados en las URL de sus imágenes. Al cambiar la URL de la imagen, un usuario podría usar su servidor (y su factura de alojamiento) para cambiar el tamaño de sus imágenes o, más maliciosamente, para sobrecargar su servidor. Esta guía no cubrirá la configuración Thumbor-Sicherheitsschlüsselfunktion.

Größe

Dieser Teil der URL gibt die gewünschte Größe des Ausgabebildes an. Dies kann weggelassen werden, wenn Sie die Bildgröße nicht ändern möchten. Thumbor verwendet verschiedene Ansätze wie Zuschneiden oder Skalieren, um die gewünschte Größe basierend auf den anderen URL-Parametern zu erreichen. Im nächsten Abschnitt dieses Beitrags wird die Größenänderung von Bildern ausführlicher erläutert.

Versuchen Sie es jetzt:

1. Klicken Sie auf die folgende URL, um das Bild in seiner ursprünglichen Größe in einem neuen Tab anzuzeigen: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

   

2. Ändern Sie die Größe des Bildes auf 100 × 100 Pixel: http://34.67.235.246:8888/unsafe/100damientos100/https://web.dev/backdrop-filter/hero.jpg

Filter

Filter transformieren ein Bild. Der Filterteil des URL-Segments beginnt mit Filter: gefolgt von einer Liste von Filtern, die durch Doppelpunkte getrennt sind; Dies kann weggelassen werden, wenn Sie keine Filter verwenden. Die Syntax für einzelne Filter ähnelt beispielsweise einem Funktionsaufruf Graustufen ()), die null oder mehr Argumente enthält.

Versuchen Sie es jetzt:

1. Wenden Sie einen einzelnen Filter an: einen Gaußschen verwischen Effekt mit einem Radius von 25 Pixel: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

   

2. Wenden Sie mehrere Filter an. Konvertieren zu Graustufen y drehen das Bild um 90 Grad: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

Bilder transformieren

Esta sección se centra en las funcionalidades de Thumbor más relevantes para el rendimiento: compresión, cambio de tamaño y Umwandlung entre formatos de archivo.

Kompression

das Qualität El filtro comprime las imágenes JPEG al Qualitätslevel de imagen deseado (1-100). Si no se proporciona un nivel de calidad, Thumbor comprime la imagen a un nivel de calidad de 80. Este es un buen valor predeterminado: los niveles de calidad 80-85 normalmente tienen un efecto poco notable en la calidad de la imagen, pero normalmente reducen el tamaño de la imagen en un 30-40%.

Versuchen Sie es jetzt:

1. Komprimieren Sie das Bild auf eine Qualität von 1 (sehr schlecht): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

   

2. 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

Größe ändern

Verwenden Sie das Format, um die Größe eines Bildes unter Beibehaltung des ursprünglichen Seitenverhältnisses zu ändern $WIDTHx0 oder 0x$HEIGHT innerhalb Größe Teil der URL-Zeichenfolge.

Versuchen Sie es jetzt:

1. Ändern Sie die Größe des Bilds auf eine Breite von 200 Pixel, wobei Sie das ursprüngliche Seitenverhältnis beibehalten: http://34.67.235.246:8888/unsafe/200damientos0/https://web.dev/backdrop-filter/hero.jpg

   

2. Ändern Sie die Größe des Bilds auf eine Höhe von 500 Pixel, wobei Sie das ursprüngliche Seitenverhältnis beibehalten: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

Sie können die Größe von Bildern auch mit dem auf einen Prozentsatz des Originals ändern Anteil Filter. Wenn Sie die Größe in Verbindung mit dem Seitenverhältnisfilter angeben, wird die Bildgröße geändert, und anschließend wird das Seitenverhältnisfilter angewendet.

Versuchen Sie es jetzt:

1. Ändern Sie die Größe des Bildes vom Original auf 50%: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

   

2. Ändern Sie die Größe des Bilds auf 1000 Pixel Breite und ändern Sie dann die Größe des Bilds von der aktuellen Größe auf 10%: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https: // Web. dev / backdrop-filter / hero.jpg

Diese Methoden sind nur einige der vielen Optionen von Thumbor zum Zuschneiden und Ändern der Größe. Weitere Informationen zu anderen Optionen finden Sie unter Benutzen.

Dateiformate

das Format Filter konvertiert Bilder in JPEG, webp, gifoder png. Beachten Sie, dass Sie dies tun müssen, wenn Sie die Leistung optimieren Verwenden Sie JPEG oder WebP da PNG- und GIF-Dateien in der Regel erheblich größer sind und nicht so gut komprimiert werden.

Versuchen Sie es jetzt:

1. Konvertieren Sie das Bild in WebP. Wenn Sie die öffnen Netz DevTools-Bereich des Dokuments Encabezado de respuesta de Art des Inhalts zeigt, dass der Server ein WebP-Image zurückgegeben hat: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg

Nächste Schritte

Versuchen Sie es mit anderen Filter und Transformationen in der hero.jpg Bild.

Wenn Sie mit Ihrer eigenen Installation von Thumbor fortfahren, lesen Sie bitte den folgenden Anhang, in dem erläutert wird, wie und warum Sie Thumbor verwenden thumbor.conf Verfahren.

Blinddarm: thumbor.conf

Viele der in diesem Beitrag beschriebenen Konfigurationsoptionen sowie viele andere können durch Konfigurieren und Verwenden von a als Standard festgelegt werden thumbor.conf Konfigurationsdatei. Konfiguration in der thumbor.conf Die Datei wird auf alle Bilder angewendet, es sei denn, die URL-Zeichenfolgenparameter überschreiben sie.

1. Führen Sie die aus thumbor-config Befehl zum Erstellen eines neuen thumbor.conf Verfahren.

   thumbor-config > ./thumbor.conf

2. Öffne dein neues thumbor.conf Verfahren. das thumbor-config Der Befehl hat eine Datei generiert, in der alle Thumbor-Konfigurationsoptionen aufgelistet und erläutert werden.

3. Konfigurieren Sie die Einstellungen, indem Sie die Zeilen auskommentieren und die Standardwerte ändern. Möglicherweise ist es hilfreich, die folgenden Einstellungen vorzunehmen:

   • QUALITÄT
   • AUTO_WEBP
   • MAXIMALE BREITE y MAXIMALE HÖHE
   • ALLOW_ANIMATED_GIFS

4. Führen Sie Thumbor mit dem aus --conf Flagge, um Ihre zu verwenden thumbor.conf die Einstellungen.

   thumbor --conf /path/to/thumbor.conf