Mit Thumbor können Sie bei Bedarf die Größe, Komprimierung und Umwandlung von Bildern kostenlos anpassen.
Katie Hempenius
Thumbor ist ein kostenloses Open-Source-CDN für Bilder, mit dem Bilder ganz einfach komprimiert, in ihrer Größe angepasst und umgewandelt werden können. In diesem Beitrag kannst du Thumbor direkt ausprobieren, ohne etwas installieren zu müssen. Wir haben einen Sandbox-Thumbor-Server eingerichtet, den du unter http://34.67.235.246:8888 ausprobieren kannst. 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.
Voraussetzungen
In diesem Beitrag wird davon ausgegangen, dass Sie wissen, wie Bild-CDNs die Ladeleistung verbessern können. Falls nicht, lesen Sie den Artikel Bild-CDNs zur Optimierung von Bildern verwenden. Außerdem wird angenommen, dass Sie bereits einfache Websites erstellt haben.
Thumbor-URL-Format
Wie im Abschnitt Bild-CDN zum Optimieren von Bildern verwenden erwähnt, wird für jedes Bild-CDN ein etwas anderes URL-Format für Bilder verwendet. Abbildung 1 stellt das Thumbor-Format dar.
<ph type="x-smartling-placeholder"></ph>
URL-Format von Thumbor
Ursprung
Wie alle Ursprünge besteht der Ursprung einer Thumbor-URL aus drei Teilen: einem Schema (das fast immer http oder https ist), einem Host und einem Port. In diesem Beispiel wird der Host anhand einer IP-Adresse identifiziert. Wenn Sie jedoch einen DNS-Server verwenden, könnte er so aussehen: thumbor-server.my-site.com. Standardmäßig verwendet Thumbor Port 8888 zum Bereitstellen von Bildern.
Sicherheitsschlüssel
Der unsafe-Teil der URL gibt an, dass du Thumbor ohne Sicherheitsschlüssel verwendest. Ein Sicherheitsschlüssel verhindert, dass Nutzer unbefugte Änderungen an Ihren Bild-URLs vornehmen. Wenn Sie die Bild-URL ändern, können Nutzer Ihren Server (und Ihre Hostingrechnung) verwenden, um die Größe der Bilder zu ändern oder sogar Ihren Server zu überlasten. Die Einrichtung der Funktion für Sicherheitsschlüssel von Thumbor wird in diesem Leitfaden nicht behandelt.
Größe
Dieser Teil der URL gibt die gewünschte Größe des Ausgabebilds an. Wenn Sie die Größe des Bildes nicht ändern möchten, können Sie diese Angabe weglassen. Thumbor verwendet verschiedene Ansätze wie Zuschneiden oder Skalieren, um die gewünschte Größe abhängig von den anderen URL-Parametern zu erreichen. Im nächsten Abschnitt dieses Beitrags wird genauer erläutert, wie Sie die Größe von Bildern anpassen.
Mit Filtern lassen sich Bilder umwandeln. Der Filterteil des URL-Segments beginnt mit filters:, gefolgt von einer durch Doppelpunkte getrennten Liste von Filtern. Dieser kann weggelassen werden, wenn Sie keine Filter verwenden. Die Syntax für einzelne Filter ähnelt einem Funktionsaufruf (z. B. grayscale()), der null oder mehr Argumente enthält.
In diesem Abschnitt geht es um die Thumbor-Funktionen, die für die Leistung am wichtigsten sind: Komprimierung, Größenanpassung und Konvertierung zwischen Dateiformaten.
Komprimierung
Mit dem Filter quality werden JPEG-Bilder auf die gewünschte Bildqualität (1–100) komprimiert. Wenn keine Qualitätsstufe angegeben wird, komprimiert Thumbor das Bild auf eine Qualität von 80. Dies ist eine gute Standardeinstellung: Die Qualitätsstufen 80–85 haben normalerweise geringe Auswirkungen auf die Bildqualität, verringern aber in der Regel die Bildgröße um 30–40%.
Wenn Sie die Größe eines Bildes unter Beibehaltung seiner ursprünglichen Proportionen ändern möchten, verwenden Sie im size-Teil des URL-Strings das Format $WIDTHx0 oder 0x$HEIGHT.
Mit dem Filter Proportion können Sie die Größe der Bilder auf einen bestimmten Prozentsatz des Originals anpassen. Wenn die Größe in Verbindung mit dem Proportionsfilter angegeben wird, wird die Bildgröße angepasst und dann der Proportionsfilter angewendet.
Diese Methoden sind nur einige der vielen Optionen von Thumbor zum Zuschneiden und Ändern der Größe. Informationen zu anderen Optionen finden Sie unter Nutzung.
Dateiformate
Mit dem Filter format werden Bilder in jpeg, webp, gif oder png konvertiert. Zur Leistungsoptimierung solltest du entweder JPEG oder WebP verwenden, da PNG- und GIF-Dateien in der Regel deutlich größer sind und nicht so gut komprimiert werden.
Der Antwortheader content-type, der in den Entwicklertools angezeigt wird
Nächste Schritte
Probieren Sie andere Filter und Transformationen für das hero.jpg-Bild aus.
Wenn Sie Ihre eigene Thumbor-Installation verwenden, finden Sie im Anhang unten Informationen dazu, wie und warum Sie die Datei thumbor.conf verwenden sollten.
Anhang: thumbor.conf
Viele der in diesem Beitrag beschriebenen Konfigurationsoptionen und viele andere können durch Einrichten und Verwenden einer thumbor.conf-Konfigurationsdatei als Standardeinstellungen festgelegt werden. Die Einstellungen in der Datei thumbor.conf werden auf alle Bilder angewendet, sofern sie nicht durch die URL-String-Parameter überschrieben werden.
Führen Sie den Befehl thumbor-config aus, um eine neue thumbor.conf-Datei zu erstellen.
thumbor-config > ./thumbor.conf
Öffnen Sie die neue thumbor.conf-Datei. Der Befehl thumbor-config hat eine Datei generiert, in der alle Thumbor-Konfigurationsoptionen aufgelistet und erläutert werden.
Konfigurieren Sie die Einstellungen, indem Sie die Kommentarzeichen von Zeilen entfernen und die Standardwerte ändern.
Folgende Einstellungen können hilfreich sein:
QUALITY
AUTO_WEBP
MAX_WIDTH und MAX_HEIGHT
ALLOW_ANIMATED_GIFS
Führen Sie Thumbor mit dem Flag --conf aus, um Ihre thumbor.conf-Einstellungen zu verwenden.
