El autor seleccionó la Apache Software Foundation para recibir una donación como parte del programa Write for DOnations.
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.
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.
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:
- sudo yum install wget
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:
- cd /var/www/html/webp
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.
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 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 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 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.
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.
- nano ~/webp-convert.sh
La primera línea de la secuencia de comandos tendrá este aspecto:
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:
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:
webp_path
..webp
del archivo existe o no.La secuencia de comandos más pequeña tiene este aspecto:
...
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:
webp_path
: esta variable se generará usando sed
y el nombre del archivo que coincide del comando bash
, denotado por el parámetro de posición $0
. Una cadena here (<<<)
pasará este nombre a sed
.if [ ! -f "$webp_path" ]
: esta prueba determinará si hay un archivo llamado "$webp_path"
o no usando el operador lógico not
(!
).cwebp
: este comando creará el archivo, si no existe, usando la opción -q
para no imprimir la salida.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:
# 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:
#!/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 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.
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 o_tra 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
:
- nano ~/webp-watchers.sh
La primera línea de la secuencia de comandos tendrá este aspecto:
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
:
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
; read
procesará el evento que detectó inotifywait
, asignándolo a una variable llamada $operation
, y asignará la ruta del archivo procesado a una variable llamada $path:
...
| while read operation path; do
# commands
done;
Vamos a combinar este bucle con el resto de nuestra secuencia de comandos:
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:
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_path="$(sed 's/\.[^.]*$/.webp/' <<< "$path")";
A continuación, la secuencia de comandos probará qué evento se produjo:
...
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
:
...
if [ -f "$webp_path" ]; then
$(rm -f "$webp_path");
fi;
Para los archivos recién creados, la compresión se realizará como sigue:
-quality
.Vamos a añadir los comando cwebp
que harán este trabajo en la secuencia de comandos:
...
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:
#!/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.
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.png
de nuestro directorio /var/www/html/webp
, que convertimos a logo.webp
, como en el ejemplo con <source>
. Podemos usar el siguiente código HTML para visualizar 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 logo.webp
en los navegadores compatibles usando el elemento<picture>
:
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="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.
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:
:
<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
:
...
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:
...
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:
...
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:
...
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.
...
<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:
...
AddType image/webp .webp
Esta es la versión final de nuestro archivo .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 logo.webp
en /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:
<img src="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.
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:
<picture>
, consulte su documentación en MDN.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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.