One place for hosting & domains

      presentar

      Cómo presentar aplicaciones de Flask con Gunicorn y Nginx en Ubuntu 20.04


      Introducción

      A través de esta guía, creará una aplicación de Python utilizando el microframework de Flask en Ubuntu 20.04. En la mayor parte de este artículo se abordarán la configuración del servidor de la aplicación Gunicorn y la forma de iniciar la aplicación y configurar Nginx para que funcione como un proxy inverso de cliente.

      Requisitos previos

      Antes de comenzar con esta guía, deberá contar con lo siguiente:

      • Un servidor con Ubuntu 20.04 instalado y un usuario no root con privilegios sudo. Siga nuestra guía de configuración inicial para servidores a modo de orientación.
      • Nginx instalado conforme a los pasos 1 y 2 de Cómo instalar Nginx en Ubuntu 20.04.
      • Un nombre de dominio configurado para que apunte a su servidor. Puede adquirir uno en Namecheap u obtener uno de forma gratuita en Freenom. Puede aprender a apuntar dominios a DigitalOcean siguiendo la documentación sobre dominios y DNS pertinente. Asegúrese de crear los siguientes registros DNS:

        • Un registro A con your_domain orientado a la dirección IP pública de su servidor.
        • Un registro A con www.your_domain orientado a la dirección IP pública de su servidor.
      • Conocimientos sobre la especificación WSGI, que el servidor de Gunicorn usará para comunicarse con su aplicación Flask. En esta discusión se abarca WSGI de forma más deallada.

      Paso 1: Instalar los componentes desde los repositorios de Ubuntu

      Nuestro primer paso será instalar todo lo que necesitamos desde los repositorios de Ubuntu. Esto incluye pip, el administrador de paquetes de Python, que gestionará nuestros componentes de Python. También obtendremos los archivos de desarrollo de Python necesarios para crear algunos de los componentes de Gunicorn.

      Primero, actualizaremos el índice de paquetes locales e instalaremos los paquetes que nos permitirán crear nuestro entorno de Python. Entre ellos está phyton3-pip, junto con paquetes y herramientas de desarrollo adicionales que se necesitan para un entorno de programación sólido:

      • sudo apt update
      • sudo apt install python3-pip python3-dev build-essential libssl-dev libffi-dev python3-setuptools

      Una vez implementados estos paquetes, crearemos un entorno virtual para nuestro proyecto.

      Paso 2: Crear un entorno virtual de Python

      A continuación, configuraremos un entorno virtual para aislar nuestra aplicación de Flask de los otros archivos de Python del sistema.

      Comience instalando el paquete python3-venv, que instalará el módulo venv:

      • sudo apt install python3-venv

      Luego, crearemos un directorio principal para nuestro proyecto de Flask. Después de crearlo, posiciónese en él:

      • mkdir ~/myproject
      • cd ~/myproject

      Cree un entorno virtual para almacenar los requisitos de Python de su proyecto de Flask escribiendo lo siguiente:

      • python3 -m venv myprojectenv

      Con esto se instalará una copia local de Python y pip en un directorio llamado myprojectenv dentro del directorio de su proyecto.

      Antes de instalar aplicaciones dentro del entorno virtual, deberá activarlo. Hágalo escribiendo lo siguiente:

      • source myprojectenv/bin/activate

      Su mensaje cambiará para indicar que ahora realiza operaciones dentro del entorno virtual. Se parecerá a esto: (myprojectenv)user@host:~/myproject$.

      Paso 3: Configurar una aplicación de Flask

      Ahora que se encuentra en su entorno virtual, podrá instalar Flask y Gunicorn y comenzar a diseñar su aplicación.

      Primero, instalaremos wheel con la instancia local de pip para asegurarnos de que nuestros paquetes se instalen aunque falten archivos de wheel:

      Nota


      Independientemente de la versión de Phyton que use, cuando se active el entorno virtual deberá utilizar el comando pip (no pip3).

      A continuación, instalaremos Flask y Gunicorn:

      • pip install gunicorn flask

      Creación de una aplicación de ejemplo

      Ahora que dispone de Flask, puede crear una aplicación sencilla. Flask es un microframework. No cuenta con muchas de las herramientas que podrían incluirse en frameworks con más características y existe sobre todo como un módulo que puede importar a sus proyectos para que pueda inicializar una aplicación web.

      Aunque la complejidad podría ser mayor, crearemos nuestra app de Flask en un único archivo, llamado myproject.py:

      • nano ~/myproject/myproject.py

      El código de aplicación residirá en este archivo. Importará Flask y creará una instancia de un objeto de Flask. Puede utilizarlo para definir las funciones que deberían ejecutarse cuando se solicita una ruta específica:

      ~/myproject/myproject.py

      from flask import Flask
      app = Flask(__name__)
      
      @app.route("/")
      def hello():
          return "<h1 style="color:blue">Hello There!</h1>"
      
      if __name__ == "__main__":
          app.run(host="0.0.0.0")
      

      Esto define básicamente el contenido que se presentará al acceder al dominio root. Guarde y cierre el archivo cuando termine.

      Si siguió la guía de configuración inicial para servidores, debería tener activado un firewall UFW. Para probar la aplicación, debe permitir el acceso al puerto 5000:

      Ahora podrá probar su aplicación de Flask escribiendo lo siguiente:

      Verá un resultado como el siguiente, en el cual se incluirá una advertencia útil que le recordará no utilizar esta configuración de servidor en la producción:

      Output

      * Serving Flask app "myproject" (lazy loading) * Environment: production WARNING: Do not use the development server in a production environment. Use a production WSGI server instead. * Debug mode: off * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)

      Agregue :5000 al final de la dirección IP de su servidor en su navegador web y visítela:

      http://your_server_ip:5000
      

      Debería ver algo como esto:

      Aplicación de ejemplo de Flask

      Cuanto termine, pulse CTRL-C en la ventana de su terminal para detener el servidor de desarrollo Flask.

      Creación de un punto de entrada de WSGI

      A continuación, crearemos un archivo que servirá como punto de entrada para nuestra aplicación. Esto indicará a nuestro servidor de Gunicorn cómo interactuar con la aplicación.

      Llamemos al archivo wsgi.py:

      En él, importaremos la instancia de Flask desde nuestra aplicación y luego la ejecutaremos:

      ~/myproject/wsgi.py

      from myproject import app
      
      if __name__ == "__main__":
          app.run()
      

      Guarde y cierre el archivo cuando termine.

      Paso 4: Configurar Gunicorn

      Su aplicación quedará, así, escrita con un punto de entrada establecido. Ahora, podemos continuar con la configuración de Gunicorn.

      Antes de continuar, debe comprobar que Gunicorn pueda proveer correctamente la aplicación.

      Podemos hacerlo con solo pasarle el nombre de nuestro punto de entrada. Se construye como el nombre del módulo (menos la extensión .py) más el nombre del elemento invocable dentro de la aplicación. En nuestro caso, es wsgi:app.

      También especificaremos la interfaz y el puerto que se vinculará para que la aplicación se inicie en una interfaz disponible de forma pública:

      • cd ~/myproject
      • gunicorn --bind 0.0.0.0:5000 wsgi:app

      Debería ver un resultado como el siguiente:

      Output

      [2020-05-20 14:13:00 +0000] [46419] [INFO] Starting gunicorn 20.0.4 [2020-05-20 14:13:00 +0000] [46419] [INFO] Listening at: http://0.0.0.0:5000 (46419) [2020-05-20 14:13:00 +0000] [46419] [INFO] Using worker: sync [2020-05-20 14:13:00 +0000] [46421] [INFO] Booting worker with pid: 46421

      Visite de nuevo la dirección IP de su servidor con :5000 agregado al final en su navegador web:

      http://your_server_ip:5000
      

      Debería ver el resultado de su aplicación:

      Aplicación de ejemplo de Flask

      Cuando confirme que funciona correctamente, pulse CTRL-C en la ventana de su terminal.

      Ya completamos las tareas de nuestro entorno virtual, por lo que podemos desactivarlo:

      Ahora todos los comandos de Python usarán de nuevo el entorno de Phyton del sistema.

      A continuación, crearemos el archivo de unidad de servicio systemd. Crear un archivo de unidad systemd permitirá que el sistema init de Ubuntu inicie automáticamente Gunicorn y haga funcionar la aplicación de Flask cuando el servidor se cargue.

      Cree un archivo de unidad terminado en .service dentro del directorio /etc/systemd/system para empezar:

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

      En su interior, empezaremos con la sección [Unit] que se usa para especificar metadatos y dependencias. Aquí agregaremos una descripción de nuestro servicio e indicaremos al sistema init que lo inicie solo tras haber alcanzado el objetivo de red:

      /etc/systemd/system/myproject.service

      [Unit]
      Description=Gunicorn instance to serve myproject
      After=network.target
      

      A continuación, abriremos la sección [Service]. Esto especificará el usuario y el grupo con los cuales deseamos que se ejecute el proceso. Otorgaremos la propiedad del proceso a nuestra cuenta de usuario normal, ya que tiene la propiedad de todos los archivos pertinentes. También otorgaremos la propiedad del grupo al grupo www-data para que Nginx pueda comunicarse fácilmente con los procesos de Gunicorn. No se olvide de sustituir el nombre de usuario por el suyo:

      /etc/systemd/system/myproject.service

      [Unit]
      Description=Gunicorn instance to serve myproject
      After=network.target
      
      [Service]
      User=sammy
      Group=www-data
      

      A continuación, planearemos los detalles del directorio de trabajo y estableceremos el entorno variable PATH para que el sistema init sepa que los ejecutables para el proceso están ubicados dentro de nuestro entorno virtual. También especificaremos el comando para iniciar el servicio. Este comando hará lo siguiente:

      • Iniciar 3 procesos de trabajadores (debería, no obstante, ajustar esto si es necesario)
      • Crear un archivo de socket de Unix, myproject.sock, dentro del directorio de nuestro proyecto y establecer un vínculo con él. Estableceremos un valor sin máscara de 007 para que se cree el archivo de socket, se proporcione acceso al propietario y, al mismo tiempo, se restrinjan otros accesos.
      • Especifique el nombre del archivo del punto de entrada de WSGI junto con el elemento invocable de Python dentro de ese archivo (wsgi:app).

      Systemd necesita que le proporcionemos la ruta completa al ejecutable de Gunicorn, que se instala dentro de nuestro entorno virtual.

      No se olvide de sustituir el nombre del usuario y las rutas del proyecto por su propia información:

      /etc/systemd/system/myproject.service

      [Unit]
      Description=Gunicorn instance to serve myproject
      After=network.target
      
      [Service]
      User=sammy
      Group=www-data
      WorkingDirectory=/home/sammy/myproject
      Environment="PATH=/home/sammy/myproject/myprojectenv/bin"
      ExecStart=/home/sammy/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007 wsgi:app
      

      Por último, vamos a añadiremos una sección [Install]. Esto indicará a systemd a qué deberá vincular este servicio si lo habilitamos para que se cargue en el inicio. Queremos que este servicio se inicie cuando el sistema multiusuario normal esté en funcionamiento:

      /etc/systemd/system/myproject.service

      [Unit]
      Description=Gunicorn instance to serve myproject
      After=network.target
      
      [Service]
      User=sammy
      Group=www-data
      WorkingDirectory=/home/sammy/myproject
      Environment="PATH=/home/sammy/myproject/myprojectenv/bin"
      ExecStart=/home/sammy/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007 wsgi:app
      
      [Install]
      WantedBy=multi-user.target
      

      Con eso, nuestro archivo de servicio de systemd quedará completo. Guárdelo y ciérrelo ahora.

      Ya podemos iniciar el servicio Gunicorn que creamos y activarlo para que se cargue en el inicio:

      • sudo systemctl start myproject
      • sudo systemctl enable myproject

      Comprobemos el estado:

      • sudo systemctl status myproject

      Debería ver el siguiente resultado:

      Output

      ● myproject.service - Gunicorn instance to serve myproject Loaded: loaded (/etc/systemd/system/myproject.service; enabled; vendor preset: enabled) Active: active (running) since Wed 2020-05-20 14:15:18 UTC; 1s ago Main PID: 46430 (gunicorn) Tasks: 4 (limit: 2344) Memory: 51.3M CGroup: /system.slice/myproject.service ├─46430 /home/sammy/myproject/myprojectenv/bin/python3 /home/sammy/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007 wsgi:app ├─46449 /home/sammy/myproject/myprojectenv/bin/python3 /home/sammy/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007 wsgi:app ├─46450 /home/sammy/myproject/myprojectenv/bin/python3 /home/sammy/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007 wsgi:app └─46451 /home/sammy/myproject/myprojectenv/bin/python3 /home/sammy/myproject/myprojectenv/bin/gunicorn --workers 3 --bind unix:myproject.sock -m 007 wsgi:app

      Si detecta errores, asegúrese de resolverlos antes de continuar con el tutorial.

      Paso 5: Configurar Nginx para solicitudes de proxy

      Ahora, nuestro servidor de aplicación Gunicorn debería estar funcionando, esperando solicitudes en el archivo de socket del directorio del proyecto. Configuraremos Nginx para que transmita las solicitudes web al socket haciendo algunas pequeñas adiciones a su archivo de configuración.

      Comencemos creando un nuevo archivo de configuración de bloque de servidor en el directorio sites-available de Nginx. Lo llamaremos myproject para que se adecue al resto de esta guía:

      • sudo nano /etc/nginx/sites-available/myproject

      Abra un bloque de servidor e indique a Nginx que escuche en el puerto predeterminado 80. También le indicaremos que utilice este bloque para solicitudes para el nombre de dominio de nuestro servidor:

      /etc/nginx/sites-available/myproject

      server {
          listen 80;
          server_name your_domain www.your_domain;
      }
      

      A continuación, agregaremos un bloque de ubicación que coincida con cada solicitud. Dentro de este bloque, incluiremos el archivo proxy_params que especifica algunos parámetros de proxy generales que deben configurarse. Luego, pasaremos las solicitudes al socket que definimos usando la directiva proxy_pass:

      /etc/nginx/sites-available/myproject

      server {
          listen 80;
          server_name your_domain www.your_domain;
      
          location / {
              include proxy_params;
              proxy_pass http://unix:/home/sammy/myproject/myproject.sock;
          }
      }
      

      Guarde y cierre el archivo al finalizar.

      Para habilitar la configuración del bloque de servidor de Nginx que acaba de crear, vincule el archivo al directorio sites-enabled​​​:

      • sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled

      Con el archivo en ese directorio, puede realizar una verificación en busca de errores de sintaxis:

      Si no se indican problemas, reinicie el proceso de Nginx para que lea la nueva configuración:

      • sudo systemctl restart nginx

      Por último, ajustaremos el firewall de nuevo. Ya no necesitamos acceso a través del puerto 5000, por lo que podemos eliminar esta regla. Luego, podemos permitir el acceso completo al servidor de Nginx:

      • sudo ufw delete allow 5000
      • sudo ufw allow 'Nginx Full'

      Ahora debería poder visitar el nombre de dominio de su servidor en su navegador web:

      http://your_domain
      

      Debería ver el resultado de su aplicación:

      Aplicación de ejemplo de Flask

      Si encuentra algún error, intente verificar lo siguiente:

      • sudo less /var/log/nginx/error.log: verifica los registros de error de Nginx.
      • sudo less /var/log/nginx/access.log: verifica los registros de acceso de Nginx.
      • sudo journalctl -u nginx: verifica los registros de proceso de Nginx.
      • sudo journalctl -u myproject: verifica los registros de Gunicorn de su app de Flask.

      Paso 6: Proteger la aplicación

      Para asegurarse de que el tráfico hacia su servidor siga siendo seguro, obtendremos un certificado SSL para su dominio. Existen varias formas de hacer esto, incluyendo obtener un certificado gratuito de Let´s Encrypt, generar un certificado auto firmado, o comprar uno de otro proveedor, y configurar Nginx para usarlo siguiendo los Pasos 2 al 6 de Cómo crear un certificado SSL auto firmado para Nginx en Ubuntu 20.04. Por motivos de conveniencia, elegiremos la primera opción.

      Instale el paquete de Nginx de Certbot con apt:

      • sudo apt install python3-certbot-nginx

      Certbot ofrece varias alternativas para obtener certificados SSL a través de complementos. El complemento de Nginx se encargará de reconfigurar Nginx y volver a cargar la configuración cuando sea necesario. Para utilizar este complemento, escriba lo siguiente:

      • sudo certbot --nginx -d your_domain -d www.your_domain

      Con esto, se ejecuta certbot con el complemento --nginx usando -d para especificar los nombres para los cuales deseamos que el certificado tenga validez.

      Si es la primera vez que ejecuta certbot, se le solicitará introducir una dirección de correo electrónico y aceptar las condiciones de servicio. A continuación, certbot se comunicará con el servidor de Let’s Encrypt y, luego, realizará una comprobación para verificar que usted controle el dominio para el que solicita un certificado.

      Si la comprobación se realiza correctamente, certbot le preguntará cómo desea configurar sus ajustes de HTTPS:

      Output

      Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access. ------------------------------------------------------------------------------- 1: No redirect - Make no further changes to the webserver configuration. 2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for new sites, or if you're confident your site works on HTTPS. You can undo this change by editing your web server's configuration. ------------------------------------------------------------------------------- Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

      Seleccione su elección y luego ENTER. La configuración se actualizará y Nginx se volverá a cargar para aplicar los ajustes nuevos. certbot concluirá con un mensaje que le indicará que el proceso tuvo éxito e indicará la ubicación de almacenamiento de sus certificados:

      Output

      IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/your_domain/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/your_domain/privkey.pem Your cert will expire on 2020-08-18. To obtain a new or tweaked version of this certificate in the future, simply run certbot again with the "certonly" option. To non-interactively renew *all* of your certificates, run "certbot renew" - Your account credentials have been saved in your Certbot configuration directory at /etc/letsencrypt. You should make a secure backup of this folder now. This configuration directory will also contain certificates and private keys obtained by Certbot so making regular backups of this folder is ideal. - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le

      Si siguió las instrucciones de instalación de Nginx en los requisitos previos, ya no necesitará la asignación de perfil HTTP redundante:

      • sudo ufw delete allow 'Nginx HTTP'

      Para verificar la configuración, acceda una vez más a su dominio utilizando https://:

      https://your_domain
      

      Una vez más, debería ver el resultado de su aplicación junto con el indicador de seguridad de su navegador, el cual debería indicar que el sitio está protegido.

      Conclusión

      A través de esta guía, creó y aseguró una aplicación de Flask simple dentro de un entorno virtual de Python. Creó un punto de entrada de WSGI para que cualquier servidor de aplicación con capacidad para WSGI pueda interactuar con él y configuró el servidor de aplicación de Gunicorn para proporcionar esta función. Luego, creó un archivo de servicio systemd para iniciar automáticamente el servidor de aplicación en el inicio. También creó un bloque de servidor de Nginx que transmite el tráfico de clientes web al servidor de la aplicación, y reenvía solicitudes externas, y protegió el tráfico hacia su servidor con Let’s Encrypt.

      Flask es un framework muy sencillo, pero extremadamente flexible, diseñado para proporcionar funcionalidad a sus aplicaciones sin ser demasiado restrictivo respecto de la estructura y del diseño. Puede utilizar la pila general descrita en esta guía para hacer funcionar las aplicaciones de Flask que diseñe.



      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