Optimizar imágenes en WordPress

Una de las claves en Web Performance es la optimización de imágenes, algo que en WordPress se puede hacer mediante algunos plugins, pero también en el propio servidor.

Cuando subes una imagen, la original se mantiene y se generan las imágenes más pequeñas. Pero esas imágenes por defecto no están optimizadas y que las genera el propio PHP, heredando el ruido que puede incluir la imagen original.

Y como queremos poder optimizar las imágenes en nuestro propio servidor, vamos a ver cómo conseguirlo.

Este tutorial ha sido creado en un VPS de Clouding.io. Puedes crear tu propio VPS desde 3€/mes.

Además, tienes la posibilidad de crear tu VPS con la imagen de WordPress en un clic.

COLABORACIÓN

Requisitos

Necesitamos tener instalado WP-CLI y un sistema operativo tipo Ubuntu o CentOS. En la actualidad requiere PHP 7 para funcionar.

Además, instalaremos una serie de aplicaciones que nos permitirán optimizar cada uno de los tipos de imágenes:

• Jpegoptim: para la optimización de JPEG.
• OptiPNG: para la optimización de PNG.
• pngquant: para la optimización de PNG.
• Gifsicle: para la optimizaciónd e GIF.
• SVGO: para la optimización de SVG.
• cwebp: para la optimización de WebP.

Podemos instalarlos en Ubuntu

apt -y install jpegoptim optipng pngquant gifsicle webp
npm install -g svgo@1.3.2

O podemos instalarlos en CentOS

dnf -y install jpegoptim optipng pngquant gifsicle libwebp-tools
npm install -g svgo@1.3.2

Instalación

Para instalarlo y hacer que funcione revisaremos primero si tenemos por defecto PHP 7 u otra versión. SI tenemos ya un PHP 7.2+ el sistema funcionará directamente. Si tenemos PHP 8.0 deberemos hacer un pequeño truco.

wp cli info

Una vez sepamos si tenemos PHP 7 u 8, usaremos los comandos de una manera u otra. Como en general PHP 8 ya es un por defecto en los sistemas, voy a aplicar el comando con «el truco».

Para empezar instalaremos el paquete que permite la optimización.

/usr/bin/php7.4 "$(which wp)" package install typisttech/image-optimize-command:@stable --allow-root

O directamente

wp package install typisttech/image-optimize-command:@stable

Funcionamiento

Una vez lo tengamos, podemos ver la ayuda del comando.

wp help image-optimize

Y podemos lanzar una actualización masiva de todas las imágenes que tenemos en el Media de nuestro WordPress.

/usr/bin/php7.4 "$(which wp)" media regenerate --allow-root
/usr/bin/php7.4 "$(which wp)" image-optimize batch --limit=9999999 --allow-root

O directamente

wp media regenerate
wp image-optimize batch --limit=9999999

A partir de este momento tendremos nuestras imágenes optimizadas para que nos den una muy buena nota en las herramientas que analizan el Web Performance.

Sobre este documento

Este documento está regulado por la licencia EUPL v1.2, publicado en WP SysAdmin y creado por Javier Casares. Por favor, si utilizas este contenido en tu sitio web, tu presentación o cualquier material que distribuyas, recuerda hacer una mención a este sitio o a su autor, y teniendo que poner el material que crees bajo licencia EUPL.