Cómo servir imágenes en formato WebP en WordPress

WebP es un formato de archivo para imágenes que proporciona compresión con y sin pérdidas. Si utilizas WordPress, puedes servir fácilmente todas las imágenes en WebP con algunos ajustes básicos.

La mayoría de los navegadores soportan WebP

• Según los datos de Caniuse, WebP es actualmente compatible con el 94% de los navegadores, incluyendo Apple Safari, Google Chrome, Opera, Mozilla Firefox, Microsoft Edge y los navegadores de Android.
• Puede seguir sirviendo JPEG/PNG como alternativa para los navegadores no compatibles.
  

Principales ventajas de utilizar el formato de imagen WebP

• En comparación con el tamaño de la imagen normal JPG o PNG, la imagen de la misma dimensión WebP puede servir en pequeños bytes. Por lo tanto, las imágenes se cargarán más rápido. Será útil especialmente para los usuarios de móviles.
• Servir imágenes de calidad en pocos bytes, ahorrar drásticamente el ancho de banda.
• Mantenga su sitio web actualizado con las últimas tendencias. No pierda la conversación debido al problema de la carga lenta del carro de toros.
• WebP está recomendado por Google Developers. Te ayuda a pasar la recomendación de «servir imágenes en formato next-gen» de Google PageSpeed Insight.
  

Así es como se puede servir WebP para un sitio de WordPress.

Servir WebP en NGINX usando el plugin ShortPixel

El plugin ShortPixel puede ayudar en la optimización de imágenes a granel con la conversión de WebP y servir según el soporte del navegador. La mejor parte de este plugin hace el procesamiento en su servidor por lo que no ralentizará su sitio.

• Si su WordPress está alojado en un servidor Apache puede utilizar la reescritura .htaccess.
• En el caso de NGINX puede utilizar la siguiente regla de reescritura con la ayuda del soporte de hosting
• Este plugin es compatible con el plugin de caché WP Rocket también.
  

En primer lugar, añada este bloque antes de la directiva del servidor:

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

Añada este bloque dentro de la directiva del servidor:

location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root "<<FULL PATH OF wp-content PARENT>>";
    root $root;
    add_header Vary Accept;
    if ( !-f $root$webp_uri ) {
        add_header X_WebP_SP_Miss $root$webp_uri;
    }
    try_files $webp_uri $webp_old_uri $uri =404;
}

La colocación es importante. Así que añádelo con cuidado.

Uso del plugin WebP Express en NGINX

• Instala y activa WebP Express, un plugin gratuito. Un enorme agradecimiento al desarrollador.
• Modo de funcionamiento: Respuestas de imagen variadas.
• Alcance: Sólo carga.

• Ejecutar Bulk Convert

• En el caso de WordPress alojado en un servidor Apache, no se requiere ninguna configuración, ya que el archivo .htaccess hace toda la magia.
• El usuario del servidor NGINX necesita modificar el archivo de configuración con acceso de root.

Para una mejor organización del código, recomendaría colocarlo primero dentro del directorio /etc/nginx/ con el nombre webp.conf y luego incluirlo en el bloque principal del servidor.

Introduzca el siguiente comando

cd /etc/nginx/ && nano webp.conf

• Pegue el siguiente código haciendo clic con el botón derecho del ratón dentro del editor nano en la terminal SSH.

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)

• Pulse CTRL+O y la tecla Enter para guardar.

Ahora visita el bloque del servidor principal.

cd /etc/nginx/sites-available && ls

Edite su archivo de configuración, y ponga incluir webp.conf; como se muestra a continuación.

# General
server {
    listen         80;
    server_tokens off;
    return 301 https://$host$request_uri;
}
server {
server_tokens off;
root /var/www/html;
index index.php index.html index.htm;
server_name .gulshankumar.net;
client_max_body_size 0;

    listen [::]:443 ssl http2 ipv6only=on;
    listen 443 ssl http2;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_certificate /etc/comodo/cert.pem;
        ssl_certificate_key /etc/comodo/private.pem;
        ssl_prefer_server_ciphers on;
        ssl_session_cache   shared:SSL:20m;
        ssl_session_timeout 20m;
        ssl_ciphers 'TLS13+AESGCM+AES128:EECDH+AES128';

error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;


# WebP Express rule goes here

include webp.conf;

# WebP Rule end

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

Recargue o reinicie el NGINX.

service nginx reload

Aspectos a tener en cuenta

• Si utiliza BunnyCDN, debe habilitar Vary Cache.

• Cloudflare no soporta Vary Cache. Pruebe el siguiente enfoque alternativo.

Usar WebP con Cloudflare CDN (sin plugin)

Si eres un usuario de Cloudflare Pro puedes habilitar WebP con un solo clic desde la pestaña de velocidad.

Servir WebP con BunnyCDN Optimizer (sin plugin)

BunnyCDN ofrece servicios de optimización que vienen con una solución de servicio de WebP sobre la marcha. Es una solución de un solo clic por un costo adicional de $9.5/mes.

Servir WebP con el plugin JetPack

• Simplemente instale y active el plugin JetPack
• Habilite el acelerador de sitios.

Puede notar una disminución en la calidad de la imagen que se puede arreglar usando el filtro de abajo.

Servir WebP con Imagify

Imagify es un plugin de optimización de imágenes ofrecido por WP Media, la gente detrás de WP Rocket.

• Instalar y activar el plugin de Imagify
• Introduzca la clave de la API
• En los ajustes, elige el modo de etiquetas de imagen para una configuración rápida.
• Alternativamente, puede utilizar la regla de reescritura con alguna configuración del servidor como se describe aquí. Con Apache, el proceso de adición de código .htaccess será automático, pero con NGINX hay que hacerlo manualmente.

WebP a JPG

WebP puede degradar un poco la calidad de la imagen en algunos casos. Si quieres volver a pasar de WebP a JPG, simplemente sigue estos pasos.

• Desactivar y eliminar el plugin relacionado con WebP.
• Eliminar su configuración relacionada del archivo de configuración (.htaccess)
• Borra en masa los archivos .webp y ahorra espacio en el disco.

find . -type f -name "*.webp*" -delete

Si quieres convertir un archivo WebP a JPG, puedes utilizar la herramienta disponible en CloudConvert.

---

Método manual sin Plugin

Esta sección es de carácter informativo.

Paso 1 : Añadir el formato WebP en el documento HTML

En primer lugar, usted necesita para convertir sus todas las imágenes en WebP y junto con su formato de imagen anterior como el fall-back. Hay algún plugin como Optimus que puede hacer este trabajo automáticamente. Pero, voy a mostrar un otro fácil de hacer esto manualmente.

1. Ir a este sitio web image.online-convert.com/convert-to-webp
2. Pegue su enlace de imagen y haga clic en convertir. Sus imágenes en formato WebP se descargarán
3. Ahora edite el código HTML en bruto donde aparece su imagen normal.

Digamos que, al principio, su código HTML de imagen era como este

<img src="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />

Necesitas envolver el código anterior con un poco más de marcado HTML.

<picture>
	<source srcset="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" />
	<img src="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />
</picture>

Ahora, su documento HTML está listo para servir imágenes en formato WebP.

Paso 2 : Configurar los ajustes del servidor
Sólo un paso más, necesita configurar algunos ajustes del servidor web Apache a través de .htacccess para que el navegador y el servidor web puedan tratarlo correctamente como todas las demás imágenes.

Su servidor de alojamiento web puede no saber de qué tipo mime este tipo de imágenes de formato que necesitan para servir. Así que debe añadir el tipo mime adecuado. Además, valdría la pena configurar la cabecera de caducidad para el almacenamiento en caché.

# Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

Tenga en cuenta: Asegúrese de que utiliza WordPress 5.8 o posterior.

Si estás usando un WordPress anterior a la versión 5.8 no soporta la subida de imágenes en formato WebP. Puede aparecer el error «Este tipo de archivo no está permitido por razones de seguridad» al subir imágenes .webp.

Por lo tanto, debe solucionar este problema mediante la adición de este código en su tema functions.php Sería útil en caso de que usted va a subir sus imágenes directamente desde WordPress Dashboard> opción de los medios de comunicación.

function webp_upload_mimes( $existing_mimes ) {
	// add webp to the list of mime types
	$existing_mimes['webp'] = 'image/webp';

	// return the array back to the function with our added mime type
	return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

Hecho.

Si necesitas ayuda, por favor, mira la sección de comentarios. Será un placer ayudarle.

Notas adicionales

• Si eres un usuario de Cloudways, no puedes entregar WebP con reescritura .htaccess porque utilizan NGINX específicamente para archivos estáticos. En este caso tienes dos opciones. Pedir al equipo de alojamiento que edite el archivo de configuración por usted o utilizar JavaScript o una solución basada en CDN de terceros como Bunny o CF.

Otras lecturas
Si tiene curiosidad por saber más sobre WebP, consulte estos enlaces.

• https://developers.google.com/speed/webp/
• https://en.wikipedia.org/wiki/WebP

Gracias.