One place for hosting & domains

      imágenes

      Cómo utilizar el tipo de datos BLOB de MySQL para almacenar imágenes con PHP en Ubuntu 18.04


      El autor seleccionó Girls Who Code para recibir una donación como parte del programa Write for DOnations.

      Introducción

      El tipo de datos de gran objeto binario (BLOB) es un tipo de datos de MySQL que puede almacenar datos binarios como los de archivos de imagen, multimedia y PDF.

      Al crear aplicaciones que requieren una base de datos estrechamente acoplada donde las imágenes deben estar sincronizadas con los datos relacionados (por ejemplo, un portal de empleados, una base de datos de estudiantes o una aplicación financiera), puede resultarle conveniente almacenar imágenes como las de fotos y firmas de pasaportes de estudiantes en una base de datos de MySQL junto con otra información relacionada.

      Aquí es donde entra el tipo de datos BLOB de MySQL. Este enfoque de programación elimina la necesidad de crear un sistema de archivos independiente para almacenar imágenes. El esquema también centraliza la base de datos, haciéndola más portátil y segura porque los datos están aislados del sistema de archivos. Crear copias de seguridad también es más sencillo, ya que que puede crear un solo archivo MySQL dump que contenga todos sus datos.

      La recuperación de datos es más rápida y, al crear registros, podrá estar seguro de que las reglas de validación de datos y la integridad referencial se preserven, en especial al utilizar transacciones en MySQL.

      En este tutorial, utilizará el tipo de datos BLOB de MySQL para almacenar imágenes con PHP en Ubuntu 18.04.

      Requisitos previos

      Para completar esta guía, necesitará lo siguiente:

      Paso 1: Crear una base de datos

      Comenzará creando una base de datos de ejemplo para su proyecto. Para hacer esto, aplique SSH a su servidor y luego ejecute el siguiente comando para iniciar sesión en su servidor MySQL como root:

      Ingrese la contraseña root de su base de datos de MySQL y presione INTRO para continuar.

      Luego, ejecute el siguiente comando para crear una base de datos. En este tutorial, lo llamaremos test_company:

      • CREATE DATABASE test_company;

      Una vez que cree la base de datos, verá el siguiente resultado:

      Output

      Query OK, 1 row affected (0.01 sec)

      Luego, cree una cuenta test_user en el servidor de MySQL y recuerde reemplazar PASSWORD por una contraseña segura:

      • CREATE USER 'test_user'@'localhost' IDENTIFIED BY 'PASSWORD';

      Verá el siguiente resultado:

      Output

      Query OK, 0 rows affected (0.01 sec)

      Para otorgar a test_user privilegios completos respecto de la base de datos test_company, ejecute lo siguiente:

      • GRANT ALL PRIVILEGES ON test_company.* TO 'test_user'@'localhost';

      Asegúrese de obtener el siguiente resultado:

      Output

      Query OK, 0 rows affected (0.01 sec)

      Por último, elimine la tabla de privilegios para que MySQL vuelva a cargar los permisos:

      Asegúrese de ver el siguiente resultado:

      Output

      Query OK, 0 rows affected (0.01 sec)

      Ahora que la base de datos test_company y test_user están listos, continúe creando una tabla products para almacenar productos de ejemplo. Más adelante, utilizará esta tabla para insertar y obtener registros a fin de demostrar cómo funciona BLOB de MySQL.

      Cierre sesión en el servidor de MySQL:

      Luego, vuelva a iniciar sesión con las credenciales de test_user que creó:

      Cuando se le solicite, ingrese la contraseña de test_user y presione ENTER para continuar. Luego, posiciónese en la base de datos test_company escribiendo lo siguiente:

      Una vez que seleccione la base de datos test_company, MySQL mostrará lo siguiente:

      Output

      Database changed

      Luego, cree una tabla products ejecutando lo siguiente:

      • CREATE TABLE `products` (product_id BIGINT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(50), price DOUBLE, product_image BLOB) ENGINE = InnoDB;

      Con este comando se crea una tabla llamada products. La tabla tiene cuatro columnas:

      • product_id: esta columna utiliza un tipo de datos BIGINT para admitir una gran lista de productos hasta un máximo de 2⁶³-1 artículos. Se marca la columna como PRIMARY KEY para identificar productos de manera exclusiva. Para que MySQL administre la generación de nuevos identificadores para columnas insertadas, utilizó la palabra clave AUTO_INCREMENT.

      • product_name: esta columna contiene los nombres de los productos. Se utiliza el tipo de datos VARCHAR, ya que este campo generalmente administra alfanuméricos de hasta un máximo de 50 caracteres; el límite de 50 es solo un valor hipotético utilizado para de este tutorial.

      • price: para fines demostrativos, su tabla products contiene la columna price que permite almacenar el precio minorista de los productos. Dado que algunos productos pueden tener valores flotantes (por ejemplo 23.69, 45.36, 102.99), se utiliza el tipo de datos DOUBLE.

      • product_image: en esta columna se utiliza el tipo de datos BLOB para almacenar los datos binarios reales de las imágenes de los productos.

      Se utiliza el ENGINE de almacenamiento InnoDB para que la tabla admita una amplia gama de funciones, incluso transacciones de MySQL. Después de ejecutar esto para crear la tabla products, verá el siguiente resultado:

      Output

      Query OK, 0 rows affected (0.03 sec)

      Cierre la sesión de su servidor de MySQL:

      Verá el siguiente resultado:

      Output

      Bye

      La tabla products ahora está lista para almacenar algunos registros, incluidas las imágenes de los productos y, en el siguiente paso, la completará con algunos productos.

      Paso 2: Crear secuencias de comandos PHP para conectar y completar la base de datos

      En este paso, creará una secuencia de comandos PHP que se conectará a la base de datos MySQL que creó en el paso 1. La secuencia de comandos preparará tres productos de ejemplo y los insertará en la tabla products.

      Para crear el código PHP, abra un nuevo archivo con su editor de texto:

      • sudo nano /var/www/html/config.php

      Luego, ingrese la siguiente información en el archivo y reemplace PASSWORD por la contraseña test_user que creó en el paso 1:

      /var/www/html/config.php

      <?php
      
      define('DB_NAME', 'test_company');
      define('DB_USER', 'test_user');
      define('DB_PASSWORD', 'PASSWORD');
      define('DB_HOST', 'localhost');
      
      $pdo = new PDO("mysql:host=" . DB_HOST . "; dbname=" . DB_NAME, DB_USER, DB_PASSWORD);
      $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
      $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
      
      

      Guarde y cierre el archivo.

      En este archivo, utilizó cuatro constantes PHP para conectarse a la base de datos MySQL que creó en el paso 1:

      • DB_NAME : esta constante contiene el nombre de la base de datos test_company.

      • DB_USER : esta variable contiene el nombre de usuario test_user.

      • DB_PASSWORD : esta constante almacena la PASSWORD de MySQL de la cuenta test_user.

      • DB_HOST: esto representa el servidor en el que se ubica la base de datos. En este caso, utilizará el servidor localhost.

      Con la siguiente línea de su archivo se inicia un objeto de datos de PHP (PDO) y se conecta a la base de datos MySQL:

      ...
      $pdo = new PDO("mysql:host=" . DB_HOST . "; dbname=" . DB_NAME, DB_USER, DB_PASSWORD);
      ...
      

      Cerca del final del archivo, configuró algunos atributos PDO:

      • ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION: este atributo indica a PDO que inicie una excepción que se puede registrar para depuración.
      • ATTR_EMULATE_PREPARES, false: esta opción aumenta la seguridad al indicar al motor de la base de datos MySQL que realice la preparación en lugar de PDO.

      Incluirá el archivo /var/www/html/config.php en dos secuencias de comandos PHP que creará luego para insertar y recuperar registros respectivamente.

      Primero, cree la secuencia de comandos PHP /var/www/html/insert_products.php para insertar registros en la tabla de productos:

      • sudo nano /var/www/html/insert_products.php

      Luego, añada la siguiente información al archivo /var/www/html/insert_products.php:

      /var/www/html/insert_products.php

      <?php
      
      require_once 'config.php';
      
      $products = [];
      
      $products[] = [
                    'product_name' => 'VIRTUAL SERVERS',
                    'price' => 5,
                    'product_image' => file_get_contents("https://i.imgur.com/VEIKbp0.png")
                    ];
      
      $products[] = [
                    'product_name' => 'MANAGED KUBERNETES',
                    'price' => 30,
                    'product_image' => file_get_contents("https://i.imgur.com/cCc9Gw9.png")
                    ];
      
      $products[] = [
                    'product_name' => 'MySQL DATABASES',
                    'price' => 15,
                    'product_image' => file_get_contents("https://i.imgur.com/UYcHkKD.png" )
                    ];
      
      $sql = "INSERT INTO products(product_name, price, product_image) VALUES (:product_name, :price, :product_image)";
      
      foreach ($products as $product) {
          $stmt = $pdo->prepare($sql);
          $stmt->execute($product);
      }
      
      echo "Records inserted successfully";
      

      Guarde y cierre el archivo.

      En el archivo, incluyó el archivo config.php en la parte superior. Este es el primer archivo que creó para definir las variables de la base de datos y conectarse a la base de datos. El archivo también inicia un objeto PDO y lo almacena en una variable $pdo.

      Luego, creó una matriz de datos de los productos que se insertarán en la base de datos. Aparte de product_name y price, que se preparan como cadenas y valores numéricos respectivamente, la secuencia de comandos utiliza la función file_get_contents integrada de PHP para leer imágenes de una fuente externa y pasarlas como cadenas a la columna product_image.

      Luego, preparó una instrucción SQL y utilizó la instrucción foreach{...} de PHP para insertar cada producto en la base de datos.

      Para ejecutar el archivo /var/www/html/insert_products.php, realice la ejecución en la ventana de su navegador utilizando la siguiente URL. Recuerde reemplazar your-server-IP por la dirección IP pública de su servidor:

      http://your-server-IP/insert_products.php
      

      Después de ejecutar el archivo, verá un mensaje de éxito en su navegador confirmando que los registros se insertaron en la base de datos.

      Mensaje de éxito que indica que los registros se insertaron en la base de datos

      Insertó con éxito tres registros que contienen imágenes de productos en la tabla products. En el siguiente paso, creará una secuencia de comandos PHP para obtener estos registros y mostrarlos en su navegador.

      Paso 3: Mostrar la información de los productos de la base de datos MySQL

      Con la información e imágenes de los productos en la base de datos, ahora debe codificar otra secuencia de comandos PHP que consulta y muestra la información de los productos en una tabla HTML en su navegador.

      Para crear el archivo, escriba lo siguiente:

      • sudo nano /var/www/html/display_products.php

      Luego, ingrese la siguiente información en el archivo:

      /var/www/html/display_products.php

      <html>
        <title>Using BLOB and MySQL</title>
        <body>
      
        <?php
      
        require_once 'config.php';
      
        $sql = "SELECT * FROM products";
        $stmt = $pdo->prepare($sql);
        $stmt->execute();
        ?>
      
        <table border="1" align = 'center'> <caption>Products Database</caption>
          <tr>
            <th>Product Id</th>
            <th>Product Name</th>
            <th>Price</th>
            <th>Product Image</th>
          </tr>
      
        <?php
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            echo '<tr>';
            echo '<td>' . $row['product_id'] . '</td>';
            echo '<td>' . $row['product_name'] . '</td>';
            echo '<td>' . $row['price'] . '</td>';
            echo '<td>' .
            '<img src = "data:image/png;base64,' . base64_encode($row['product_image']) . '" width = "50px" height = "50px"/>'
            . '</td>';
            echo '</tr>';
        }
        ?>
      
        </table>
        </body>
      </html>
      

      Guarde los cambios del archivo y ciérrelo.

      Aquí, nuevamente incluyó el archivo config.php para establecer conexión con la base de datos. Luego, preparó y ejecutó una instrucción SQL utilizando PDO para obtener todos los elementos de la tabla products utilizando el comando SELECT * FROM products​​​.

      Luego, creó una tabla HTML y la completó con los datos de los productos utilizando la instrucción PHP while() {...}​​​. La línea $row = $stmt->fetch(PDO::FETCH_ASSOC)​​​ consulta la base de datos y almacena el resultado en la variable $row como matriz multidimensional, que luego se mostró en una columna de la tabla HTML utilizando la sintaxis $row['column_name']​​​.

      Las imágenes de la columna product_image se incluyen en el interior de las etiquetas <img src = "">. Se utilizan los atributos width y height para cambiar el tamaño de las imágenes por uno más pequeño que pueda caber en la columna de la tabla HTML.

      Para convertir los datos contenidos en el tipo de datos BLOB de vuelta en imágenes, se utilizan la función base64_encode de PHP integrada y la siguiente sintaxis para el esquema URI de datos:

      data:media_type;base64, base_64_encoded_data
      

      En este caso, imagen/png es media_type y la cadena codificada Base64 de la columna product_image es base_64_encoded_data.

      Luego, ejecute el archivo display_products.php en un navegador web escribiendo la siguiente dirección:

      http://your-server-IP/display_products.php
      

      Después de ejecutar el archivo display_products.php en su navegador, verá una tabla HTML con una lista de productos e imágenes asociados.

      Lista de productos de la base de datos MySQL

      Esto confirma que la secuencia de comandos de PHP para obtener imágenes de MySQL funciona según lo previsto.

      Conclusión

      A través de esta guía, utilizó el tipo de datos BLOB de MySQL para almacenar y mostrar imágenes con PHP en Ubuntu 18.04. También vio las ventajas básicas de almacenar imágenes en una base de datos respecto de hacerlo en un sistema de archivos. Entre ellas, se incluyen la portabilidad, la seguridad y la facilidad de respaldo. Si compila una aplicación, como un portal de estudiantes o una base de datos de empleados para los cuales se deban almacenar juntas la información y las imágenes relacionadas, esta tecnología puede resultarle muy útil.

      Para obtener más información sobre los tipos de datos compatibles en MySQL, consulte la guía de tipos de datos de MySQL. Si está interesado en más contenido relacionado con MySQL y PHP, consulte los siguientes tutoriales:



      Source link

      Cómo eliminar imágenes, contenedores y volúmenes de Docker


      Una página con trucos de Docker

      Introducción

      Docker hace que sea fácil envolver sus aplicaciones y servicios en contenedores para poder ejecutarlos en cualquier lugar. Sin embargo, a medida que se trabaja con Docker, también es fácil acumular una cantidad excesiva de imágenes, contenedores y volúmenes de datos que consumen recursos y ocupan espacio en disco.

      Docker le brinda todas las herramientas necesarias para limpiar su sistema desde la línea de comandos. En esta guía a modo de página de trucos se brinda una referencia rápida a comandos útiles para liberar espacio en el disco y mantener su sistema organizado mediante la eliminación de imágenes, contenedores y volúmenes no utilizados de Docker.

      Cómo utilizar esta guía:

      • Esta guía se ofrece con formato de página de trucos con fragmentos de líneas de comandos independientes.
      • Vaya a cualquiera de las secciones que corresponda a la tarea que está tratando de completar.

      La sintaxis de sustitución de comandos, command $(command), que se utiliza en los comandos, está disponible en muchos shells populares como bash, zsh y Windows Powershell.

      Eliminar las imágenes, los contenedores, los volúmenes y las redes sin utilizar o pendientes.

      Docker proporciona un solo comando que eliminará cualquier recurso (imágenes, contenedores, volúmenes y redes) que estén pendientes (no asociados con un contenedor):

      Para eliminar adicionalmente los contenedores detenidos y todas las imágenes no utilizadas (no solo aquellas pendientes), añada el indicador -a al comando:

      Eliminar imágenes de Docker

      Eliminar una o más imágenes específicas

      Utilice el comando docker images con el indicador -a para localizar el ID de las imágenes que quiere eliminar. Esto le mostrará todas las imágenes, incluidas las capas de imagen intermedias. Cuando localice las imágenes que desee eliminar, puede pasar su ID o etiqueta a docker rmi:

      Enumerar:

      Eliminar:

      Eliminar imágenes pendientes

      Las imágenes de Docker constan de varias capas. Las imágenes pendientes son capas que no tienen relación con imágenes etiquetadas. Ya no sirven para nada y ocupan espacio en el disco. Se pueden ubicar añadiendo el indicador de filtro -f junto con el valor dangling=true al comando docker images. Si está seguro de que quiere eliminarlas, puede utilizar el comando docker images purge:

      Nota: Si crea una imagen sin etiquetar, aparecerá en la lista de imágenes pendientes porque no está asociada a una imagen con etiqueta. Puede evitar esta situación proporcionando una etiqueta cuando cree imágenes y puede etiquetar de forma retroactiva una imagen con el comando docker tag.

      Enumerar:

      • docker images -f dangling=true

      Eliminar:

      Eliminar imágenes según un patrón

      Puede encontrar todas las imágenes que coinciden con un patrón utilizando una combinación de docker images y grep. Cuando esté conforme, puede eliminarlas utilizando awk para pasar los ID a docker rmi. Tenga en cuenta que Docker no proporciona estas utilidades y que estas no están necesariamente disponibles en todos los sistemas:

      Enumerar:

      • docker images -a | grep "pattern"

      Eliminar:

      • docker images -a | grep "pattern" | awk '{print $3}' | xargs docker rmi

      Eliminar todas las imágenes

      Es posible enumerar todas las imágenes de Docker de un sistema añadiendo -a al comando docker images. Una vez que esté seguro de que desea eliminarlas por completo, puede añadir el indicador -q para pasar el ID de la imagen a docker rmi:

      Enumerar:

      Eliminar:

      • docker rmi $(docker images -a -q)

      Eliminar contenedores

      Eliminar uno o más contenedores específicos

      Utilice el comando docker ps con el indicador -a para localizar el nombre o la ID de los contenedores que desee eliminar.

      Enumerar:

      Eliminar:

      • docker rm ID_or_Name ID_or_Name

      Eliminar un contenedor al cerrarlo

      Si al crear un contenedor sabe que no querrá conservarlo una vez que lo termine, puede ejecutar docker run --rm para eliminarlo automáticamente después de cerrarlo.

      Ejecutar y eliminar:

      • docker run --rm image_name

      Eliminar todos los contenedores terminados

      Puede localizar contenedores utilizando docker ps -a y filtrarlos según su estado: “created”, “restarting”, “running”, “paused” o “exited”. A fin de revisar la lista de contenedores terminados, utilice el indicador -f para filtrar según el estado. Cuando haya verificado que desea eliminar esos contenedores, utilice -q para pasar los IDs al comando docker rm.

      Enumerar:

      • docker ps -a -f status=exited

      Eliminar:

      • docker rm $(docker ps -a -f status=exited -q)

      Eliminar contenedores utilizando más de un filtro

      Los filtros de Docker pueden combinarse repitiendo el indicador de filtro con un valor adicional. Esto da como resultado una lista de contenedores que cumplen cualquier condición. Por ejemplo, si desea eliminar todos los contenedores marcados como Created (un estado que se puede generar cuando ejecuta un contenedor con un comando no válido) o Exited, puede utilizar dos filtros:

      Enumerar:

      • docker ps -a -f status=exited -f status=created

      Eliminar:

      • docker rm $(docker ps -a -f status=exited -f status=created -q)

      Eliminar contenedores según un patrón

      Puede encontrar todos los contenedores que coinciden con un patrón utilizando la combinación de docker ps y grep. Cuando esté convencido de que tiene la lista que desea eliminar, podrá utilizar awk y xargs para proporcionar el ID a docker rmi. Tenga en cuenta que Docker no proporciona estas utilidades y que no están necesariamente disponibles en todos los sistemas:

      Enumerar:

      • docker ps -a | grep "pattern

      Eliminar:

      • docker ps -a | grep "pattern" | awk '{print $3}' | xargs docker rmi

      Detener y eliminar todos los contenedores

      Puede revisar los contenedores de su sistema con docker ps. Al añadir el indicador -a se mostrarán todos los contenedores. Cuando esté seguro de que desea eliminarlos, puede añadir el indicador -q para proporcionar los ID a los comandos docker stop y docker rm:

      Enumerar:

      Eliminar:

      • docker stop $(docker ps -a -q)
      • docker rm $(docker ps -a -q)

      Eliminar volúmenes

      Eliminar uno o más volúmenes específicos – Docker 1.9 y versiones posteriores

      Utilice el comando docker volume ls para ubicar el nombre o los nombres de los volúmenes que desea eliminar. Luego, puede eliminar uno o más volúmenes con el comando docker volume rm:

      Enumerar:

      Eliminar:

      • docker volume rm volume_name volume_name

      Eliminar volúmenes pendientes: Docker 1.9 y versiones posteriores

      Debido a que el punto de volúmenes debe existir independientemente de los contenedores, cuando se elimina un contenedor un volumen no se elimina automáticamente al mismo tiempo. Cuando un volumen existe y ya no está conectado a ningún contenedor, se denomina “volumen pendiente”. Para ubicarlos y confirmar que desea eliminarlos, puede utilizar el comando docker volume ls con un filtro a fin de limitar los resultados a volúmenes pendientes. Cuando esté conforme con la lista, puede eliminarlos con docker volume prune:

      Enumerar:

      • docker volume ls -f dangling=true

      Eliminar:

      Eliminar un contenedor y su volumen

      Si creó un volumen sin nombre, puede eliminarlo al mismo tiempo que el contenedor utilizando el indicador -v. Tenga en cuenta que esto solo funciona con volúmenes sin nombre. Cuando el contenedor se elimina correctamente, se muestra su ID. Tenga en cuenta que no se hace referencia a la eliminación del volumen. Si no tiene nombre, se elimina silenciosamente del sistema. Si se nombra, permanece silenciosamente presente.

      Eliminar:

      • docker rm -v container_name

      Conclusión

      Esta guía abarca algunos de los comandos comunes que se utilizan para eliminar imágenes, contenedores y volúmenes con Docker. Hay una gran cantidad adicional de combinaciones e indicadores que se pueden utilizar con cada uno de estos. Para acceder a una guía completa de lo que está disponible, consulte la documentación de Docker sobre docker system prune, docker rmi, docker rm y docker volume rm. Si hay tareas de limpieza comunes que desearía ver en la guía, haga preguntas o sugerencias en los comentarios.



      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