Los tamaños de las imágenes en WordPress son más complejos de lo que te puedes esperar. Es esencial entender cómo funcionan los tamaños de las imágenes en WordPress, cuáles son los tamaños de las imágenes por defecto y cómo definir los tamaños de las imágenes personalizadas para gestionar tu sitio web de forma eficaz.

Con estos conocimientos, te asegurarás de tener el tipo de imágenes adecuado, en los tamaños apropiados y en las ubicaciones correctas, para que puedas sacar el máximo provecho de tu estrategia de contenido visual.

Estas tácticas también mejorarán la capacidad de compartir tus publicaciones, lo que se traducirá en más visibilidad y tráfico. Las estadísticas revelan que los lectores solo recuerdan el 10% del contenido de texto que leen al cabo de tres días, pero esta cifra se dispara hasta el 65% si añades imágenes visualmente atractivas a tu contenido.

En esta extensa guía, aprenderás todo lo que necesitas saber sobre el tamaño de las imágenes en WordPress.

¿Interesado? ¡Empecemos!

Cómo gestiona WordPress las imágenes que subes

Subir imágenes a WordPress es bastante sencillo, pero en el backend de WordPress ocurren muchas cosas al manejarlas.

Lo primero que hace WordPress cuando subes una imagen es crear tres tamaños diferentes de tu imagen. Esto significa que terminas con cuatro imágenes por cada una que subes:

WordPress crea todos estos tamaños diferentes para servir tus imágenes en el tamaño más apropiado para cada visitante. Tu sitio web mostrará siempre las imágenes correctas a tus lectores en función del dispositivo que estén utilizando, agilizando y mejorando su experiencia.

Siempre puedes editar tus imágenes manualmente para proporcionar estos tamaños adicionales, pero hacerlo con precisión en una herramienta como Photoshop no es una tarea fácil. Implicará una buena cantidad de trabajo tedioso, por lo que WordPress te ahorra la molestia.

Entender el tamaño de las imágenes en WordPress puede parecer sencillo, pero sin los conocimientos adecuados en tu haber, podrías perder visitantes y oportunidades de compartir contenidos.Click to Tweet

Tamaños de las imágenes en WordPress: Aspectos esenciales a tener en cuenta

Antes de entrar en los aspectos más técnicos de los tamaños de las imágenes de WordPress, debes saber algunas informaciones críticas.

Hemos hablado de cómo WordPress crea tres tamaños de imagen por defecto para ti, pero ¿qué pasa si necesitas un tamaño diferente a los valores predeterminados de WordPress? ¿Y si quieres más tamaños en general?

Buenas noticias. Puedes hacerlo fácilmente. WordPress te permite cambiar los tamaños de imagen por defecto y añadir todos los tamaños adicionales que quieras. Lo explicaremos con más detalle más adelante.

Pero antes de llegar a eso, debes saber que hay requisitos específicos para que esto funcione como quieras.

Una de ellas es que debes intentar subir tus imágenes en el tamaño más grande que vayas a necesitar. Aunque WordPress la hará más pequeña para los dispositivos más pequeños, utilizará el tamaño completo (tamaño original) donde la imagen necesita estar en su mayor tamaño.

Supongamos que subes una imagen que es más pequeña que el tamaño más grande que ha definido en WordPress. En ese caso, WordPress no mostrará esa imagen en particular en el tamaño más grande correctamente. Además, habrá una notable pérdida de calidad.

Dicho esto, también debes asegurarte de no subir imágenes que sean más grandes de lo que debe ser el tamaño más grande. WordPress nunca utilizará este tipo de imágenes, ya que son demasiado grandes y se comerán un espacio innecesario en tu servidor.

Por lo tanto, debes comprobar el tamaño de la imagen que vas a subir y asegurarte de que es del tamaño necesario antes de subirla a WordPress, pero no más grande que eso.

¿Dónde y cómo almacena WordPress tus imágenes?

En lo que respecta a tu panel de administración, WordPress almacena tus imágenes subidas en la Biblioteca de Medios. Puedes ver todas tus imágenes subidas pasando el ratón por la opción Medios y haciendo clic en Biblioteca.

La biblioteca multimedia de WordPress.

La biblioteca multimedia de WordPress.

Puedes ordenarlas por tipo de medio (imagen, vídeo, audio, etc.) y por fecha. Sin embargo, ten en cuenta que solo podrás ordenar las imágenes por fecha si no has desactivado esta función en los Ajustes.

También hay un cuadro de búsqueda a la derecha para ayudarte a encontrar la imagen que has subido. Solo tienes que escribir una palabra que hayas utilizado en el título, el pie de foto o la descripción de tu imagen para localizarla.

Tus imágenes se almacenan en las carpetas de subida de tu sitio (wp-content/uploads/). Para acceder a esta carpeta, tendrás que utilizar un cliente FTP/SFTP. Habrá varios subdirectorios dentro de la carpeta de subidas de tsu sitio que albergarán tus imágenes por fecha de subida (suponiendo que hayas dejado activada la opción de ordenar por fecha en tus Ajustes).

También puedes crear carpetas personalizadas para tus archivos multimedia, pero te recomendamos hacerlo solo si te consideras un usuario avanzado.

¿Cuáles son los tamaños de imagen por defecto de WordPress?

Cuando se trata de WordPress y los tamaños de las imágenes, siempre tenemos cuatro diferentes, con tu archivo de imagen original y los tres tamaños diferentes que WordPress crea por defecto:

Nuevamente, como mencionamos antes, querrás subir tus imágenes en 1024px si planeas usar solo estos tamaños de imagen por defecto. Eso permitirá que tus imágenes se sirvan correctamente incluso en el tamaño más grande, lo que puede no ser posible si tu imagen es de un tamaño más pequeño que el tamaño más grande que WordPress está utilizando (que es 1024px por defecto).

Cómo cambiar el tamaño de las imágenes por defecto (y cuándo es necesario hacerlo)

Aunque los tamaños de imagen por defecto de WordPress funcionan bien para la mayoría de los usuarios, algunos pueden tener requisitos diferentes. Es posible que prefieran un tamaño ligeramente mayor para sus miniaturas o un tamaño menor para las imágenes grandes.

Cambiar los tamaños de las imágenes por defecto en WordPress tendría sentido cuando te encuentras editando la mayoría de las imágenes que subes porque los tamaños de las imágenes por defecto de WordPress no son adecuados para tu caso de uso.

Antes de añadir nuevos tamaños de imagen personalizados sobre los tamaños de imagen por defecto, ten en cuenta que estarías almacenando muchos más archivos de imagen en la base de datos de tu sitio de lo que necesitas. Eso puede provocar problemas de rendimiento en tu sitio y consumir más espacio del necesario.

Lo mismo ocurre con los sitios basados en imágenes que deben ceñirse a tamaños específicos. A los fotógrafos, diseñadores y otras personas que sirven imágenes pesadas les gusta tener un tamaño consistente en todo el sitio para garantizar la uniformidad.

Del mismo modo, algunas páginas de aterrizaje también necesitan mostrar tamaños de imagen particulares, y los tamaños de imagen por defecto de WordPress pueden no ser adecuados. Y una tienda de comercio electrónico suele necesitar utilizar miniaturas más grandes, que revelen más detalles.

Existen muchas otras razones por las que puedes querer cambiar los tamaños de imagen por defecto, pero ya te haces una idea de cuando cambiarlos.

WordPress también lo entiende, y por eso permite cambiar estos valores por defecto.

Pasos para cambiar el tamaño de las imágenes por defecto de WordPress

Este es el proceso paso a paso para cambiar el tamaño de las imágenes por defecto en WordPress.

Paso 1: Pasa el ratón por encima de Ajustes y haz clic en la opción de Medios que aparece:

Ajustes multimedia de WordPress para cambiar el tamaño de las imágenes por defecto.

Ajustes multimedia de WordPress para cambiar el tamaño de las imágenes por defecto.

Paso 2: Cambia los tamaños a lo que quieras editando las cifras como hicimos a continuación:

Ejemplos de tamaños de imagen actualizados en la configuración de medios.

Ejemplos de tamaños de imagen actualizados en la configuración de medios.

Paso 3: Haz clic en el botón Guardar cambios en la parte inferior.

Ahora, todas las imágenes que subas a partir de este punto estarán en estos nuevos tamaños por defecto.

Algunos tutoriales te sugerirán que introduzca «0» para los tamaños de imagen por defecto. Sin embargo,te recomendamos que no lo hagas, aunque pueda ayudarte a ahorrar espacio.

Si cambias estos valores a «0», entonces WordPress utilizará tu imagen de tamaño completo (original) en todas las ubicaciones y en todos los dispositivos, lo que llevaría a un aumento masivo del uso del ancho de banda en tu sitio. Además, es casi seguro que esto ralentizará el tiempo de carga de la página para las secciones que muestran muchas de estas imágenes.

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

Si necesitas cambiar todas tus imágenes anteriores de WordPress a estos nuevos tamaños, puedes utilizar varios plugins excelentes, que cubriremos en detalle a continuación.

Para los usuarios que tienden a utilizar muchos tipos de imágenes diferentes, puede ser esencial tener más tamaños de imagen que los tres tamaños por defecto que ofrece WordPress.

Los tamaños de imagen por defecto pueden ser suficientes para los tipos de imágenes estándar, pero para algo como gráficos emergentes, widgets o imágenes deslizantes, probablemente vas a necesitar más tamaños de imagen.

Los tamaños de imagen personalizados te dan la flexibilidad de mejorar la funcionalidad de tu sitio de WordPress y te ahorran un montón de tiempo en redimensionar tus imágenes una por una.

Ahora que hemos establecido eso como nuestra línea de base, vamos a echar un vistazo más de cerca al proceso que implica la adición de estos tamaños de imágenes personalizadas a tu sitio de WordPress.

Aquí tienes dos opciones. La primera es utilizar un plugin que se encarga de todo por ti con solo unos pocos clics. La segunda es la forma manual de añadir las cadenas de código necesarias a los archivos de tu sitio.

Vamos primero con el método del plugin.

Añadir tamaños de imagen personalizados usando Image Regenerate y Select Crop

El plugin Image Regenerate & Select Crop va más allá de Regenerate Thumbnails (del que hablaremos más adelante), permitiendo una mayor personalización y funcionalidad.

Además de permitirte cambiar los tamaños de imagen por defecto, también te permite regenerar cualquier imagen existente para que se ajuste a tus tamaños de imagen preferidos, establecer las opciones de recorte por defecto para las imágenes y regenerar las miniaturas.

Opciones de tamaño de imagen personalizadas a través del plugin Image Regenerate & Select Crop.

Opciones de tamaño de imagen personalizadas a través del plugin Image Regenerate & Select Crop.

Una vez instalado y activo, puedes crear tantos tamaños de imagen personalizados como desees a través de la página estándar de Ajustes de WordPress > Medios.

Añadir manualmente tamaños de imagen personalizados

Aunque es un proceso relativamente simple y fácil, lo primero que debes hacer es crear una copia de seguridad de tu sitio web en caso de que algo vaya mal mientras haces estos ajustes. Una vez completado el proceso de copia de seguridad, dirígete al panel de administración de tu sitio de WordPress.

Una vez allí, pase el ratón por encima de la opción del menú Apariencia y elige Editor (en algunos casos puede llamarse Editor de temas).

A continuación, busca el archivo functions.php y comprueba si el siguiente código ya está allí (utiliza la función de búsqueda para localizarlo rápidamente). Si ya está ahí, no necesitas hacer nada.

Si no está ahí, tienes que añadir esta cadena al archivo:

add_theme_support( 'post-thumbnails' );
Añadir el gancho para los tamaños de imagen personalizados a functions.php.

Añadir el gancho para los tamaños de imagen personalizados a functions.php.

Después de añadir este código, haz clic en el botón Actualizar archivo en la parte inferior para activar la función que permite crear tamaños de imagen personalizados.

Ahora es el momento de añadir el código para los tamaños de imagen personalizados específicos que deseas. Busca la cadena «add_image_size» en tu archivo functions.php porque ahí es donde tendrás que hacer tus ediciones:

add_image_size( 'my-custom-image-size', 800, 640 );

Específicamente, debes actualizar lo que está dentro de las comillas simples con lo que quiere nombrar tu nuevo tamaño de imagen personalizado. Te sugerimos que lo mantengas simple y descriptivo (por ejemplo, «main-post-image»).

Una vez que te hayas ocupado del nombre, tendrás que declarar los tamaños de las imágenes. El primer valor numérico es la anchura de la imagen, mientras que el segundo es la altura de la imagen.

Aquí tienes una captura de pantalla que muestra nuestro código de ejemplo añadido al archivo functions.php:

Añadir dimensiones de tamaño de imagen personalizadas a functions.php.

Añadir dimensiones de tamaño de imagen personalizadas a functions.php.

Entender el Cropping

Cuando una imagen se hace más pequeña sin recortarla, es solo una versión reducida del original. Sin embargo, cuando se «recorta» o se corta, la parte recortada se elimina de la imagen final.

Es precisamente como cortar físicamente una foto. Si coges las tijeras para un retrato y recortas todo lo que hay por debajo de los hombros de la persona, habrás «recortado» esa foto. Lo mismo ocurre en el ámbito digital.

El objetivo es reducir el tamaño del archivo de una imagen, ya que el recorte no es la opción adecuada. Estarías eliminando elementos que tal vez quieras conservar mientras mantienes un tamaño de archivo grande. Dicho esto, el cropping puede tener sentido para los tamaños de imagen que tienen que ajustarse perfectamente a una dimensión específica, como las imágenes destacadas o las fotos de perfil.

Los sujetos principales pueden resultar demasiado pequeños para algo como las imágenes destacadas. Deberían seguir teniendo la exposición que necesitan cuando se redimensionan sin recortar. Así que averigua qué es lo que mejor funciona para los diferentes tipos de imágenes que utilizas y configura la función de recorte en consecuencia.

Al añadir tamaños de imagen personalizados, puedes hacer que WordPress recorte automáticamente las imágenes en función del tamaño que hayas establecido y del tamaño original. Tienes que añadir «true» al final del código.

De nuevo, aquí está nuestro ejemplo anterior con la función de recorte activada.

add_image_size( 'name-for-your-custom-image', 800, 640, true );

Sin embargo, si no quieres recortar las imágenes, puedes poner «false» en lugar de «true» o dejar de lado ambos. No poner ninguno de los dos hará que el código asuma automáticamente la opción «false». De esta manera, WordPress no recortará tus imágenes.

Añadir un tamaño de imagen personalizado a tu tema

Después de haber creado los tamaños de imagen personalizados que necesitas, también necesitas actualizar el código en tu tema. Esto hará que tu tema muestre estos tamaños de imagen personalizados como deseas.

Si eres un completo principiante en la edición de código, por favor, crea una copia de seguridad de tu sitio de nuevo antes de realizar esto.

Ahora, necesitas encontrar tu archivo de tema en el bucle de post y añadir el siguiente código a la misma:

the_post_thumbnail( 'your-specified-image-size' );

Para encontrar este archivo, haz clic en el Editor de Temas bajo la configuración de Apariencia. Busca el archivo index.php aquí – este es el archivo de tema que alberga el bucle de correos que necesitas editar.

Una vez que lo hayas encontrado, añade el código mencionado anteriormente, como se ve en la siguiente imagen:

Añadir el gancho para los tamaños de imagen personalizados a functions.php.

Añadir el gancho para los tamaños de imagen personalizados a functions.php.

Una vez más, sería mejor que sustituyeras la parte «new-homepage-feature» por el nombre del tamaño de la imagen personalizada que has creado.

Una vez que hayas añadido este código y actualizado el archivo, verás el tamaño de imagen personalizado en tu biblioteca de medios. Sube una nueva imagen para probarla.

Actualización de miniaturas antiguas

Aunque crear y añadir tamaños de imagen personalizados es genial, te deja otra tarea pendiente: ¿qué pasa con todas las imágenes antiguas que ya has subido?

No te preocupes por eso: ¡algunos plugins de WordPress son muy útiles para esta tarea! Veamos cómo pueden ayudarte a actualizar tus viejas miniaturas.

El plugin Regenerate Thumbnails

Regenerate Thumbnails te permite volver a cargar automáticamente las imágenes en los nuevos tamaños, incluyendo cualquier tamaño de imagen personalizado que hayas añadido.

¿Estás cansado del soporte de hosting WordPress de nivel inferior a 1 sin respuestas? Prueba nuestro equipo de soporte de primera clase! Consulta nuestros planes

Para instalarlo, pasa el ratón por encima de la opción de menú Plugins y haz clic en Añadir nuevo. A continuación, escribe «Regenerate Thumbnails» en el cuadro de búsqueda.

Instala el plugin Regenerate Thumbnails haciendo clic en tu botón Instalar ahora.

Instalar el plugin Regenerate Thumbnails.

Instalar el plugin Regenerate Thumbnails.

Una vez finalizada la instalación, haz clic en el botón Activar para empezar a utilizarlo.

A continuación, pasa el cursor por el menú Herramientas de la izquierda y haz clic en Regenerate Thumbnails:

La página de configuración del plugin Regenerate Thumbnails.

La página de configuración del plugin Regenerate Thumbnails.

Puedes hacer clic en Regenerar Thumbnails para todos los archivos adjuntos [#] para producir nuevos tamaños de imagen para todas tus imágenes antiguas también.

Info

Ten cuidado al marcar la casilla de verificación para eliminar los archivos en miniatura de tus antiguos tamaños no registrados, ya que puedes acabar con imágenes rotas en tu sitio si todavía tiene imágenes antiguas de tamaños que ya no utilizas.

Como puedes ver en la imagen de arriba, Regenerte Thumbnails también listará todos los tamaños de imagen actualmente activos en tu sitio.

Es posible que encuentres algunos tamaños de imágenes que no conocías. A menudo, estos son creados por plugins, especialmente si son para mejorar el aspecto, el diseño o la funcionalidad de tu sitio.

Utilizar el editor de tamaño de imágenes incorporado en WordPress

Como hemos destacado antes, solo debes crear tamaños de imagen personalizados que vayas a utilizar a menudo. Para los tamaños de imagen que planeas utilizar solo en raras ocasiones, tiene sentido editar manualmente los tamaños de imagen utilizando el editor de tamaño de imagen incorporado en WordPress.

Te explicaremos rápidamente cómo puedes utilizar el editor integrado para editar el tamaño de las imágenes de forma rápida y sencilla.

En primer lugar, haz clic en el menú Multimedia para acceder a la Biblioteca Multimedia. A continuación, haz clic en la imagen cuyo tamaño deseas ajustar.

A continuación, haz clic en el botón Editar imagen, justo debajo de la imagen:

El botón Editar imagen.

El botón Editar imagen.

Verás el tamaño actual de la imagen y podrás ajustarlo aquí. Solo tienes que poner el tamaño de la imagen que deseas y luego hacer clic en el botón Escala, y ya está.

Editar las dimensiones de la imagen.

Editar las dimensiones de la imagen.

El ajuste de tamaño se guardará automáticamente en cuanto pulses Escala. Si por alguna razón no te gusta el nuevo tamaño de la imagen, siempre puedes volver al tamaño original utilizando la opción Restaurar imagen original (justo debajo del campo del tamaño de la imagen).

Cómo editar imágenes en WordPress Gutenberg

Si utilizas Gutenberg, puedes editar rápidamente el tamaño de las imágenes cuando las añadas durante la creación de un post.

Cambiar el tamaño de la imagen a través de Gutenberg.

Cambiar el tamaño de la imagen a través de Gutenberg.

Como puedes ver en la imagen superior, cuando subes una imagen al crear un post en Gutenberg, puedes seleccionar los tamaños de imagen existentes o cambiar el tamaño de la imagen desde la misma opción del post.

Si has añadido tus nuevos tamaños de imagen personalizados a tu archivo de tema, los encontrarás todos en el menú desplegable Tamaño de imagen.

También podrás cambiar el tamaño de la imagen utilizando el campo situado justo debajo. Todo lo que tienes que hacer es introducir el tamaño deseado en los campos, y la imagen se redimensionará automáticamente según tus nuevas especificaciones.

Optimización de las imágenes

Ninguna guía relacionada con las imágenes está completa sin una mención a la optimización de las mismas. Aunque ya hemos hablado de la optimización de las imágenes con gran detalle, mencionar algunos consejos rápidos no está de más.

Al fin y al cabo, cuando añadas tamaños de imagen personalizados, tendrás que saber cómo optimizar tus imágenes para asegurarte de que no afectan al rendimiento de tu sitio ni consumen más recursos del servidor de los necesarios.

Dicho esto, he aquí algunos consejos rápidos para ayudarte a empezar con la optimización de imágenes.

Decidir el tipo de archivo

La simple elección del tipo de archivo adecuado para tus imágenes puede reducir su tamaño de forma significativa. Aunque existen muchos tipos diferentes de archivos de imagen, la gran mayoría son JPEG o PNG.

JPEG gana por goleada cuando se trata de imágenes con color. Además, puedes comprimir aún más los archivos JPEG para reducir su tamaño con solo una ligera reducción de la calidad (si lo haces bien).

Por otro lado, PNG suele ser una mejor opción para los dibujos, el texto, la mayoría de las capturas de pantalla y los gráficos.

Cambiar el tamaño de las imágenes

Cambiar el tamaño de las imágenes es una forma rápida y sencilla de reducir su tamaño. Como regla general, debes asegurarte de que todas las imágenes de tu sitio web sean tan grandes como sea necesario.

Si el ancho máximo de tu sitio web es de 1200px, no tiene sentido tener una sola imagen en tu sitio con un ancho mayor que ese máximo de 1200px.

También hemos mencionado la importancia de no crear nuevos tamaños de imágenes personalizadas a menos que sea necesario, así que tenlo en cuenta también.

Aprovecha las ventajas de la compresión con pérdidas

La compresión con pérdidas es una buena forma de reducir aún más el tamaño del archivo después de haber optimizado las imágenes con otros métodos.

Significa deshacerse de algunos datos de la imagen, cuya eliminación no supondría una gran diferencia en la calidad de la imagen, pero puede ayudar a reducir el tamaño del archivo considerablemente.

Utilizar el lazy loading

El lazy loading (carga diferida) te ayuda a priorizar la carga de imágenes en las páginas de tu sitio. Carga las imágenes al mismo tiempo que el visitante se desplaza por la página. Esto significa que las imágenes de la parte superior se cargarán inmediatamente, pero todo lo que esté por debajo del pliegue no se cargará hasta que el usuario se desplace más allá del pliegue.

Hay más cosas, pero lo encontrarás todo en nuestra guía de optimización de imágenes, así que vamos a pasar directamente a algunos plugins de optimización de imágenes que puedes utilizar.

Plugins de edición de imágenes para WordPress

Lo bueno de usar estos plugins es que puedes realizar una optimización avanzada de imágenes con unos pocos clics sin tener que andar con herramientas o códigos avanzados. Además, la mayoría de estos plugins son gratuitos, sobre todo si se trata de optimizar un determinado número de imágenes o de utilizar algunas funciones básicas de optimización.

Las estadísticas muestran que los lectores recuerdan un 55% más cuando añades imágenes visualmente atractivas a tu contenido. Aprende a abordar el tamaño de las imágenes en WordPress y haz que tus publicaciones sean memorables.Click to Tweet

Resumen

Ahora ya sabes todo lo que hay que saber sobre el tamaño de las imágenes en WordPress y cómo aprovechar al máximo las características y la personalización que ofrece WordPress en ese apartado. La optimización del rendimiento y la funcionalidad de tu sitio web debería ser mucho más fácil ahora que sabes cómo manejar las imágenes de WordPress por dentro y por fuera.

Puedes crear tamaños de imagen personalizados y gestionarlos directamente a través del código de tu tema o utilizando un plugin creado para esa tarea específica. Recuerda actualizar las miniaturas antiguas cada vez que planees actualizar una imagen, algo que también es fácil de hacer gracias a los útiles plugins que hemos mencionado anteriormente.

¿Nos hemos dejado algo? Deja un comentario abajo si tienes problemas para entender algo sobre los tamaños de las imágenes de WordPress.


Si te ha gustado este artículo, entonces te encantará la plataforma de alojamiento WordPress de Kinsta. Acelere su sitio web y obtenga soporte 24/7 de nuestro experimentado equipo de WordPress. Nuestra infraestructura potenciada por Google Cloud se centra en la escalabilidad, el rendimiento y la seguridad. ¡Permítanos mostrarle la diferencia de Kinsta! Conozca nuestros planes