WordPress sitio web imágenes convertidas automáticamente WebP tutoriales completos

En el proceso de optimización del rendimiento de un sitio web, las imágenes suelen ser los "asesinos invisibles" que consumen el tiempo de carga de la página. Para blogs, portfolios o sitios de comercio electrónico con más imágenes, puede utilizar la función WebP Como formato de compresión de imágenes para reducir el tamaño de las páginas.

Este artículo le enseñará a WordPress Conversión automática de imágenes a formato WebP en sitios webTanto si utiliza un plugin como si no, puede encontrar una solución para su sitio.

¿Qué es WebP y cuáles son sus ventajas?

WebP es un formato de imagen moderno introducido por Google.WebP es una potente herramienta para comprimir significativamente el tamaño de la imagen sin perder calidad. WebP es más pequeño y más rápido que los tradicionales JPEG o PNG y es ampliamente compatible con los principales navegadores (por ejemplo, Chrome, Edge, Firefox, Safari).

Entre las ventajas de WebP se incluyen:

Menor tamaño de archivo que JPEG 25%-35%
Admite compresión con y sin pérdidas
Soporte para fondos transparentes (similar a PNG)
Mejorar la velocidad de carga del sitio y la puntuación PageSpeed
sitio web SEO amistosamente

Método 1: Conversión automática a WebP mediante un plug-in (recomendado)

Para los sitios web con mucho contenido de imágenes, el uso de un plugin es lo que más tiempo ahorra. Estos son algunos de los plugins de WordPress más populares que admiten la conversión automática de las imágenes cargadas al formato WebP.

1. Optimizador de imágenes EWWW

Optimización automática de imágenes y generación de versiones WebP
Soporte para aceleración CDN (opcional)
No es necesario cambiar la dirección del enlace de la imagen

Pasos de la instalación:

Instale y active el plugin
Vaya al backend: Ajustes > Optimizador de Imagen EWWW
Marque la opción "Imagen WebP

abre .htaccess Compatible con la función de cambio automático de WebP
Posibilidad de optimizar por lotes las imágenes existentes

Ideal para: centros pequeños y medianos centrados en el tratamiento automatizado y la compatibilidad.

2. Imagify

dejar (a algn.) Cohete WP Equipo desarrollado para la compatibilidad
Versión gratuita 20MB al mes, adecuada para sitios web ligeros
Admite compresión automática y conversión a WebP

Uso:

Instale el plugin y registre una cuenta
Vaya a Configuración y active la opción WebP
Activar "Mostrar versión WebP a navegadores compatibles"
Optimización por lotes de imágenes antiguas

Ideal para: usuarios que buscan altos índices de compresión y operaciones automatizadas.

Método 2: Utilizar una CDN para automatizar el procesamiento de WebP (por ejemplo, Cloudflare)

Si su sitio ha habilitado CDN(Content Delivery Networks), algunas CDN ofrecen conversión automática a WebP sin necesidad de un plugin nativo de WordPress.

Por ejemplo, Cloudflare:

empezar a utilizar Optimización de imágenes polacas(régimen de pago)

Marque la opción "WebP
Todos los navegadores compatibles con WebP cargan automáticamente imágenes con formato WebP cuando visita el sitio.

Pros:

Esto no consume recursos de alojamiento
El procesamiento de imágenes se deja en manos del servidor periférico
Reducción de la carga del servidor

Método 3: Script local + .htaccess Reglas de reescritura (sin programa complementario)

Para los usuarios que no quieran depender del plugin, pueden utilizar scripts de servidor combinados con las reglas de reescritura de Apache/Nginx para conseguir que las imágenes subidas se conviertan automáticamente en WebP.

Procesos básicos:

Instalación en el servidor mediante el comando cwebp Herramientas (cortesía de Google)
- Comandos para sistemas Ubuntusudo apt update sudo apt install webp

Escriba un script de shell que cargue la carpeta con el archivo .jpg/.png Conversión por lotes de imágenes a .webp
existe .htaccess Añade una sentencia condicional al

<code>RewriteCond %{HTTP_ACCEPT} image/webp<br>RewriteCond %{REQUEST_FILENAME} (. *)\. (jpe?g|png)$<br>RewriteCond %{REQUEST_FILENAME}.webp -f<br>RewriteRule (. +)\. (jpe?g|png)$ $1.webp [T=image/webp,E=webp,L]<br></code>

La dirección de la imagen sigue siendo la misma y el sistema carga el WebP de forma inteligente.

Advertencias:

Para usuarios con privilegios de alojamiento VPS o en la nube
Tenga cuidado, le recomendamos que primero lo instale en un sitio de pruebas.

¿Cómo se gestiona la compatibilidad de las imágenes WebP y el mecanismo fallback?

Hoy en día, los principales navegadores soportan básicamente WebP, todavía hay algunos dispositivos antiguos pueden no ser compatibles. Por lo tanto:

El plugin retrocede automáticamente para mostrar la imagen original (por ejemplo, JPEG)
Utilice la etiqueta de imagen + fuente para especificar manualmente WebP y formatos alternativos.
Los proveedores de CDN también determinan automáticamente si deben enviar WebP en función del dispositivo que accede a él.

Código de ejemplo:

<code><br> <br> <img src="imagen.jpg" alt="texto descriptivo"><br><br></code>

¿Cuál le conviene más?

programa	persona recomendada	problema	rendimiento
Plug-ins (por ejemplo, EWWW)	La mayoría de los sitios	★☆☆☆☆	★★★★☆
Conversión automática CDN	Sitios que utilizan CDN	★☆☆☆☆	★★★★★
Scripts locales + htaccess	Premium / VPS	★★★★☆	★★★★★

Si eres un webmaster o blogger habitual, utilizar el plugin con WebP activado hará la mayor parte de las tareas de optimización.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres