Cómo optimizar imágenes en WordPress en 6 pasos

Las imágenes son un elemento esencial en el contenido de las páginas web. Ayudan a transmitir mensajes, hacen más legibles y amenos tus textos y apoyan tu imagen de marca. La calidad de las imágenes cobra vital importancia en los ecommerce, los consumidores son cada vez más exigentes: Una imagen de mala calidad puede transmitirles desconfianza y aumentar las posibilidades de abandono de tu web. Hoy te enseño a optimizar las imágenes en tu WordPress para mejorar la velocidad de tu web y experiencia de tus visitantes. ¡Vamos a ello!

Paso 1: Hacer o elegir las imágenes para tu WordPress

El primer paso de todos es elegir bien qué imágenes subir a tu página web. Aunque parezca algo muy básico tiene más importancia de la que crees. Las imágenes deben ayudarte a conseguir algo del usuario, ya sea vender o conseguir atraer su atención. Antes de elegir o hacer las imágenes para tu WordPress ten en cuenta los siguientes consejos:

Si buscas las imágenes de internet:

• No subas una imagen de internet sin conocer su fuente: Si no conoces de donde procede es posible que esta imagen esté sujeta a copyright o derechos de autor. Subir las imágenes sin el consentimiento y autorización de su autor puede salirte caro.
• Utiliza bancos de imágenes gratuitos: En Internet hay muchas páginas que ofrecen imágenes e ilustraciones de gran resolución de forma gratuita. Algunas de mis páginas favoritas son:
  • Pexels
  • Unplash
  • Pixabay
  • Freepik

En caso de usar alguno de estos recursos ten en cuenta seguir los requisitos del banco imágenes y mencionar a los autores.

• Compra la licencia de uso de imagen: Si buscas imágenes muy específicas es posible que no las encuentres de forma gratuita. En este caso hay bancos de pago que ofrecen una gran variedad de fotografías y creatividades. Algunos de ellos son:
  • Adobe Stock
  • Shutterstock

Si creas tú mismo las imágenes:

• Haz fotografías de calidad: No es necesario comprarse una cámara profesional para hacer fotos de calidad hoy día. Muchos Smartphone ofrecen una resolución de imagen que no tiene nada que envidiar a las cámaras réflex. No obstante asegúrate de hacer fotografías bien enfocadas, encuadradas y con buena iluminación.
• Creación de ilustraciones y otras creatividades: Hay más recursos para ilustrar tu web a parte de la fotografía como infografías, gráficos, composiciones, ilustraciones, entre otros. Si tienes conocimientos de diseño gráfico te será sencillo crearlos con herramientas como Illustrator o Photoshop. Si no es así puedes usar recursos como Canva o contratar a un diseñador gráfico que te hará un trabajo muy profesional.

Cuida las imágenes de tus productos: Los usuarios están acostumbrados a ciertos estándares en los e-commerce. Lo suyo es que las imágenes de tu producto tengan un fondo neutro, preferiblemente blanco.

Paso 2: Elegir el formato de tu imagen

La elección del formato de las imágenes es un paso esencial. Sin entrar en cuestiones técnicas podemos establecer los 5 formatos que más se usan en diseño web, aunque probablemente uses más los dos primeros.

• JPG o JPEG: Es un formato de imagen diseñado especialmente para fotografías.
• PNG: Es un formato de compresión sin pérdida, lo que hace que la imagen pese más que el formato anterior. Es ideal para usarlo en imágenes con transparencias.
• GIF: Es un formato ideal para pequeñas animaciones. Solo puede incluir hasta 256 colores.
• SVG: A diferencia de los anteriores este formato no se forma por píxeles, si no por código. Es ideal para gráficos, logotipos e iconos, pero no para fotografías.
• WEBP: Es un formato desarrollado específicamente para ser utilizado en la web. Tiene soporte para transparencia y ofrece una muy buena compresión, te explicaré más sobre este formato en el apartado de compresión en WordPress.

Paso 3: Elegir el tamaño correcto de las imágenes web

No tiene sentido subir una imagen de 2000 px si luego no va a ocupar ese tamaño, lo único que hará será sumar tiempo de carga a tu web y dar una mala experiencia al usuario.

Elegir el tamaño correcto de las imágenes de la web puede suponer un quebradero de cabeza, pero hay algunos trucos que te pueden ser de ayuda:

• Fíjate en los tamaños de las imágenes por defecto de tu tema: Cuando eliges un tema para tu WordPress suele tener unas imágenes por defecto, normalmente el tamaño de esas imágenes suele ser el óptimo para cada uno de los bloques que componen el tema. ¡Úsalo a tu favor!
• La extensión Page Ruler: Esta extensión de Chrome permite medir las dimensiones en píxeles de todos los elementos de tu página web. Mide el máximo espacio que ocupará la imagen de tu web y créala según esas medidas.
• Ten en cuenta el Zoom en las imágenes de producto: Una tendencia en e-commerce es que los usuarios puedan hacer zoom y ver al detalle los productos, sobre todo si hablamos de tiendas de ropa. En ese caso tiene sentido subir las imágenes con un tamaño mayor al que van a ocupar. Woocommerce recomienda un tamaño mínimo de 800×800.

Redimensionar y recortar las imágenes

Siguiendo los consejos anteriores es muy probable que te veas en la necesidad de recortar y redimensionar las imágenes. Aunque para esta tarea yo siempre uso Photoshop hay herramientas gratuitas igual de válidas:

• GIMP, la alternativa de código abierto y gratuita de Photoshop.
• Canva
• Fotor

Paso 4: Comprimir las imágenes

Es importante entender que las imágenes sin optimizar aumentan considerablemente el peso de una página web. Si aún así no entiendes la gravedad de tener una web llena de imágenes pesadas ten en cuenta estas consideraciones:

• Google penaliza las páginas con gran tiempo de carga.
• Una gran velocidad de carga puede suponer el abandono de la web por parte del usuario y por tanto puede disminuir tus ventas online.
• Al tener imágenes pesadas vas a necesitar más espacio de hosting, que supone pagar un mayor precio.

Si quieres detectar cuánto tiempo supone la carga de las imágenes en tu web puedes ir a la herramienta de GTMetrix. Esta herramienta ofrece el detalle de cuanto pesan en total las imágenes de cada página de tu web.

Cómo comprimir las imágenes

Comprimir las imágenes antes de subirlas a tu WordPress hará que el peso total de tu página sea mucho mayor. Para ello hay herramientas gratuitas que pueden ayudarte en esta tarea como Compressor.io y Compressjpeg. Ambas disminuirán considerablemente el peso de tus imágenes sin perder apenas calidad.

La compresión será mayor en aquellas imágenes con pocos colores y detalle como puede ser el caso de algunas ilustraciones. Es un proceso sencillo que te dará grandes resultados.

Paso 5: Subir imágenes a WordPress

Una vez redimensionas y comprimidas las imágenes en WordPress es el momento de subirlas a la plataforma.

El proceso es muy sencillo: En la sección de medios (columna de la izquierda) y pulsa a añadir nuevo. Posteriormente puede añadirlo a través de tu editor de texto o constructor visual del tema que hayas elegido para tu web.

Optimizar imágenes para SEO

Sí, las imágenes también pueden ayudar al SEO. Una buena optimización puede hacer que Google entienda mejor el contenido y por tanto favorezca en tu posicionamiento en las SERP o que incluso aparezcas en su apartado de Google Imágenes. Para una correcta optimización SEO de tus imágenes revisa lo siguiente:

• El nombre del archivo: Antes de subir tu imagen a WordPress revisa el nombre del archivo. Evita nombres como imagen-prueba-1.jpg, sería desaprovechar una oportunidad de oro. Incluye la palabra clave que quieras posicionar o alguna variante.
• Alt: El texto alt es un atributo para que personas con discapacidad visual pueda entender el contenido de la imagen. Esto quiere decir que las palabras incluidas en este apartado deben describir la imagen lo más fidedignamente posible. Además tienes que tener en cuenta que Google no sabe interpretar imágenes, si no el texto, por lo que el alt también ayudará a tu posicionamiento.
• Title: El título es el texto que aparece al pasar el ratón por encima de tu foto y lo que aparecerá en caso de que la imagen no se cargue correctamente. Te recomiendo encarecidamente que también completes este campo.
• La leyenda es el texto que aparece debajo de la imagen, puedes usarlo de modo descriptivo para tus usuarios o para añadir la autoría en caso de que hayas descargado la fotografía o ilustración de un banco de imágenes.
• La descripción es un texto que suele ser más largo y que sirve para hacer una explicación un poco más alargada de la imagen.

• Crea un sitemap de imágenes: Si consideras que las imágenes de tu web pueden ayudarte a captar tráfico y quieres que aparezcan en Google Imágenes ayuda a los buscadores a rastrear las imágenes de tu sitio. Para ello es necesario que las añadas a un archivo sitemap, si no lo haces puede que Google y los otros buscadores nunca indexen tus imágenes. Plugins como All In One Seo, RankMath y Yoast SEO hacen que la inclusión de imágenes en el sitemap sea una tarea muy sencilla. Tan fácil como activar la opción en sus ajustes.

Paso 6: optimizar las imágenes en WordPress

Una vez subidas las imágenes a WordPress aún hay más cosas que podemos hacer para mejorar la optimización de las imágenes.

Miniatura de las imágenes

Lo primero será configurar los ajustes de las miniaturas de las imágenes. Las miniaturas son copias de menor tamaño que imagen original.

Cuando subimos una imagen a la web lo hacemos pensando en el diseño en una pantalla de ordenador. Sin embargo cuando el usuario accede desde otro dispositivo con una pantalla de menor tamaño el navegador debe proporcionar una imagen más pequeña.

De esta manera el navegador tiene que utilizar recursos y tiempo para descargar la imagen original y redimensionarla, sin embargo al contar con las miniaturas la descarga se realiza de forma mucho más rápida.

La creación de estas miniaturas puede configurarse en el apartado Ajustes> Medios. Por defecto WordPress tiene activado los checks de creación de miniaturas, sin embargo hay plugins de optimización de imágenes que hacen sus propias miniaturas y pueden alterar el estado de estos checks.

Plugins de optimización de imágenes

En caso de que tus imágenes ya estén subidas a la web y no hayas podido redimensionarlas y comprimirlas antes de subirlas puedes usar plugins para realizar estas tareas en las imágenes de la web como Shortpixel, Optimizador.io, Smush Pro e Imagify.

Eliminar las imágenes que no uses

En  ocasiones tenemos la biblioteca de medios repletas de imágenes que no usas en la web y que están ocupando espacio en tu disco.

Para arreglar esto existen plugins como DNUI que eliminan las imágenes que no se usan en tu WordPress. Este tipo de plugins siempre deben utilizarse con precaución ya que puede tener errores, para ello haz siempre una copia de tus imágnes y sitio web antes de lanzarte a borrar imágenes.

Lo más recomendable es ser consciente de las imágenes que subes a la biblioteca y borrar aquellas que no has usado. Otra tarea que puedes hacer para liberar espacio es eliminar aquellas imágenes que vienen por defecto en tu tema.

LazyLoading

A parte de la compresión y optimización hay otras mejoras relacionadas con las imágenes que pueden ayudarte a reducir el tiempo de carga y una de ellas es el lazy loading.

Por defecto el navegador carga todo el contenido de tu página aunque este no sea visible, incluidas las imágenes. La técnica de lazy loading permite aplazar la carga de las imágenes y de iframes hasta que aparezcan en pantalla lo que mejora la velocidad de carga de tu página.

Puedes aplicar este tipo carga a través de plugins como WP Rocket, Litespeed y A3rev.

Webp

Si eres de esas personas que ya saben lo importante que es la velocidad web y han visitado la herramienta de Google PageSpeed seguro que te habrás encontrado con el aviso de “usa formatos de imágenes de próxima generación” en más de una ocasión. Al desplegar la recomendación te encontrarás que Google recomienda el uso de formato Webp para tus imágenes.

Webp es un tipo de formato que surgió en 2010 de la mano de Google y que está pensada exclusivamente para internet. Permite reducir el tamaño de las imágenes (hasta un 30% menos que otros formatos) y por tanto el tiempo de carga de estas.

Puedes convertir tus imágenes a Webp a través de plugins como Imagify, Litespeed (en la versión premium) y Webp Express (gratis).

Resumen de optimización de imágenes

En conclusión, la optimización de imágenes es un proceso que comienza desde la elección de las mismas hasta las mejorar dentro de tu WordPress. Siguiendo estos pequeños pasos notarás mejoras notables en la carga de tu web y en tu posicionamiento SEO, dos cuestiones que están relacionadas.

Este es un tema que da para extenderse (como ya has podido ver jeje), pero lo ideal es que te quedes con la idea general del proceso para que aplicando estos sencillos consejos consigas grandes resultados:

• Paso #1: Elegir imágenes de calidad
• Paso #2: Redimensionar las imágenes con el tamaño adecuado
• Paso #3: Elegir el formato correcto según el tipo de imagen.
• Paso #4: Comprimir la imagen
• Paso #5: Subir la imagen en WordPress y optimizarla en SEO
• Paso #6: Mejorar las imágenes dentro del WordPress a través de la creación de miniaturas, compresión y lazy loading.

Espero que estos consejos te ayuden con tu web. Si es así cuéntamelo en comentarios. ¡Te leo!