One place for hosting & domains

      Cómo alojar un sitio web con Caddy en Ubuntu 18.04


      El autor seleccionó la Free and Open Source Fund para recibir una donación como parte del programa Write for DOnations.

      Introducción

      Caddy es un servidor web diseñado con la simplicidad y la seguridad que provienen de varias funciones útiles para alojar sitios web. Por ejemplo, puede obtener y administrar automáticamente certificados de seguridad de la capa de transporte (TSL) de Let´s Encrypt para habilitar HTTPS e incluye asistencia para HTTP/2. HTTPS es un sistema para proteger el tráfico entre sus usuarios y su servidor, y se está transformando rápidamente en una expectativa básica de cualquier funcionamiento de sitio web en producción; sin este, Chrome y Firefox advertirán que su sitio web “No es seguro” si los usuarios intentan enviar información de inicio de sesión.

      Anteriormente, el método recomendado para instalar Caddy era descargar binarios previamente compilados del sitio web del proyecto Caddy. No obstante, los cambios en la manera en la que funciona la licencia de Caddy implican que ya no tendrá permitido usar estos binarios previamente compilados con fines comerciales, a menos que pague un cargo de licencia, incluso si solo usa Caddy de manera interna dentro de una empresa. Afortunadamente, el código fuente de Caddy todavía es completamente abierto y puede compilar Caddy por su cuenta para evitar inmiscuirse en problemas de licencias.

      A través de este tutorial, compilará Caddy a partir de código fuente y lo utilizará para alojar un sitio web protegido con HTTPS. Esto implica compilarlo, configurarlo mediante Caddyfile e instalar complementos. Con el tiempo, aprenderá a actualizar su instalación cuando se lance una nueva versión.

      Requisitos previos

      Paso 1: Compilar Caddy

      En este paso, compilará Caddy a partir de código fuente con la posibilidad de agregar complementos después, todo ello sin cambiar el código fuente de Caddy.

      Para este tutorial, almacenará el código fuente en ~/caddy. Para crear ese directorio, ejecute el siguiente comando:

      Diríjase a este:

      Guardará el código fuente para ejecutar y personalizar Caddy en un archivo llamado caddy.go. Créelo usando el siguiente comando:

      Añada las siguientes líneas:

      ~/caddy/caddy.go

      package main
      
      import (
          "github.com/caddyserver/caddy/caddy/caddymain"
      )
      
      func main() {
          // caddymain.EnableTelemetry = false
          caddymain.Run()
      }
      

      Este código importa Caddy directamente desde Github (por medio de Git) y lo inicia desde la función de entrada main. Si desea habilitar telemetría, quite el comentario de la línea caddymain.EnableTelemetry y fije el valor en true. Cuando termine, guarde y cierre el archivo.

      Para que caddy.go pueda usar las dependencias importadas, deberá inicializarlo como un módulo:

      Output

      go: creating new go.mod: module caddy

      En este punto, estará listo para compilar la versión básica de Caddy a partir del código de fuente anterior ejecutando lo siguiente:

      Habrá muchos resultados en los que se detallarán las bibliotecas de Go que descargó como dependencias necesarias para compilar. El ejecutable que surja se almacenará en $GOPATH/bin​​​​​​, como se explica en los requisitos previos.

      Al finalizar, intente ejecutar Caddy:

      Visualizará un resultado similar al siguiente:

      Output

      Activating privacy features... done. Serving HTTP on port 2015 http://:2015 WARNING: File descriptor limit 1024 is too low for production servers. At least 8192 is recommended. Fix with `ulimit -n 8192`.

      Esto significa que Caddy se inició de forma correcta y está disponible en el puerto 2015. Réstele importancia al mensaje de advertencia, porque ese límite se ajustará en los siguientes pasos sin intervención por su parte. Para salir, presione CTRL + C.

      Ya compiló y ejecutó Caddy. En el paso siguiente, instalará Caddy como servicio para que se inicie automáticamente con el arranque y luego ajuste la configuración de propiedad y los permisos para garantizar la seguridad del servidor.

      Paso 2: Instalar Caddy

      Ahora que verificó que puede compilar y ejecutar Caddy, es momento de configurar un servicio systemd para que Caddy se pueda abrir automáticamente durante el inicio del sistema. Si desea comprender mejor systemd, consulte nuestro tutorial Aspectos básicos de systemd.

      Para comenzar, traslade el binario de Caddy a /usr/local/bin, la ubicación estándar para binarios que no están administrados por el administrador de paquetes de Ubuntu y no son claves para el funcionamiento del sistema:

      • sudo mv $GOPATH/bin/caddy /usr/local/bin/

      Luego, cambie la propiedad del binario de Caddy al usuario root:

      • sudo chown root:root /usr/local/bin/caddy

      Esto evitará que otras cuentas modifiquen el ejecutable. No obstante, aunque el usuario root sea el propietario de Caddy, se recomienda ejecutarlo solo con otras cuentas que no sean root presentes en el sistema. Esto garantiza que, en caso de que Caddy (u otro programa) quede comprometido, el atacante no pueda modificar el binario ni ejecutar comandos como root.

      A continuación, fije los permisos del binario en 755. Esto otorgará permisos root completos de lectura, escritura y ejecución para el archivo; mientras tanto, otros usuarios solo podrán leerlo y ejecutarlo.

      • sudo chmod 755 /usr/local/bin/caddy

      Debido a que el proceso de Caddy no se ejecutará como root, Linux evitará que se vincule a los puertos 80 y 443 (los puertos estándares para HTTP y HTTPS, respectivamente), ya que estas son operaciones con privilegios. Para que su dominio pueda acceder a Caddy fácilmente, este último debe vincularse con uno de estos puertos, según el protocolo. De lo contrario, deberá agregar un número de puerto específico a la URL de dominio en el navegador para ver el contenido que tendrá.

      Pare permitir que Caddy se vincule a puertos bajos sin ejecutarse como root, ejecute el siguiente comando:

      • sudo setcap 'cap_net_bind_service=+ep' /usr/local/bin/caddy

      La utilidad setcap establece capacidades de archivos. En este comando, asigna la capacidad CAP_NET_BIND_SERVICE al binario Caddy, que permite que un ejecutable se vincule a un puerto menor que el 1024.

      Con esto, habrá finalizado la configuración del binario de Caddy y estará listo para comenzar a escribir la configuración de Caddy. Cree un directorio en el que almacenará los archivos de configuración de Caddy ejecutando el siguiente comando:

      Luego, establezca el usuario y los permisos de grupo correctos para él:

      • sudo chown -R root:www-data /etc/caddy

      Configurar el usuario como root y el grupo como www-data garantiza que Caddy haya leído y escrito el acceso a la carpeta (por medio del grupo www-data) y que solo la cuenta del superusuario tenga los mismos derechos de lectura y modificación. www-data es el usuario y grupo predeterminados para los servidores web en Ubuntu.

      Más adelante, habilitará el aprovisionamiento automático de certificados TLS desde Let´s Encrypt. Para ello, prepare un directorio para almacenar cualquier certificado TLS que Caddy obtendrá y otórguele las mismas reglas de propiedad que las del directorio /etc/caddy:

      • sudo mkdir /etc/ssl/caddy
      • sudo chown -R root:www-data /etc/ssl/caddy

      Debe ser posible para Caddy escribir certificados en este directorio y leer desde este para cifrar solicitudes. Por este motivo, modifique los permisos para el directorio /etc/ssl/caddy, de modo que solo sea accesible mediante root y www-data:

      • sudo chmod 0770 /etc/ssl/caddy

      A continuación, cree un directorio para almacenar los archivos que Caddy alojará:

      Luego, defina el propietario del directorio y agrúpelo en www-data:

      • sudo chown www-data:www-data /var/www

      Caddy lee la configuración desde un archivo denominado Caddyfile, almacenado en /etc/caddy. Cree el archivo en un disco. Para ello, ejecute lo siguiente:

      • sudo touch /etc/caddy/Caddyfile

      Para instalar el servicio Caddy, descargue el archivo de la unidad systemd del repositorio de Github de Caddy a /etc/systemd/system. Para ello, ejecute lo siguiente:

      • sudo sh -c 'curl https://raw.githubusercontent.com/caddyserver/caddy/master/dist/init/linux-systemd/caddy.service > /etc/systemd/system/caddy.service'

      Modifique los permisos del archivo de servicio para que solo pueda modificarlo su propietario, root:

      • sudo chmod 644 /etc/systemd/system/caddy.service

      Luego vuelva a cargar systemd para detectar el servicio de Caddy:

      • sudo systemctl daemon-reload

      Para verificar si systemd detectó el servicio de Caddy, ejecute systemctl status:

      • sudo systemctl status caddy

      Verá un resultado similar a lo siguiente:

      Output

      ● caddy.service - Caddy HTTP/2 web server Loaded: loaded (/etc/systemd/system/caddy.service; disabled; vendor preset: e Active: inactive (dead) Docs: https://caddyserver.com/docs

      Si ve este mismo resultado, significa que systemd detectó correctamente el servicio nuevo.

      Como parte del requisito previo de configuración inicial del servidor, habilitó ufw, Uncomplicated Firewall, y permitió conexiones SSH. Para que Caddy provea el tráfico de HTTP y HTTPS del servidor, deberá permitirlos en ufw; para ello, ejecute el siguiente comando:

      • sudo ufw allow proto tcp from any to any port 80,443

      El resultado será lo siguiente:

      Output

      Rule added Rule added (v6)

      Utilice ufw status para verificar si sus cambios funcionaron:

      Verá el siguiente resultado:

      Output

      Status: active To Action From -- ------ ---- OpenSSH ALLOW Anywhere 80,443/tcp ALLOW Anywhere OpenSSH (v6) ALLOW Anywhere (v6) 80,443/tcp (v6) ALLOW Anywhere (v6)

      De esta manera, finalizó su instalación de Caddy. Sin embargo, no está configurado para presentar nada. En el siguiente paso, configurará Caddy para acceder a archivos desde el directorio /var/www.

      Paso 3: Configurar Caddy

      En esta sección, escribirá la configuración básica de Caddy para acceder a archivos estáticos de su servidor.

      Para empezar, cree un archivo HTML básico en /var/www, llamado index.html:

      • sudo nano /var/www/index.html

      Añada las siguientes líneas:

      /var/www/index.html

      <!DOCTYPE html>
      <html>
      <head>
        <title>Hello from Caddy!</title>
      </head>
      <body>
        <h1 style="font-family: sans-serif">This page is being served via Caddy</h1>
      </body>
      </html>
      

      Cuando se observe en un navegador web, este archivo mostrará un encabezado con el texto This page is being served via Caddy. Guarde y cierre el archivo.

      Abra el archivo de configuración Caddyfile que creó anteriormente para editarlo:

      • sudo nano /etc/caddy/Caddyfile

      Añada las siguientes líneas:

      /etc/caddy/Caddyfile

      :80 {
        root /var/www
        gzip
      }
      

      Esta es una configuración de Caddy básica y establece que el puerto 80 de su servidor debe proporcionarse con los archivos de /var/www y debe comprimirse mediante gzip para reducir los tiempos de carga de la página por parte del cliente.

      En la mayoría de los casos, Caddy le permite personalizar más las directivas de configuración. Por ejemplo, puede limitar la compresión de gzip solo a archivos HTML y PHP y fijar el nivel de compresión en 6 (siendo 1 el más bajo y 9 el más alto) ampliando la directiva con llaves e indicando las subdirectivas abajo:

      /etc/caddy/Caddyfile

      :80 {
        root /var/www
        gzip {
            ext .html .htm .php
            level 6
        }
      }
      

      Cuando termine, guarde y cierre el archivo.

      Caddy tiene muchas directivas diferentes para muchos casos de uso. Por ejemplo, la directiva fastcgi podría ser útil para habilitar PHP. La directiva markdown se podría usar para convertir automáticamente archivos Markdown a HTML antes de presentarlos, lo cual sería útil para crear un simple blog.

      Para probar si todo funciona correctamente, inicie el servicio Caddy:

      • sudo systemctl start caddy

      A continuación, ejecute systemctl status​​​ para buscar información sobre el estado del servicio Caddy:

      • sudo systemctl status caddy

      Observará lo siguiente:

      Output

      ● caddy.service - Caddy HTTP/2 web server Loaded: loaded (/etc/systemd/system/caddy.service; disabled; vendor preset: enabled) Active: active (running) since Thu 2020-03-12 11:17:49 UTC; 11s ago Docs: https://caddyserver.com/docs Main PID: 3893 (caddy) Tasks: 7 (limit: 1152) CGroup: /system.slice/caddy.service └─3893 /usr/local/bin/caddy -log stdout -log-timestamps=false -agree=true -conf=/etc/caddy/Caddyfile -root=/var/tmp Mar 12 11:17:49 caddy-article-update systemd[1]: Started Caddy HTTP/2 web server. Mar 12 11:17:49 caddy-article-update caddy[3893]: [INFO] Caddy version: v1.0.5 Mar 12 11:17:49 caddy-article-update caddy[3893]: Activating privacy features... done. Mar 12 11:17:49 caddy-article-update caddy[3893]: Serving HTTP on port 80 Mar 12 11:17:49 caddy-article-update caddy[3893]: http:// Mar 12 11:17:49 caddy-article-update caddy[3893]: [INFO] Serving http:// Mar 12 11:17:49 caddy-article-update caddy[3893]: [INFO][cache:0xc00007a7d0] Started certificate maintenance routine Mar 12 11:17:49 caddy-article-update caddy[3893]: [WARNING] Sending telemetry (attempt 1): Post "https://telemetry.caddyserver.com/v1/update/6a8159c4-3427-42 Mar 12 11:17:57 caddy-article-update caddy[3893]: [WARNING] Sending telemetry (attempt 2): Post "https://telemetry.caddyserver.com/v1/update/6a8159c4-3427-42 ...

      Ahora podrá dirigirse el IP de su servidor en un navegador web. En la página web de muestra, se observará lo siguiente:

      Mensaje de Caddy

      Con esto, habrá configurado Caddy para acceder a archivos estáticos desde su servidor. En el siguiente paso, ampliará la funcionalidad de Caddy usando complementos.

      Paso 4: Usar complementos

      Los complementos ofrecen una alternativa para cambiar y ampliar el comportamiento de Caddy. Por lo general, ofrecen más directivas de configuración para que las aplique, según su caso de uso. En esta sección, agregará y usará complementos instalando el complemento minify, que elimina los espacios en blanco que están de más y organiza el código que se enviará al cliente, además de reducir la superficie y los tiempos de carga.

      El repositorio de GitHub del complemento minify es hacdias/caddy-minify.

      Diríjase al directorio con el código fuente que creó en el paso uno:

      Para agregar un complemento a Caddy, deberá importarlo en el archivo caddy.go que usó para compilar Caddy. Abra caddy.go​​​ para editarlo:

      Importe el complemento minify; para ello, agregue la línea resaltada, como se observa:

      ~/caddy/caddy.go

      package main
      
      import (
          "github.com/caddyserver/caddy/caddy/caddymain"
      
          _ "github.com/hacdias/caddy-minify"
      )
      
      func main() {
          // caddymain.EnableTelemetry = false
          caddymain.Run()
      }
      

      Guarde y cierre el archivo.

      Es posible que algunos complementos requieran algunas modificaciones simples. Asegúrese de leer la documentación de los que instale. Puede encontrar una lista de complementos populares en el panel izquierdo de la documentación de Caddy, dentro de la sección Plugins.

      Cada vez que agregue una configuración nueva, deberá volver a compilar Caddy. Esto se debe a que Go es un lenguaje de programación compilado; es decir, el código fuente se transforma en código máquina antes de la ejecución. Su cambio en la declaración de importación alteró el código fuente, pero no afectará el binario hasta que esté compilado.

      Use el comando go install para compilar Caddy:

      Al finalizar, mueva el binario generado a /usr/local/bin y configure permisos para el binario como lo hizo anteriormente. Debe realizar estos pasos cada vez que recopile Caddy para garantizar su funcionalidad y seguridad:

      • sudo mv $GOPATH/bin/caddy /usr/local/bin/
      • sudo chown root:root /usr/local/bin/caddy
      • sudo chmod 755 /usr/local/bin/caddy
      • sudo setcap 'cap_net_bind_service=+ep' /usr/local/bin/caddy

      Para comenzar a usar el complemento minify, deberá agregar la directiva minify a Caddyfile. Ábralo​​​ para editarlo:

      • sudo nano /etc/caddy/Caddyfile

      Para habilitar el complemento, agregue la siguiente línea al bloque de configuración:

      /etc/caddy/Caddyfile

      :80 {
        root /var/www
        gzip
        minify
      }
      

      Ahora, reinicie el servidor utilizando systemctl:

      • sudo systemctl restart caddy

      Caddy se encuentra en ejecución y minificará cualquier archivo que contenga, incluso el archivo index.html que creó anteriormente. Puede ver funcionar la minificación si busca el contenido de su dominio mediante curl:

      Verá el siguiente resultado: Observe que todos los espacios en blanco innecesarios se eliminarán, lo cual mostrará que el complemento minify funciona.

      Output

      <!doctype html><title>Hello from Caddy!</title><h1 style=font-family:sans-serif>This page is being served via Caddy</h1>

      En este paso, aprendió ampliar Caddy con complementos. A continuación, habilitará HTTPS instalando el complemento tls.dns.digitalocean.

      Paso 5: Habilitar TLS automático con Let’s Encrypt

      En esta sección, habilitará el aprovisionamiento y la renovación automáticos de certificados de Let’s Encrypt usando registros TXT DNS para la verificación.

      Para realizar la verificación mediante los registros TXT DNS, instalará un complemento para interactuar con la API de DigitalOcean, llamado tls.dns.digitalocean. El procedimiento de instalación es casi idéntico al que usó para instalar el complemento minify en el paso anterior. Por empezar, abra caddy.go:

      Agregue el repositorio del complemento a las importaciones:

      ~/caddy/caddy.go

      package main
      
      import (
          "github.com/caddyserver/caddy/caddy/caddymain"
      
          _ "github.com/hacdias/caddy-minify"
      
          _ "github.com/caddyserver/dnsproviders/digitalocean"
      )
      
      func main() {
          // caddymain.EnableTelemetry = false
          caddymain.Run()
      }
      

      Para compilarlo, ejecute lo siguiente:

      Asegúrese de detener Caddy a través de systemctl, luego termine de instalar el complemento copiando el binario de Caddy recién compilado y nuevamente configure la propiedad y los permisos:

      • sudo systemctl stop caddy
      • sudo mv $GOPATH/bin/caddy /usr/local/bin/
      • sudo chown root:root /usr/local/bin/caddy
      • sudo chmod 755 /usr/local/bin/caddy
      • sudo setcap 'cap_net_bind_service=+ep' /usr/local/bin/caddy

      A continuación, configure Caddy para trabajar con la API de DigitalOcean y configurar registros DNS. Caddy debe acceder a este token como variable de entorno para configurar el DNS de DigitalOcean, de modo que editará su archivo de unidad systemd.

      • sudo nano /etc/systemd/system/caddy.service

      Busque la línea que comienza con Environment= en la sección [Service]. Esta línea define las variables de entorno que se deben pasar al proceso de Caddy. Agregue un espacio al final de esta línea y luego agregue una variable DO_AUTH_TOKEN seguida del token que recién generó:

      /etc/systemd/system/caddy.service

      [Service]
      Restart=on-abnormal
      
      ; User and group the process will run as.
      User=www-data
      Group=www-data
      
      ; Letsencrypt-issued certificates will be written to this directory.
      Environment=CADDYPATH=/etc/ssl/caddy DO_AUTH_TOKEN=your_token_here
      

      Guarde y cierre este archivo, y luego vuelva a cargar el demonio systemd como lo hizo anteriormente para asegurarse de que se haya actualizado la configuración:

      • sudo systemctl daemon-reload

      Ejecute systemctl status para verificar que las modificaciones de la configuración sean correctas:

      • sudo systemctl status caddy

      El resultado debería tener el siguiente aspecto:

      Output

      ● caddy.service - Caddy HTTP/2 web server Loaded: loaded (/etc/systemd/system/caddy.service; disabled; vendor preset: enabled) Active: inactive (dead) Docs: https://caddyserver.com/docs ...

      Deberá realizar algunas modificaciones simples a Caddyfile. Por ello, ábralo para editarlo:

      • sudo nano /etc/caddy/Caddyfile

      Agregue las líneas resaltadas a Caddyfile; asegúrese de sustituir your_domain por su dominio (en lugar de solo el puerto :80) y agregar un comentario en gzip:

      /etc/caddy/Caddyfile

      your_domain {
        root /var/www
        #gzip
        minify
        tls {
            dns digitalocean
        }
      }
      

      Usar un dominio en vez de solo un puerto para el nombre de host hará que Caddy presente solicitudes en HTTPS. La directiva tls configura el comportamiento de Caddy cuando se utiliza TLS y la subdirectiva dns especifica que Caddy debe usar el sistema DNS-01 en vez de HTTP-01.

      Con esto, su sitio web estará listo para implementarse. Inicie Caddy con systemctl y luego habilítelo para que se ejecute en el arranque:

      • sudo systemctl start caddy
      • sudo systemctl enable caddy

      Si busca su dominio, automáticamente accederá a HTTPS y se observará el mismo mensaje.

      De esta manera, finalizó y protegió la instalación de Caddy. Podrá seguir personalizándolo según el uso requerido.

      Si desea actualizar Caddy cuando haya una versión nueva, deberá actualizar el archivo go.mod (almacenado en el mismo directorio) que se verá de la siguiente manera:

      ~/caddy/go.mod

      module caddy
      
      go 1.14
      
      require (
              github.com/caddyserver/caddy v1.0.5
              github.com/caddyserver/dnsproviders v0.4.0
              github.com/hacdias/caddy-minify v1.0.2
      )
      

      La parte resaltada es la versión de Caddy que usa. Cuando se lance una versión nueva en Github (ver la página de etiquetas de lanzamientos), podrá reemplazar la actual de go.mod por esta y compilar Caddy conforme a los dos primeros pasos. Puede hacer lo mismo para todos los complementos importados.

      Conclusión

      Ahora cuenta con Caddy instalado y configurado en su servidor, el cual presenta páginas estáticas en el dominio deseado, con protección a través de certificados TLS de Let´s Encrypt.

      Un buen paso siguiente sería encontrar la manera de que lo notifiquen cuando se lancen versiones nuevas de Caddy. Por ejemplo, podría usar las fuentes de Atom para lanzamientos de Caddy o un servicio especializado como dependencies.io.

      Puede consultar la documentación de Caddy si desea más información o si desea configurar Caddy.



      Source link

      Cómo crear y presentar imágenes WebP para acelerar su sitio web


      El autor seleccionó la Apache Software Foundation para recibir una donación como parte del programa Write for DOnations.

      Introducción

      WebP es un formato de imagen abierto desarrollado por Google en 2010 que se basa en el formato de video VP8. Desde entonces, el número de sitios web y aplicaciones móviles que usan el formato WebP ha aumentado a un ritmo rápido. Tanto Google Chrome como Opera admiten el formato WebP de forma nativa, y ya que estos navegadores son responsables de, aproximadamente, el 74 % del tráfico de Internet, los usuarios pueden acceder más rápido a los sitios web si utilizan imágenes WebP. También se planea implementar WebP en Firefox.

      El formato WebP admite la compresión de imágenes con y sin pérdida de datos, incluso animación. Su principal ventaja sobre otros formatos de imagen usados en la web es su tamaño de archivo mucho menor, lo que hace que las páginas web se carguen más rápido y reduce el uso de ancho de banda. Usar imágenes WebP puede provocar aumentos considerables en la velocidad de página. Si su aplicación o sitio web está experimentando problemas de rendimiento o un aumento de tráfico, convertir sus imágenes puede ayudar a optimizar el rendimiento de página.

      En este tutorial, utilizará la herramienta de línea de comandos cwebp para convertir imágenes a formato WebP, creando scripts que examinarán y convertirán imágenes en un directorio específico. Por último, explorará dos formas de presentar imágenes WebP a sus visitantes.

      Requisitos previos

      Trabajar con imágenes WebP no requiere ninguna distribución concreta, pero demostraremos cómo trabajar con software pertinente en Ubuntu 16.04 y CentOS 7. Para seguir este tutorial necesitará lo siguiente:

      • Un servidor configurado con un usuario sudo no root. Para configurar un servidor Ubuntu 16.04, puede seguir nuestra Guía de configuración inicial del servidor Ubuntu 16.04. Si desea usar CentOS, puede configurar un servidor CentOS 7 con nuestro Tutorial de configuración inicial del servidor con CentOS 7.

      • Apache instalado en su servidor. Si está usando Ubuntu, puede seguir el paso uno de Cómo instalar la pila de Linux, Apache, MySQL, PHP (LAMP) en Ubuntu 16.04. Si está usando CentOS, deberá seguir el paso uno de Cómo instalar la pila de Linux, Apache, MySQL, PHP (LAMP) en CentOS 7. Asegúrese de configurar los ajustes de su firewall para que permita tráfico HTTP y HTTPS.

      • mod_rewrite instalado en su servidor. Si está usando Ubuntu, puede seguir nuestra guía Cómo reescribir URL con mod_rewrite para Apache en Ubuntu 16.04. En CentOS7, mod_rewrite está instalado y activado por defecto.

      Paso 1: instalación de cwebp y preparación del directorio de imágenes

      En esta sección, instalaremos el software para convertir imágenes y crearemos un directorio con imágenes como prueba.

      En Ubuntu 16.04, puede instalar cwebp, una herramienta que comprime imágenes al formato .webp al escribir lo siguiente:

      • sudo apt-get update
      • sudo apt-get install webp

      En CentOS 7, escriba lo siguiente:

      • sudo yum install libwebp-tools

      Para crear un nuevo directorio de imágenes llamado webp en el root web de Apache (ubicado por defecto en /var/www/html), escriba lo siguiente:

      • sudo mkdir /var/www/html/webp

      Cambie la propiedad de este directorio a su usuario no root sammy:

      • sudo chown sammy: /var/www/html/webp

      Para probar los comandos, puede descargar imágenes gratuitas JPEG y PNG usando wget. Esta herramienta está instalada por defecto en Ubuntu 16.04; si está usando CentOS 7, puede instalarla escribiendo lo siguiente:

      A continuación, descargue las imágenes de prueba usando los siguientes comandos:

      • wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
      • wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
      • wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

      Nota: estas imágenes están disponibles para su uso y redistribución bajo la licencia Atribución-CompartirIgual y la Certificación de dominio público de Creative Commons.

      La mayor parte de su trabajo en el siguiente paso será en el directorio /var/www/html/webp, que puede mover escribiendo lo siguiente:

      Con las imágenes de prueba en su sitio, y el servidor web de Apache, mod_rewrite, y cwebp instalados, está listo para pasar a convertir imágenes.

      Paso 2: compresión de archivos de imagen con cwebp

      Presentar imágenes .webp a los visitantes de un sitio requiere archivos de imagen en versión .webp. En este paso, convertirá imágenes JPEG y PNG al formato .webp usando cwebp. La sintaxis *general *del comando tiene este aspecto:

      • cwebp image.jpg -o image.webp

      La opción -o especifica la ruta al archivo WebP.

      Ya que aún está en el directorio /var/www/html/webp, puede ejecutar el siguiente comando para convertir image1.jpg a image1.webp e image2.jpg a image2.webp:

      • cwebp -q 100 image1.jpg -o image1.webp
      • cwebp -q 100 image2.jpg -o image2.webp

      Establecer el factor de calidad -q en 100 retiene el 100 % de la calidad de la imagen; si no se especifica, el valor predeterminado es 75.

      A continuación, inspeccione el tamaño de las imágenes JPEG y WebP usando el comando ls. La opción -l mostrará el listado de formato largo, que incluye el tamaño del archivo, y la opción -h se asegurará de que ls imprima tamaños legibles para el ser humano:

      • ls -lh image1.jpg image1.webp image2.jpg image2.webp

      Output

      -rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg -rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp -rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg -rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

      La salida del comando ls muestra que el tamaño de image1.jpg es 7,4 M, mientras que el tamaño de image1.webp es de 3,9 M. Lo mismo se aplica a image2.jpg (16 M) e image2.webp (7 M). El tamaño de estos archivos es de casi la mitad de su tamaño original.

      Para guardar los datos de las imágenes completos y originales durante la compresión, puede usar la opción -lossless en vez de -q. Esta es la mejor opción para mantener la calidad de las imágenes PNG. Para convertir la imagen PNG descargada del paso 1, escriba lo siguiente:

      • cwebp -lossless logo.png -o https://www.digitalocean.com/logo.webp

      El siguiente comando muestra que el tamaño de la imagen WebP (60 K) sin pérdida es de, aproximadamente, la mitad del tamaño de la imagen PNG original (116 K):

      • ls -lh logo.png https://www.digitalocean.com/logo.webp

      Output

      -rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png -rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 https://www.digitalocean.com/logo.webp

      Las imágenes WebP convertidas en el directorio /var/www/html/webp son, aproximadamente, un 50 % menores que sus equivalentes en JPEG y PNG. En la práctica, las tasas de compresión pueden diferir dependiendo de ciertos factores: la tasa de compresión de la imagen original, el formato de archivo, el tipo de conversión (con o sin pérdida), el porcentaje de calidad y su sistema operativo. A medida que convierte más imágenes, puede ver variaciones en las tasas de conversión relacionadas con estos factores.

      Paso 3: conversión de imágenes JPEG y PNG en un directorio

      Escribir una secuencia de comandos simplificará el proceso de conversión al eliminar el trabajo de la conversión manual. Ahora, escribiremos una secuencia de comandos de conversión que encuentre los archivos JPEG y los convierta a formato WebP con una calidad del 90 %, y que también convierta los archivos PNG a imágenes WebP sin pérdida.

      Usando nano o su editor favorito, cree la secuencia de comandos webp-convert.sh en el directorio principal de su usuario.

      La primera línea de la secuencia de comandos tendrá este aspecto:

      ~/webp-convert.sh

      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" )
      

      Esta línea tiene los siguientes componentes:

      • find: este comando buscará archivos en un directorio especificado.
      • $1: este parámetro de posición especifica la ruta del directorio de imágenes, tomada de la línea de comandos. En última instancia, hace que la ubicación del directorio sea menos dependiente de la ubicación de la secuencia de comandos.
      • -type f: esta opción le indica a fin d que busque solo archivos regulares.
      • -iname: esta prueba compara los nombres de archivo con un patrón especificado. La prueba -iname, que no distingue entre mayúsculas y minúsculas, le indica a find que busque cualquier nombre de archivo que termine con .jpg (*.jpg) o .jpeg (*.jpeg).
      • -o: este operador lógico da instrucciones al comando find para que enumere los archivos que coinciden con la primera prueba -iname (-iname “*.jpg”) o la segunda (-iname "*.jpeg").
      • (): los paréntesis alrededor de estas pruebas, junto con el operador -and, garantizan que la primera prueba (por ejemplo, -type f) siempre se ejecute.

      La segunda línea de la secuencia de comandos convertirá las imágenes a WebP usando el parámetro -exec. La sintaxis general de este parámetro es -exec command {} ;. La cadena {} se sustituye con cada archivo que el comando procesa una iteración, mientras que ; le indica a find dónde finaliza el comando:

      ~/webp-convert.sh

      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c 'commands' {} ;
      

      En este caso, el parámetro -exec necesitará más de un comando para buscar y convertir imágenes:

      • bash: este comando ejecutará una pequeña secuencia de comandos que creará la versión .webp del archivo si no existe. Esta secuencia de comandos se pasará a bash como una cadena gracias a la opción -c.
      • 'commands': este marcador de posición es la secuencia de comandos que creará versiones .webp de sus archivos.

      La secuencia de comandos dentro de 'commands' hará lo siguiente:

      • Crear una variable webp_path.
      • Probar si la versión .webp del archivo existe o no.
      • Crear el archivo si no existe.

      La secuencia de comandos más pequeña tiene este aspecto:

      ~/webp-convert.sh

      ...
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;
      

      Los elementos de esta secuencia de comandos más pequeña incluyen los siguientes:

      Con esta secuencia de comandos más pequeña en lugar del marcador de posición 'commands', la secuencia de comandos completa para convertir imágenes JPEG, ahora, tendrá este aspecto:

      ~/webp-convert.sh

      # converting JPEG images
      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;' {} ;
      

      Para convertir imágenes PNG a WebP, vamos a adoptar el mismo enfoque, con dos diferencias. La primera es que el patrón -iname en el comando find será "*.png". La segunda, que el comando de conversión usará la opción -lossless en vez de la opción de calidad -q.

      La secuencia de comandos completa tendrá este aspecto:

      ~/webp-convert.sh

      #!/bin/bash
      
      # converting JPEG images
      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;' {} ;
      
      # converting PNG images
      find $1 -type f -and -iname "*.png" 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then 
        cwebp -quiet -lossless "$0" -o "$webp_path";
      fi;' {} ;
      

      Guarde el archivo y salga del editor.

      A continuación, vamos a poner la secuencia de comandos webp-convert.sh en práctica usando los archivos del directorio /var/www/html/webp. Asegúrese de que el archivo de la secuencia de comandos sea ejecutable con el siguiente comando:

      • chmod a+x ~/webp-convert.sh

      Ejecute la secuencia de comandos en el directorio de imágenes:

      • ./webp-convert.sh /var/www/html/webp

      ¡No ha pasado nada! Eso es porque ya convertimos estas imágenes en el paso 2. A continuación, la secuencia de comandos webp-convert convertirá las imágenes cuando agreguemos nuevos archivos o eliminemos las versiones .webp. Para ver cómo funciona esto, elimine los archivos .webp que creamos en el paso 2:

      • rm /var/www/html/webp/*.webp

      Tras eliminar todas las imágenes .webp, ejecute la secuencia de comandos de nuevo para asegurarse de que funcione:

      • ./webp-convert.sh /var/www/html/webp

      El comando ls confirmará que la secuencia de comandos convirtió las imágenes correctamente:

      • ls -lh /var/www/html/webp

      Output

      -rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg -rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp -rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg -rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp -rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png -rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 https://www.digitalocean.com/logo.webp

      La secuencia de comandos de este paso es la base para utilizar imágenes WebP en su sitio web, ya que necesitará una versión funcional de todas las imágenes en formato WebP para presentarlas a los visitantes. El siguiente paso cubrirá cómo automatizar la conversión de nuevas imágenes.

      Paso 4: inspección de archivos de imagen en un directorio

      En este paso, crearemos una nueva secuencia de comandos para examinar nuestro directorio de imágenes en busca de cambios y convertir, automáticamente, las imágenes recién creadas.

      Crear una secuencia que examine nuestro directorio de imágenes puede abordar ciertos problemas con la secuencia de comandos webp-convert.sh tal como está escrita. Por ejemplo, esta secuencia de comandos no identificará si cambiamos el nombre a una imagen. Si tuviésemos una imagen llamada foo.jpg, ejecutásemos webp-convert.sh, cambiásemos ese archivo a bar.jpg y ejecutásemos webp-convert.sh de nuevo, tendríamos archivos .webp duplicados (foo.webp y bar.webp). Para resolver este problema, y evitar ejecutar la secuencia de comandos manualmente, añadiremos monitores a otra secuencia de comandos. Los monitores examinan archivos o directorios específicos en busca de cambios y ejecutan comandos en respuesta a ellos.

      El comando inotifywait establecerá monitores en nuestra secuencia de comandos. Este comando es parte del paquete inotify-tools, un conjunto de herramientas de línea de comandos que proporcionan una interfaz sencilla para el subsistema de núcleo de inotify. Para instalarlo en Ubuntu 16.04, escriba lo siguiente:

      • sudo apt-get install inotify-tools

      Con CentOS 7, el paquete inotify-tools está disponible en el repositorio EPEL. Instale el repositorio EPEL y el paquete inotify-tools usando los siguientes comandos:

      • sudo yum install epel-release
      • sudo yum install inotify-tools

      A continuación, cree la secuencia de comandos webp-watchers.sh en el directorio principal de su usuario usando nano:

      La primera línea de la secuencia de comandos tendrá este aspecto:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1
      

      Esta línea incluye los siguientes elementos:

      • inotifywait: este comando vigila si se producen cambios en un directorio concreto.
      • -q: esta opción indicará a inotifywait que permanezca en modo silencioso y no produzca muchos resultados.
      • -m: esta opción indicará a inotifywait que se ejecute indefinidamente y no salga tras recibir un único evento.
      • -r: esta opción establecerá monitores de forma recursiva, observando un directorio específico y todos sus subdirectorios.
      • -format: esta opción indicará a inotifywait que monitoree los cambios usando el nombre del evento seguido de la ruta del archivo. Los eventos que queremos monitorear son close_write (que se activa cuando un archivo se crea y se escribe por completo en el disco), moved_from y moved_to (que se activan cuando se mueve un archivo), y delete (que se activa cuando se elimina un archivo).
      • $1: este parámetro de posición contiene la ruta de los archivos cambiados.

      A continuación, vamos a añadir un comando grep para establecer si nuestros archivos son imágenes JPEG o PNG o no. La opción -i indicará a grep que ignore el uso de mayúsculas y minúsculas, -E especificará que grep deberá usar expresiones regulares extendidas, y -line-buffered hará que grep pase las líneas coincidentes a un bucle while:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '.(jpe?g|png)$' --line-buffered
      

      A continuación, crearemos un bucle while con el comando read; readprocesará el evento que detectó inotifywait, asignándolo a una variable llamada $operation, y asignará la ruta del archivo procesado a una variable llamada $path:

      ~/webp-watchers.sh

      ...
      | while read operation path; do
        # commands
      done;
      

      Vamos a combinar este bucle con el resto de nuestra secuencia de comandos:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
      | grep -i -E '.(jpe?g|png)$' --line-buffered 
      | while read operation path; do
        # commands
      done;
      

      Una vez que el bucle while haya comprobado el evento, los comandos dentro del bucle realizarán las siguientes acciones, dependiendo del resultado:

      • Crear un nuevo archivo WebP, si se creó un nuevo archivo de imagen o se movió al directorio de destino.
      • Eliminar el archivo WebP, si el archivo de imagen asociado se eliminó o se movió del directorio de destino.

      Hay tres secciones principales dentro del bucle. Una variable llamada webp_path mantendrá la ruta a la versión .webp de la imagen referente:

      ~/webp-watchers.sh

      ...
      webp_path="$(sed 's/.[^.]*$/.webp/' <<< "$path")";
      

      A continuación, la secuencia de comandos probará qué evento se produjo:

      ~/webp-watchers.sh

      ...
      if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
        # commands to be executed if the file is moved or deleted
      elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
        # commands to be executed if a new file is created
      fi;
      

      Si el archivo se movió o eliminó, la secuencia de comandos comprobará si hay una versión .webp. Si es así, la secuencia de comandos la eliminará usando rm:

      ~/webp-watchers.sh

      ...
      if [ -f "$webp_path" ]; then
        $(rm -f "$webp_path");
      fi;
      

      Para los archivos recién creados, la compresión se realizará como sigue:

      • Si el archivo equivalente es una imagen PNG, la secuencia de comandos usará compresión sin pérdida.
      • Si no es así, la secuencia de comandos usará una compresión con pérdida con la opción -quality.

      Vamos a añadir los comando cwebp que harán este trabajo en la secuencia de comandos:

      ~/webp-watchers.sh

      ...
      if [ $(grep -i '.png$' <<< "$path") ]; then
        $(cwebp -quiet -lossless "$path" -o "$webp_path");
      else
        $(cwebp -quiet -q 90 "$path" -o "$webp_path");
      fi;
      

      Completo, el archivo webp-watchers.sh tendrá este aspecto:

      ~/webp-watchers.sh

      #!/bin/bash
      echo "Setting up watches.";
      
      # watch for any created, moved, or deleted image files
      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
      | grep -i -E '.(jpe?g|png)$' --line-buffered 
      | while read operation path; do
        webp_path="$(sed 's/.[^.]*$/.webp/' <<< "$path")";
        if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
          if [ -f "$webp_path" ]; then
            $(rm -f "$webp_path");
          fi;
        elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
           if [ $(grep -i '.png$' <<< "$path") ]; then
             $(cwebp -quiet -lossless "$path" -o "$webp_path");
           else
             $(cwebp -quiet -q 90 "$path" -o "$webp_path");
           fi;
        fi;
      done;
      

      Guarde y cierre el archivo. No olvide hacer que sea ejecutable:

      • chmod a+x ~/webp-watchers.sh

      Vamos a ejecutar esta secuencia de comandos en el directorio /var/www/html/webp en segundo plano usando &. También vamos a redirigir el resultado estándar y el error estándar a un ~/output.log, para almacenar el resultado en una ubicación fácilmente disponible:

      • ./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

      Hasta ahora, convirtió los archivos JPEG y PNG en /var/www/html/webp al formato WebP, y estableció monitores para hacer este trabajo usando la secuencia de comandos webp-watchers.sh. Ahora, es momento de explorar las opciones para presentar imágenes WebP a los visitantes de su sitio web.

      Paso 5: presentación de imágenes WebP a los visitantes usando elementos HTML

      En este paso, explicaremos cómo presentar imágenes WebP con elementos HTML. Ahora, debería haber versiones -webp de cada una de las imágenes de prueba JPEG y PNG en el directorio /var/www/html/webp. Ya podemos presentarlas en los navegadores compatibles usando elementos HTML5 (<picture>) o el módulo mod_rewrite de Apache. Usaremos elementos HTML en este paso.

      El elemento <picture> le permite incluir imágenes directamente en sus páginas web y definir más de una fuente de imagen. Si su navegador es compatible con el formato WebP, descargará la versión .webp del archivo en vez de la original, lo que hará que las páginas web se presenten más rápido. Cabe mencionar que el elemento <picture> se admite bien en los navegadores modernos compatibles con el formato WebP.

      El elemento <picture> es un contenedor con <source> y <image> que apuntan a archivos concretos. Si lo usamos <source> para apuntar a una imagen .webp, el navegador determinará si puede manejarla; de lo contrario, volverá al archivo de imagen especificado en el atributo src del elemento <picture>.

      Vamos a usar el archivo logo.pngde nuestro directorio /var/www/html/webp, que convertimos a https://www.digitalocean.com/logo.webp, como en el ejemplo con <source>. Podemos usar el siguiente código HTML para visualizar https://www.digitalocean.com/logo.webp en cualquier navegador que sea compatible con el formato WebP, y logo.png en cualquier navegador que no sea compatible con WebP o con el elemento<picture>.

      Cree un archivo HTML en /var/www/html/webp/picture.html:

      • nano /var/www/html/webp/picture.html

      Añada el siguiente código a la página web para visualizar https://www.digitalocean.com/logo.webp en los navegadores compatibles usando el elemento<picture>:

      /var/www/html/webp/picture.html

      <picture>
        <source  type="image/webp">
        <img src="https://www.digitalocean.com/logo.png" alt="Site Logo">
      </picture>
      

      Guarde y cierre el archivo.

      Para comprobar que todo funcione correctamente, navegue a http://your_server_ip/webp/picture.html. Debería ver la imagen PNG de prueba.

      Ahora que sabe cómo presentar imágenes .webp directamente desde código HTML, vamos a ver cómo automatizar este proceso usando el módulo mod_rewrite de Apache.

      Paso 6: presentación de imágenes WebP usando mod_rewrite

      Si queremos optimizar la velocidad de nuestro sitio, pero tenemos un gran número de páginas o poco tiempo para editar el código HTML, el módulo mod_rewrite de Apache puede ayudarnos a automatizar el proceso de presentar imágenes .webp en los navegadores compatibles.

      Primero, cree un archivo .htaccess en el directorio /var/www/html/webp usando el siguiente comando:

      • nano /var/www/html/webp/.htaccess

      La directiva ifModule probará si mod_rewrite está disponible; si es así, puede desactivarse usando RewriteEngine On. Añada estas directivas a .htaccess::

      /var/www/html/webp/.htaccess

      <ifModule mod_rewrite.c>
        RewriteEngine On 
        # further directives
      </IfModule>
      

      El servidor web realizará varias pruebas para establecer cuándo presentar las imágenes .webp al usuario. Cuando un navegador realiza una solicitud, incluye un encabezado para indicar al servidor qué es capaz de manejar. En el caso de WebP, el navegador enviará un encabezado Accept que contiene image/webp. Comprobaremos si el navegador envió ese encabezado usando RewriteCond, que especifica el criterio que debería coincidir para realizar RewriteRule:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{HTTP_ACCEPT} image/webp
      

      Todo debería filtrarse, excepto las imágenes JPEG y PNG. Usando de nuevo RewriteCond, añada una expresión regular (similar a la que usamos en las secciones anteriores) para que se corresponda con la URI solicitada:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$ 
      

      El modificador (?i) hará que la coincidencia no distinga entre mayúsculas y minúsculas.

      Para comprobar si existe la versión .webp del archivo, utilice RewriteCond de nuevo como sigue:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{DOCUMENT_ROOT}%1.webp -f
      

      Por último, si se cumplieron todas las condiciones anteriores, RewriteRule redirigirá el archivo JPEG o PNG solicitado a su archivo WebP asociado. Tenga en cuenta que se redirigirá usando el marcador -R, en vez de reescribir la URI. La diferencia entre reescribir y redirigir es que el servidor presentará la URI reescrita sin informar al navegador. Por ejemplo, la URI mostrará que la extensión del archivo es .png, pero, en verdad, será un archivo .webp. Añada RewriteRule al archivo:

      /var/www/html/webp/.htaccess

      ...
      RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R] 
      

      En este momento, la sección mod_rewrite del archivo .htaccess está completa. Pero, ¿qué sucederá si hay un servidor de caché entre su servidor y el cliente? Podría presentar la versión equivocada al usuario final. Por eso, es recomendable comprobar si mod_headers está habilitado, para enviar el encabezado Vary: Accept. El encabezado Vary indica a los servidores de caché (como los servidores proxy), que el tipo de contenido del documento varía dependiendo de las capacidades del navegador que solicita el documento. Además, la respuesta se generará según el encabezado Accept de la solicitud. Una solicitud con un encabezado Accept diferente puede recibir una respuesta distinta. Este encabezado es importante porque impide que las imágenes WebP en caché se presenten en navegadores no compatibles.

      /var/www/html/webp/.htaccess

      ...
      <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
      </IfModule>
      

      Por último, al final del archivo .htaccess, establezca el tipo MIME de las imágenes .webp en image/webp usando la directiva AddType. Esto presentará las imágenes usando el tipo MIME adecuado:

      /var/www/html/webp/.htaccess

      ...
      AddType image/webp .webp
      

      Esta es la versión final de nuestro archivo .htaccess:

      /var/www/html/webp/.htaccess

      <ifModule mod_rewrite.c>
        RewriteEngine On 
        RewriteCond %{HTTP_ACCEPT} image/webp
        RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$ 
        RewriteCond %{DOCUMENT_ROOT}%1.webp -f
        RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R] 
      </IfModule>
      
      <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
      </IfModule>
      
      AddType image/webp .webp
      

      Nota: puede fusionar este .htaccess con otro archivo .htaccess, de haberlo. Si está usando WordPress, por ejemplo, debería copiar este archivo .htaccess y pegarlo en la parte superior del archivo existente.

      Vamos a poner en práctica lo que hicimos en este paso. Si siguió las instrucciones de los pasos anteriores, debería tener las imágenes logo.png y https://www.digitalocean.com/logo.webpen /var/www/html/webp. Vamos a usar una sencilla etiqueta para incluir logo.png en nuestra página web. Cree un nuevo archivo HTML para probar la configuración:

      • nano /var/www/html/webp/img.html

      Introduzca el siguiente código HTML en el archivo:

      /var/www/html/webp/img.html

      <img src="https://www.digitalocean.com/logo.png" alt="Site Logo">
      

      Guarde y cierre el archivo.

      Cuando visite la página web usando Chrome en http://your_server_ip/webp/img.html, notará que la imagen presentada es la versión .webp (intente abrir la imagen en una nueva pestaña). Si utiliza Firefox, obtendrá una imagen .png automáticamente.

      Conclusión

      En este tutorial, cubrimos técnicas básicas para trabajar con imágenes WebP. Explicamos cómo usar cwebp para convertir archivos, así como dos opciones para presentar estas imágenes a los usuarios: el elemento de HTML5 <picture> y mod_rewrite de Apache.

      Para personalizar las secuencias de comandos de este tutorial, puede consultar algunos de los siguientes recursos:

      • Para obtener más información sobre las características del formato WebP y cómo usar las herramientas de conversión, consulte la documentación de WebP.
      • Para conocer más detalles sobre el uso del elemento<picture>, consulte su documentación en MDN.
      • Para entender plenamente cómo usar mod_rewrite, consulte su documentación.

      Usar el formato WebP para sus imágenes reducirá considerablemente el tamaño de los archivos. Esto puede reducir el uso de ancho de banda y hacer que las páginas se carguen más rápido, sobre todo si su sitio web utiliza muchas imágenes.



      Source link