Cómo optimizar automáticamente las imágenes en WordPress con WebP sin plugins

1. Preparativos previos

1.1 Verificar la versión de PHP

Antes de realizar cambios en tu sitio de WordPress, asegúrate de que estás utilizando una versión de PHP compatible con la conversión de imágenes a WebP. WordPress requiere al menos PHP 5.2.4, pero es recomendable usar PHP 7.0 o superior para mejorar el rendimiento y la seguridad. Puedes comprobar tu versión accediendo al panel de administración de WordPress y dirigiéndote a la sección «Estado del sitio» dentro del menú «Herramientas».

1.2 Comprobar compatibilidad del servidor

No todos los servidores web soportan imágenes en formato WebP. La mayoría de los modernos lo hacen, pero si usas un hosting compartido o una configuración antigua, es importante confirmarlo. Puedes verificar la compatibilidad mediante herramientas en línea o consultando a tu proveedor de hosting.

1.3 Realizar una copia de seguridad

Antes de comenzar el proceso de optimización, haz una copia de seguridad completa de tu sitio. Esto permitirá revertir cambios en caso de problemas. Puedes usar el sistema de copias de seguridad de tu hosting o herramientas como UpdraftPlus o BackWPup, que permiten programar copias automáticas.

1.4 Habilitar la compresión Gzip

La compresión Gzip permite transmitir archivos más rápido a los navegadores, mejorando la carga de tu sitio. La mayoría de los servidores ya la tienen activada, pero puedes verificarlo en tu configuración. Si tienes acceso al archivo .htaccess, añade lo siguiente para habilitar la compresión:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json
</IfModule>

Este paso ayuda a reducir el peso de los archivos enviados, optimizando aún más el rendimiento del sitio.

2. Pasos detallados

2.1 Acceder a tu servidor vía FTP o cPanel

Para optimizar las imágenes, necesitarás acceder a los archivos de tu servidor. Puedes hacerlo de dos maneras:

Conectar mediante FTP

Para conectarte vía FTP, usa un cliente como FileZilla. Ingresa los datos de acceso (servidor, usuario y contraseña) y conéctate. Una vez dentro, podrás gestionar los archivos del sitio.

Acceder a cPanel y File Manager

Si prefieres cPanel, inicia sesión en tu cuenta de hosting y busca «Administrador de Archivos». Desde ahí, navega hasta la carpeta donde están almacenadas las imágenes.

Importante: Manipular archivos erróneamente puede generar fallos en el sitio. Asegúrate de seguir estos pasos con precaución.

2.2 Crear un directorio para WebP

Para mantener organizadas las imágenes optimizadas, es recomendable crear un directorio específico.

Localizar el directorio de imágenes

Las imágenes en WordPress se almacenan en wp-content/uploads, organizadas por año y mes. Puedes acceder a esta carpeta usando FTP o cPanel.

Crear una carpeta ‘webp’

Dentro de la carpeta uploads, crea una subcarpeta llamada webp. Esto permitirá almacenar las imágenes convertidas y facilitar su gestión. Asegúrate de que la carpeta tenga los permisos adecuados (755) para que WordPress pueda acceder a ella.

3. Convertir imágenes a WebP mediante línea de comandos

Una vez organizado el almacenamiento, es momento de convertir las imágenes.

3.1. Acceder a la línea de comandos (SSH)

Si tu hosting permite acceso SSH, conéctate usando un cliente como PuTTY o la terminal de tu sistema. Para acceder, ingresa:

ssh usuario@tu-servidor.com

3.2. Instalar ImageMagick o cwebp

Para convertir imágenes a WebP, necesitas una herramienta de conversión. Puedes instalar cwebp (de Google) con:

sudo apt-get install webp

Si ya está instalado, el sistema te lo indicará.

3.3. Convertir imágenes con cwebp

Para convertir una imagen individual, usa:

cwebp imagen.jpg -o webp/imagen.webp

Si deseas convertir todas las imágenes de una carpeta automáticamente, usa este script:

for f in *.jpg; do cwebp "$f" -o "webp/${f%.jpg}.webp"; done

Esto convertirá todas las imágenes JPG y las guardará en la carpeta webp.

4. Configurar el servidor para servir imágenes WebP

Para que WordPress utilice automáticamente las imágenes WebP, debes modificar el archivo .htaccess.

4.1. Localizar el archivo .htaccess

Este archivo está en la raíz de tu instalación de WordPress. Si no lo ves, activa la opción de «Mostrar archivos ocultos» en tu cliente FTP o cPanel.

4.2. Modificar el archivo .htaccess

Abre el archivo y añade las siguientes reglas para que el servidor entregue WebP en lugar de JPG o PNG cuando sea posible:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_FILENAME}.webp -f
    RewriteRule ^(.*)$ $1.webp [T=image/webp,E=Accept:yes]
</IfModule>

Guarda los cambios y asegúrate de que la configuración es correcta.

5. Pruebas y validaciones

5.1. Verificar la carga de imágenes WebP

Abre tu sitio en Google Chrome o Firefox. Usa la herramienta de inspección (F12 → Pestaña «Red») para verificar que las imágenes se están cargando en formato WebP.

Si las imágenes siguen cargando en JPG o PNG, revisa la configuración del .htaccess y confirma que los archivos WebP existen en el servidor.

5.2. Evaluar la velocidad del sitio

Usa herramientas como Google PageSpeed Insights o GTmetrix para analizar el rendimiento antes y después de la optimización. Si la puntuación ha mejorado, significa que la optimización ha sido efectiva.

6. Errores comunes y cómo solucionarlos

6.1 Imágenes que no se muestran correctamente

• Verifica que los archivos WebP existen y tienen permisos correctos.
• Asegúrate de que las reglas en .htaccess están bien escritas.

6.2 Problemas de compatibilidad con navegadores

• Algunos navegadores antiguos no soportan WebP. Puedes usar el elemento <picture> en HTML para servir versiones alternativas.

6.3 Errores de permisos en el servidor

• Asegúrate de que las carpetas y archivos WebP tienen permisos 755 y 644 respectivamente.
• Consulta a tu proveedor de hosting si las reglas del servidor bloquean el acceso a archivos WebP.

7. Consejos adicionales para optimización y seguridad

7.1 Monitorear el tamaño de las imágenes

Asegúrate de que las imágenes convertidas no sean más grandes de lo necesario. Usa herramientas como TinyPNG o Squoosh para reducir aún más el tamaño.

7.2 Usar herramientas de análisis de rendimiento

Revisa regularmente la velocidad de tu sitio con herramientas como Google PageSpeed Insights.

7.3 Seguridad al manipular archivos del servidor

Siempre realiza copias de seguridad antes de modificar archivos como .htaccess y usa conexiones seguras (SFTP o SSH) para evitar riesgos.

8. Preguntas frecuentes (FAQ)

¿Qué navegadores soportan WebP?

La mayoría de los navegadores modernos como Chrome, Firefox, Edge y Opera soportan WebP. Sin embargo, versiones antiguas de Safari e Internet Explorer pueden no hacerlo.

¿Afecta WebP la calidad de imagen?

No necesariamente. WebP ofrece una compresión eficiente sin pérdida de calidad perceptible, pero depende de los ajustes de conversión.

¿Puedo volver a formatos anteriores?

Sí. Si tienes copias de seguridad de los archivos originales, puedes revertir el cambio eliminando las imágenes WebP y restaurando los archivos JPG o PNG.