Optimizar imágenes con Thumbor

Thumbor es un CDN de imágenes de código abiertoEl 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 más 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 servidorLos 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 más Thumbor sandboxConcepto 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 más 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 más://34.67.235.246:8888. La imagen con la que vas a experimentar está disponible en http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

Requisitos previos

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 optimizar imágenes. También asume que ha creado sitios web básicos antes.

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 más en miniatura

Como se menciona en Usar CDN de imágenes para optimizar imágenes, cada CDN de imagen usa un formato de URL ligeramente diferente para las imágenes. La figura 1 representa el formato de Thumbor.

Origen

Como todo orígenes, el origen de una URL Thumbor se compone de tres partes: una esquema (que es casi siempre http o 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 más), un host y un puerto. En este ejemplo, el host se identifica mediante una dirección IPDirecció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 más, 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 más, podría verse como thumbor-server.my-site.com. De forma predeterminada, Thumbor usa el puerto 8888 para servir imágenes.

Clave de seguridad

los unsafe parte de la URL indica que estás usando Thumbor sin una clave de seguridad. Una clave de seguridad evita que un usuario 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 Función de llave de seguridad de Thumbor.

Talla

Esta parte de la URL especifica el tamaño deseado de la imagen de salida. Esto se puede omitir si no desea cambiar el tamaño de la imagen. Thumbor utilizará diferentes enfoques como recortar o escalar para lograr el tamaño deseado según los otros parámetros de URL. La siguiente sección de esta publicación explica cómo cambiar el tamaño de las imágenes con más detalle.

Pruebalo ahora:

1. Haga clic en la siguiente URL para ver la imagen mostrada en su tamaño original en una nueva pestaña: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

   

2. Cambie el tamaño de la imagen a 100×100 píxeles: http://34.67.235.246:8888/unsafe/100×100/https://web.dev/backdrop-filter/hero.jpg

FiltrosConcepto 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 más

Los filtros transforman una imagen. La parte de filtros del segmento de URL comienza con filters: seguido de una lista de filtros separados por dos puntos; esto se puede omitir si no está utilizando ningún filtro. La sintaxis de los filtros individuales se asemeja a una llamada de función (por ejemplo grayscale()) que contiene cero o más argumentos.

Pruebalo ahora:

1. Aplicar un solo filtro: un gaussiano difuminar efecto con un radio de 25 píxeles: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

   

2. Aplicar filtro múltiple. Convertir a escala de grises y girar la imagen 90 grados: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

Transformando imágenes

Esta sección se centra en las funcionalidades de Thumbor más relevantes para el rendimiento: compresión, cambio de tamaño y conversiónConversió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 más entre formatos de archivo.

Compresión

los calidad El filtro comprime las imágenes JPEG al nivel de calidadConcepto 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 más 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%.

Pruebalo ahora:

1. Comprima la imagen a una calidad de 1 (muy mala): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

   

2. Comprima la imagen usando la configuración de compresión predeterminada de Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

Cambiar el tamaño

Para cambiar el tamaño de una imagen manteniendo sus proporciones originales, utilice el formato $WIDTHx0 o 0x$HEIGHT dentro de size parte de la cadena de URL.

Pruebalo ahora:

1. Cambie el tamaño de la imagen a un ancho de 200 píxeles manteniendo las proporciones originales: http://34.67.235.246:8888/unsafe/200×0/https://web.dev/backdrop-filter/hero.jpg

   

2. Cambie el tamaño de la imagen a una altura de 500 píxeles manteniendo la proporción original: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

También puede cambiar el tamaño de las imágenes a un porcentaje del original mediante el proporción filtrar. Si se especifica el tamaño junto con el filtro de proporción, se cambiará el tamaño de la imagen y, a continuación, se aplicará el filtro de proporción.

Pruebalo ahora:

1. Cambie el tamaño de la imagen al 50% del original: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

   

2. Cambie el tamaño de la imagen a un ancho de 1000 píxeles, luego cambie el tamaño de la imagen al 10% de su tamaño actual: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web. dev / backdrop-filter / hero.jpg

Estos métodos son solo algunas de las muchas opciones de recorte y cambio de tamaño de Thumbor. Para leer sobre otras opciones, consulte Uso.

Formatos de archivo

los formato filtro convierte imágenes a jpeg, webp, gifo png. Tenga en cuenta que si está optimizando el rendimiento, debe use JPEG o WebP ya que los archivos PNG y GIF tienden a ser significativamente más grandes y no se comprimen tan bien.

Pruebalo ahora:

1. Convierta la imagen a WebP. Si abre el Red panel de DevTools del documento Encabezado de respuesta de tipo de contenidoEl 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 más muestra que el servidor devolvió una imagen WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg

Próximos pasos

Prueba otros filtros y transformaciones en el hero.jpg imagen.

Si está siguiendo con su propia instalación de Thumbor, consulte el apéndice a continuación que explica cómo y por qué usar el thumbor.conf expediente.

Apéndice: thumbor.conf

Muchas de las opciones de configuración discutidas en esta publicación, además de muchas otras, se pueden establecer como predeterminadas configurando y usando un thumbor.conf archivo de configuración. Configuración en el thumbor.conf El archivo se aplicará a todas las imágenes a menos que los parámetros de la cadena de URL lo invaliden.

1. Ejecutar el thumbor-config comando para crear un nuevo thumbor.conf expediente.

   thumbor-config > ./thumbor.conf

2. Abre tu nuevo thumbor.conf expediente. los thumbor-config El comando generó un archivo que enumera y explica todas las opciones de configuración de Thumbor.

3. Configure los ajustes descomentando las líneas y cambiando los valores predeterminados. Puede resultarle útil establecer los siguientes ajustes:

   • QUALITY
   • AUTO_WEBP
   • MAX_WIDTH y MAX_HEIGHT
   • ALLOW_ANIMATED_GIFS

4. Ejecute Thumbor con el --conf bandera para usar tu thumbor.conf ajustes.

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