Cómo añadir tamaños de imagen personalizados en tu WordPress

La optimización de imágenes es un factor clave para ofrecer una buena experiencia de usuario UX, y así lo recomienda la herramienta de optimización Google PageSpeed Insight. Uno de los fallos comunes (más olvidados por los pseudo profesionales) y que se descubren en muchas de las auditorías de Posicionamiento SEO es la optimización de imágenes, puesto que en la mayoría de los casos estás imágenes son redimensionadas via CSS y no optimizadas para el tamaño en el que se muestran.

La optimización de imágenes es un aspecto a tener en cuenta en las primeras fases del diseño (de no ser así, tardarás mucho más en maquetar la web que estás diseñando y saturarás además los recursos de tu servidor con este tipo de malas prácticas).

Ya que en el 90% de los casos se usan CMS como WordPress o similares, casi todo lo relacionado con el desarrollo ya está predefinido y bastante cerrado para usuarios no expertos. Esta tarea de optimización que tiene como objetivo, reducir el peso de las imágenes, puede hacerse tanto con herramientas del tipo Photoshop, como usando el plugin Smush.it (que se instala gratis en WordPress) y optimiza las imágenes al subirlas a tu web de forma automática (lo que reduce en mucho los costes en profesionales y horas de optimización de imágenes).

Muchos diseñadores web prefieren diseñar sin planificar previamente aspectos como la usabilidad, experiencia de usuario UX, o el posicionamiento SEO y simplemente se dejan llevar por su creatividad y diseñan libremente sin ni siquiera optimizar las imágenes que suben a la web. Lo que suele pasar en estos casos es que las imágenes que se utilizan para el diseño web son bastante más pesadas que si hubieran sido optimizadas previamente para cada uno de los tamaño al que han sido redimensionadas (esto quiere decir que se ha modificado el tamaño de la imagen mediante CSS para que visualmente tenga otro formato, pero la imagen que realmente se está cargando es de mayor tamaño, y posiblemente pese 100 veces más de lo que se necesitaría. Si esto te ocurre con 500 imágenes, en lugar de con tres, el consumo de recursos será enorme y repercutirá en el precio de tu Hosting)

Por qué es importante optimizar las imágenes de tu web

Es muy importante optimizar las imágenes que subimos a la web por los siguientes motivos:

1. Mantener una buena práctica de diseño web
2. Reducir el gasto innecesario de los recursos contratados en el Hosting
3. Mejorar la experiencia de usuario (UX)
4. Mejorar la velocidad de carga del servidor
5. Mejorar el posicionamiento SEO y WPO

Por qué además de optimizar las imágenes necesitamos crear tamaños personalizados para nuestro proyecto

Como hemos explicado antes, el tema de la optimización de imágenes es importantisimo para el posicionamiento SEO y WPO.

Aunque optimicemos todas las imágenes antes de subirlas al servidor, estas deben mostrarse al tamaño exacto al que han sido optimizadas. Normalmente WordPress trabaja con 3 tamaños de imágenes y como se ve en la imagen siguiente, pueden modificarse las dimensiones (lo que ocurre es que en un proyecto profesional, estos 3 tamaños no son suficientes)

Todas las imágenes que se muestran en la web son optimizadas (por ejemplo usando Smush.it) para los tamaños que se han configurado en el apartado Ajustes WordPress > Medios, tal y como se muestra en la imagen superior (los tamaños son: «miniatura», «medio» y «grande», aunque también podremos encontrarnos con el tamaño de imagen «original» en el momento de adjuntar una fotografía a un Post). El resto de fotografías o imágenes usadas en la web que no correspondan a esos tamaños serán redimensionadas por CSS, y Google interpretará que nuestras imágenes no han sido optimizadas correctamente o que no se han seguido protocolos sostenibles de diseño y desarrollo UX.

Aprende a añadir los tamaños de imágenes que necesites vía archivo function.php de tu Child Theme

Añade el siguiente código en el archivo function.php de tu Child Theme para personalizar los tamaños que necesites en tu web.

Este archivo se encuentra en la siguiente ruta:

raiz WP > wp-content > themes > actual-theme-child > function.php

Descarga el código (testeado y que funciona)

Usa los nuevos tamaños de imágenes en la plantilla de WordPress para páginas dinámicas

Una vez definidos los nuevos tamaños para las imágenes (en el archivo function.php de tu ChildTheme) solo necesitarás buscar en tu plantilla donde quieras imprimir el nuevo tamaño y añadir el siguiente código (o modificar el ya existente).

Podrían ser para las miniaturas que se muestran en 3 columnas de tu categorías del Blog, o en las imágenes de tu Shop o Ecommerce, portfolio, etc…:

<?php the_post_thumbnail('mini'); ?>

¿Ya tenías imágenes subidas a tu página web, has modificado los tamaños y seleccionado los que corresponden, pero no ves los cambios?

Para poder ver los cambios en imágenes ya subidas necesitarás regenerar las imágenes existentes. Utilizar el plugin Regenerate Thumbnails para actualizarlas (todas) de forma automática.