Optimieren Sie Bilder mit Thumbor

Thumbor es un CDN de imágenes de Open SourceEl Código Abierto u Open Source se refiere al código fuente del software que es abiertamente alcanzable y que puede ser cambiado y distribuido por cualquier persona. La propuesta de código abierto estipula diez requerimientos para las licencias de software de código abierto. El principio El código fuente de un software se hace público: cualquiera puede leerlo, desarrollar el propio software y copiarlo. El software puede ser utilizado o distribuido Plus 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 ServerLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en Plus Thumbor SandkastenConcepto de Sandbox¿Qué es el Google Sandbox?El Sandbox es más que una definición usado dentro del sector de los videojuegos. Se trata del periodo de tiempo en el que Google pone a prueba todas aquellas páginas web que se han creado recientemente. Muchos lo definen como un periodo de cuarentena en el que el portal en cuestión pasa por un profundo análisis con el que el buscador determina su validez Plus para que lo pruebes httpEl HTTP (Hyper Text Transfer Protocol) es un protocolo que se usa para transmitir datos en redes. HTTP es un estándar técnico generalmente aceptado que establece cómo un cliente web se comunica con un servidor para que los datos solicitados por el cliente puedan ser cargados y mostrados. Información general Junto con el URL y el HTML, HTTP es uno de los conceptos más importantes de Internet (www). Fue desarrollado Plus://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

In diesem Beitrag wird davon ausgegangen, dass Sie verstehen, wie Image-CDNs Ihre Upload-Leistung verbessern können. Andernfalls lesen Sie Bild-CDNs zum Optimieren von Bildern verwenden. Es wird auch davon ausgegangen, dass Sie zuvor grundlegende Websites erstellt haben.

Formato de UrlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo Plus 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 httpsHTTPS (protocolo de Transferencia de Hiper-Texto) es un protocolo que permite determinar una conexión segura entre el servidor y el cliente, que no puede ser interceptada por personas no autorizadas. En resumidas cuentas, es la versión segura de el http (Hyper Text Transfer Protocol) Cómo funciona Una conexión HTTP estándar en Internet puede ser fácilmente secuestrada por partes no autorizadas. El propósito de una conexión HTTPS es evitar esto: encriptar Plus), un host y un puerto. En este ejemplo, el host se identifica mediante una IP AdresseDirección de Protocolo de Internet, la dirección IP es una dirección de red que se puede asignar a un dispositivo en una red sólo una vez. Esto hace falta para que los paquetes de datos puedan direccionarse y entregarse correctamente. Una dirección IP es el identificador único de un PC que establece su ubicación en Internet. Muestra qué proveedor se está usando. La dirección IP de 32 bits (además llamada Plus, pero si está utilizando un servidor DNSConcepto de DNS¿Qué son las DNS (Domain Name Server)?Al hablar de DNS, nos referimos a las iniciales Domain Name System (Sistema de Nombres de Dominio). Consiste en una tecnología que recurre a las bases de datos para detectar la dirección IP a la que pertenece cualquier dominio que un usuario quiera desear. Es decir, toma la URL y la “traduce” para ofrecer como resultado su dirección exacta, su IP.Para quien Plus, podría verse como thumbor-server.my-site.com. Standardmäßig verwendet Thumbor den Port 8888 Bilder zu dienen.

Sicherheitsschlüssel

das unsicher Ein Teil der URL gibt an, dass Sie Thumbor ohne Sicherheitsschlüssel verwenden. Ein Sicherheitsschlüssel verhindert, dass ein Benutzer nicht autorisierte Änderungen an seinen Bild-URLs vornimmt. Durch Ändern der Bild-URL kann ein Benutzer Ihren Server (und Ihre Hosting-Rechnung) verwenden, um die Größe seiner Bilder zu ändern oder, böswilliger, Ihren Server zu überlasten. Diese Anleitung behandelt nicht die Einrichtung 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

FilterConcepto de Filtros¿Qué son los Filtros?Los Filtros son unos mecanismos que, sea en el campo de la informática o en el de las páginas web, se usan para establecer qué tipo de contenidos se deben visualizar o mostrar por pantalla, o cuáles no deben aparecer. Es algo que se emplea en numerosos lugares con fines muy distintos, pero que siempre tiene como objetivo perfilar la búsqueda para acertar mejor con Plus

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 UmwandlungConversión es una acción precisa que lleva a cabo un usuario al visitar un portal web. Algunas formas clásica de conversión son, por ejemplo, una compra, una descarga o una suscripción a la newsletter. Un parte del SEO o del Marketing Online es la Optimización de Ratio de Conversión (CRO). En el Marketing de afiliación se usa para la conversión de los editores. Información general Hay diferentes indicadores para medir Plus entre formatos de archivo.

Kompression

das Qualität El filtro comprime las imágenes JPEG al QualitätslevelConcepto de Nivel de Calidad¿Qué es el Nivel de Calidad?El Nivel de calidad es un concepto que puede aplicarse a numerosos terrenos, pero que cobra especial sentido dentro de la plataforma de anuncios Google Adwords. Se trata de una herramienta pensada para hacer que las palabras clave sean solo un elemento más a prestar atención en las campañas publicitarias, para que además se valore la relevancia de estas y otros Plus 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 InhaltsEl tipo de contenido se refiere al contenido de un archivo que se transfiere mediante de HTTP y se clasifica según una estructura de dos partes. Esta clasificación está estandarizada y publicada por la IANA (Internet Assigned Numbers Authority, que supervisa la asignación global de direcciones IP). Una definición alternativo es MIME. En esta circunstancia, el contenido de los datos se especifica según el MIME (Multipurpose Internet Mail Extensions). El Plus 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