El recurso multimedia del que dependeremos de forma inevitable al estructurar, contextualizar y dar forma al contenido de nuestro sitio web son, sin duda, las imágenes.
Si trabajamos con un sitio web en WordPress, esto no es la excepción. Lo interesante es que la plataforma incluye opciones nativas que nos permiten gestionar aspectos clave, especialmente uno que suele generar más complicaciones de lo esperado: el tamaño de las imágenes.
Por ello, en el siguiente artículo revisaremos en detalle cómo funcionan los tamaños de imagen en WordPress y cómo podemos ajustarlos según las necesidades de cada proyecto.
Tabla de contenidos
¿Cuál es el tamaño de las imágenes en WordPress predeterminado?
Si bien en WordPress, no existe solo un tamaño estándar predeterminado, mas bien podemos encontrar hasta cinco tamaños, los cuales se generan de manera automática cada vez que subimos una imagen a la biblioteca de medios.
Por lo que por cada nueva imagen el sistema creará cuatro variantes a partir del archivo original; cada versión es pensada para usarse en contextos distintos dentro del sitio.
Estos tamaños predeterminados son los siguientes:
- Thumbnail (miniatura): 150 × 150 px
- Medium (mediana): hasta 300 × 300 px
- Large (grande): hasta 1024 × 1024 px
- Full (tamaño completo): el tamaño original de la imagen subida
La forma en que funcionan los tamaños de imagen generados en WordPress parte de la premisa de que pueden utilizarse en casos concretos; por ejemplo, una miniatura en un listado de posts vs. una imagen en un slider requieren resoluciones distintas.
En lugar de redimensionar manualmente cada recurso, WordPress desde su core se encarga de procesar la imagen una sola vez y guardar estas versiones por separado, de modo que podamos reutilizar el mismo archivo en múltiples contextos sin perder calidad ni cargar de más el sitio.
¿Cómo cambiar el tamaño de las imágenes en WordPress?
Todos los tamaños de imagen mencionados anteriormente pueden ser modificados ajustando los valores predeterminados directamente desde las opciones de ajustes de configuración de WordPress.
El proceso es bastante sencillo siguiendo los siguientes pasos desde el panel de administracion:
Desde la vista del Escritorio de WordPress.
Ubicaremos las opciones del menú lateral izquierdo “Ajustes -> Medios”.
En la vista de Ajustes de Medios, podremos cambiar los valores en píxeles para cada uno de los tamaños predeterminados (miniatura, mediano y grande).
Una vez realizados los cambios, debemos hacer clic en Guardar cambios para aplicar la nueva configuración.
De esta manera es posible adaptar los tamaños de imagen a las necesidades que podamos tener, ya sea para miniaturas más pequeñas o imágenes destacadas más amplias.
¿Cómo añadir tamaño de imagen personalizado en WordPress?
Ahora que conocemos los distintos tamaños de imagen predefinidos en WordPress, tenemos la posibilidad de modificar sus proporciones. Sin embargo, en algunos casos puede surgir la necesidad de añadir nuevos tamaños para fines específicos.
Cuando esto sucede, existen dos caminos posibles: por un lado, implementar los cambios mediante código personalizado; por otro, utilizar un plugin de WordPress que nos ayude a simplificar el proceso. En el siguiente apartado revisaremos ambas alternativas.
Por medio de codigo personalizado
Para añadir un tamaño de imagen personalizado en WordPress, lo primero que debemos hacer a nivel lógico es registrar los nuevos tamaños en el tema y luego habilitarlos para usarlos tanto en las plantillas como dentro del editor de contenido.
Para ello vamos a recurrir a las funciones nativas de WordPress como “add_theme_support()” y “add_image_size()”.
Las siguientes modificaciones podrían aplicarse directamente en el archivo base del tema activo, llamado functions.php. Sin embargo, para proteger la integridad de archivos sensibles y, al mismo tiempo, simplificar el proceso, recurriremos a un plugin que permite agregar código personalizado de forma segura: Code Snippets.
(Visita el plugin haciendo clic en la imagen ↑)
Una vez instalado el plugin sugerido, vamos a agregar un nuevo fragmento de código de PHP comenzando con:
add_theme_support( 'post-thumbnails' );
Esta primera línea de código lo que nos permite es que el sistema pueda identificar el o los tamaños personalizados que vamos a insertar a continuación.
La sintaxis de un nuevo tamaño de imagen personalizado es el siguiente:
add_image_size( 'nombre-tamano', ancho, alto, modo_recorte );
Donde debemos definir su nombre, su ancho, su alto y por último el parámetro que determinará si la imagen debe ser recortada o no, su configuración se define en “true” o “false”.
Lo que nos queda como nuestro fragmento de codigo general algo como lo siguiente:
add_theme_support( 'post-thumbnails' ); add_image_size( 'small-thumb', 120, 120, true ); // Recorte duro (hard crop) add_image_size( 'big-thumb', 600, 600); // Recorte suave (soft crop)
Una vez agregados los tamaños de imagen personalizados, solo bastará con guardar los cambios de nuestro nuevo fragmento de código.
Cabe destacar que pese a lo que hemos realizado aún no podremos utilizar los tamaños de imagen personalizados, esto es debido a que es necesario aún hacer que el tema activo y los elementos que lo componen puedan entender cuál es el nuevo tamaño.
Para ello es necesario ubicar las instancias en la que el tema activo invoque imagenes y podamos añadir el nuevo tamano personalizado para que sea tomado en cuenta
Esto lo podemos lograr por medio de la siguiente línea de código.
<?php the_post_thumbnail( 'nombre-tamano' ); ?>
Recordemos que debemos usar el nombre exacto del nuevo tamaño personalizado.
Aún nos queda un paso más que puede ayudarnos a sacarle el máximo provecho a los tamaños personalizados que hemos creado.
Cuando insertamos una imagen dentro de determinado contenido o cuando estamos redactando una entrada, al agregar una imagen podemos alternar cual de las versiones queremos que sea visible.
Si le brindamos de “Habilidades especiales” al fragmento de código antes utilizado, y adicionamos lo siguiente, podremos ver los tamaños personalizados en el selector de “Resolución” de las imágenes a insertar.
function we_custom_image_sizes( $size_names ) {
$new_sizes = array(
'small-thumb' => 'Small Image',
'big-thumb' => 'Big Image'
);
return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'we_custom_image_sizes' );
Una vez actualizado el fragmento de código que hemos venido trabajando, al guardar los cambios y cargar una nueva imagen a nuestra biblioteca de medios, al momento de invocarla en un determinado contenido podremos apreciar los nuevos tamaños de imagen disponibles.
Por medio de plugin
Si bien el proceso explicado en el punto anterior puede ser algo intimidante, no hay de qué preocuparse, realmente es mucho más amigable de lo que parece.
De igual manera si buscamos una solución directa sin necesidad de recurrir a fragmentos de código personalizado podemos echarle un vistazo al plugin llamado “Image Sizes Controller”.
(Visita el plugin haciendo clic en la imagen ↑)
Una vez instalado el plugin, podremos acceder a los distintos paneles desplegables de acciones desde las opciones del menú lateral “Medios -> Image Sizes Controller”.
Cada desplegable corresponde a opciones de configuración, podemos comenzar echándole un vistazo al llamado “Registered Sizes” donde podremos apreciar todos los tamaños predefinidos que existen en nuestro sitio web incluyendo los tamaños personalizados que hemos creado en el ejemplo anterior.
tamaños imagenes plugin
La opción que nos interesa la podemos encontrar como “New Sizes”, al desplegarla se mostrarán los campos requeridos para poder crear nuestro nuevo tamaño de imagen personalizado.
Debemos ingresar su nombre, su ancho, su alto y el modo de corte si es alineado a la izquierda, derecha, centro, arriba o abajo.
Una vez definidos los datos deseados solo bastará con hacer clic en el botón de “Create Subsize” para establecer el nuevo tamaño de imagen personalizado.
Cabe destacar que entre la variedad de opciones disponibles varias de ellas se encuentran limitadas a la versión paga del plugin en uso.
Entre más opciones interesantes que la opción gratuita nos permite configurar es posible desactivar directamente varios o incluso todos los tamaños de imagen definidos bien sean los que existen por defecto como también los personalizados, sean creados por medio de código personalizado o el propio plugin.
¿Queremos eliminar el tamaño personalizado que hemos creado recién desde el plugin? Desde el apartado de “New Sizes” veremos destacado el tamaño que hayamos creado, en el cual tendrá un botón de “Delete”. Solo bastará con hacerle clic y confirmar la acción para borrar dicho tamaño personalizado.
Errores comunes al crear un tamaño de imagen personalizado en WordPress
Luego de trabajar con cualquiera de las dos opciones mencionadas para crear tamaños personalizados de imagen en nuestro sitio web en WordPress, es posible que aparezcan algunos inconvenientes. En esos casos, puede dar la impresión de que los cambios realizados no están funcionando correctamente.
Por ello, en este apartado haremos una especie de “control de daños” para revisar qué hacer si te encuentras con alguno de los siguientes escenarios.
Las miniaturas o thumbnails no aparecen
Esto suele pasar cuando el tamaño de imagen está definido, pero no se está usando correctamente en la plantilla o el editor. También puede ocurrir si las imágenes fueron subidas antes de crear el nuevo tamaño. En esos casos, es necesario regenerar las miniaturas para que WordPress genere las nuevas versiones.
No se cargan las imágenes en la biblioteca de medios
Ocasionalmente, al crear tamaños personalizados o usar recortes forzados, la carga puede fallar principalmente si la web previamente cuenta con algún complemento encargado de gestionar los archivos estáticos y la caché para su carga óptima, si ese es el caso solo bastará con purgar la caché y volver a intentar la carga de la imagen.
No aparecen las nuevas medidas personalizadas para las imágenes antiguas
Los nuevos tamaños solo se aplican a las imágenes que se suben después de crearlas. Las imágenes antiguas no incluyen esas medidas de forma automática. Para que aparezcan, es necesario regenerar las miniaturas como hemos comentado en el primer punto.
Vídeo de cómo gestionar tamaño de imágenes en WordPress
En el siguiente vídeo ilustramos lo fácil que es cambiar el tamaño de las imágenes en WordPress, a través de la configuración de Medios que no se generen tamaños alternativos para las imágenes, de forma que se respete y se muestre únicamente el tamaño que queramos subir.
Antes de aplicar este tipo de cambios en tu Librería de Medios (biblioteca de imágenes de WordPress), deberías hacer una copia de seguridad de WordPress o al menos de la Biblioteca de Medios, como medida de seguridad frente a cambios o borrado de imágenes no deseados.
Conclusión
La capacidad de poder administrar los tamaños de imagen en WordPress no debe ser considerada una configuración menor, sino un factor clave que puede afectar en gran medida aspectos como el rendimiento, el orden del contenido y sobre todo la experiencia del usuario.
En nuestro recorrido hemos podido apreciar las buenas prácticas que aplica WordPress por defecto generando varias versiones de una misma imagen para que pueda ser utilizada según sea el caso.
Estos tamaños predeterminados o incluso crear medidas personalizadas permite que cada imagen se adapte correctamente al diseño deseado, evitando problemas como recortes incorrectos, deformaciones o inconsistencias visuales.
Además, trabajar con dimensiones optimizadas ayuda a reducir el peso de los archivos, lo que se traduce en tiempos de carga más rápidos y un mejor desempeño general de nuestro sitio web.
Sin duda, ya podemos entender y manipular los tamaños de imagen en WordPress lo que nos permitira mejorar la presentación del contenido, sino que también tenemos la capacidad de implementar configuraciones adecuadas desde el inicio evitando dolores de cabeza futuros y garantizando un equilibrio entre calidad visual y rendimiento.
También te puede interesar:
- Galerías de imágenes en WordPress
- Crear portafolio en WordPress
- Miniaturas en WordPress
- Imagen destacada en WordPress
- SEO en imágenes de WordPress
- Optimizar imágenes de WordPress
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y Woocommerce en Webempresa.
