Guía completa sobre los tamaños de imagen de WordPress (para principiantes)

Las imágenes dan vida a los sitios web. Ayudan a contar historias, resaltan contenido clave y mejoran la participación del usuario. Pero para los nuevos usuarios de WordPress, no siempre está claro cómo funcionan los tamaños de imagen detrás de escena.

¿Por qué WordPress crea múltiples versiones de su imagen? ¿Qué dimensiones debe elegir para publicaciones de blog, encabezados o imágenes de productos? ¿Y cómo se mantiene sus imágenes con luces mientras mantienen tiempos de carga rápidos?

En esta guía completa, aprenderá todo lo que necesita saber sobre los tamaños de imagen en WordPress, cómo funcionan, dónde se almacenan, cómo personalizarlos y cómo optimizarlos para obtener el mejor rendimiento.

Guía completa sobre los tamaños de imagen de WordPress

Cómo WordPress maneja sus imágenes cargadas

Cuando subes una imagen en WordPress, hace más que almacenarla. Crea automáticamente múltiples versiones de la misma imagen en varios tamaños.

Esto asegura que se sirva la imagen del tamaño correcto, dependiendo de dónde y cómo se use en su sitio, como en miniaturas, publicaciones, galerías o controles deslizantes.

¿Dónde se almacenan las imágenes en WordPress?

Desde el lado del administrador, todos los archivos multimedia cargados, incluidas las imágenes, son visibles en la biblioteca de medios. Puede acceder a él yendo a medios >> Biblioteca en su tablero.

Aquí, puede ver sus imágenes cargadas en una cuadrícula o diseño de lista. También puede filtrar por tipo de medios (por ejemplo, foto, video, audio) o buscar usando palabras clave de títulos de imágenes, subtítulos o descripciones.

Detrás de escena, WordPress almacena sus imágenes en el directorio/WP-Content/Supars/en su servidor. Por defecto, esta carpeta se organiza de año y mes en función de cuándo se cargó la imagen, por ejemplo: /wp-content/uploads/2025/06/

Este enfoque estructurado facilita la administración de sus archivos multimedia con el tiempo.

Si es un usuario más avanzado y desea cambiar esta estructura, algunos complementos le permiten organizar sus medios en carpetas personalizadas. Sin embargo, para la mayoría de los principiantes, el sistema predeterminado funciona bien.

Tamaños de imagen predeterminados en WordPress

Cuando agrega una imagen, WordPress crea múltiples versiones de ella en diferentes tamaños automáticamente. Estos tamaños predeterminados se establecen en su configuración de WordPress y se usan en diferentes secciones de su sitio, según su tema y diseño.

Aquí están los tamaños predeterminados estándar que genera WordPress:

• Miniatura - 150 × 150 píxeles: a menudo se usa en archivos de blog, barras laterales y galerías.
• Medio -300 × 300 píxeles: comúnmente utilizado para imágenes más pequeñas o miniaturas de productos.
• Grande - 1024 × 1024 píxeles: típicamente usados ​​para imágenes de héroes, imágenes destacadas o controles deslizantes.
• SIZ E: la imagen original que subió sin cambiar el tamaño.

Los complementos y los temas también pueden crear sus propios tamaños de imagen personalizados para adaptarse a requisitos de diseño específicos. Entonces, dependiendo de su tema, puede ver opciones de tamaño adicionales al agregar imágenes a publicaciones o páginas.

Cómo cambiar los tamaños de imagen predeterminados

Si los tamaños de imagen incorporados no se adaptan a sus necesidades, WordPress facilita cambiarlas.

Para hacer esto, vaya a su tablero y seleccione Configuración >> Medios . Aquí, verá opciones para ingresar su ancho y altura preferidos para la miniatura, mediana y tamaños de imagen grandes.

Una vez que haya realizado los cambios, haga clic en Guardar cambios en la parte inferior de la pantalla. En el futuro, todas las imágenes nuevas que subas seguirán estas nuevas dimensiones. Sin embargo, las imágenes cargadas previamente no se verán afectadas a menos que las regenere (más sobre eso más adelante).

Es una buena idea elegir tamaños de imagen que coincidan con el ancho de pantalla máximo de su área de contenido. Por ejemplo, si el contenido de la publicación de su blog tiene 800 píxeles de ancho, cargar una imagen de 3000 píxeles no tiene ningún propósito y solo el espacio del servidor desata.

Tamaños de imagen personalizados en WordPress

Además de los tamaños predeterminados, es posible que necesite más control sobre cómo aparecen las imágenes en su sitio, por ejemplo, si desea una miniatura cuadrada para una sección y una rectangular para la otra.

Los desarrolladores pueden agregar tamaños de imagen personalizados utilizando código en el archivo Functions.php de un tema. Por ejemplo:

ADD_IMAGE_SIZE ('Personalizado, 400, 250, verdadero);

Esto le dice a WordPress que genere una imagen de 400 × 250 píxeles con recorte duro habilitado. Si no se siente cómodo editando archivos de tema, puede usar complementos como tamaños de imagen simples para agregar, eliminar o regenerar los tamaños de imagen desde su tablero.

Cómo WordPress selecciona qué tamaño mostrar

WordPress es inteligente para elegir qué tamaño de imagen mostrar dependiendo del contexto.

Por ejemplo, en una lista de blogs, puede mostrar la versión en miniatura, mientras que dentro de una publicación, puede elegir el tamaño medio o grande. El tema que usa tiene una gran influencia en este comportamiento. Estas plantillas determinan qué tamaños de imagen están cargados y dónde.

WordPress también admite imágenes receptivas utilizando el atributo SRCSET. Esto significa que sirve automáticamente la mejor imagen de tamaño basada en el dispositivo del visitante y la resolución de pantalla. Los dispositivos móviles recibirán archivos de imagen más pequeños, mientras que las pantallas de alta resolución (como las pantallas de retina) pueden recibir versiones más nítidas.

Las mejores dimensiones de la imagen para casos de uso comunes

Elegir las dimensiones de imagen correctas ayuda a mantener la consistencia en su sitio web y evita el estiramiento incómodo o las imágenes borrosas. Aquí hay algunos tipos de imágenes comúnmente utilizados y los tamaños que funcionan mejor:

• Imágenes destacadas del blog: 1200 × 630 píxeles. Esto funciona bien para los encabezados de publicaciones y el intercambio social.
• Banners de ancho completo o imágenes de héroes: 1920 × 1080 píxeles. Ideal para pantallas grandes y controles deslizantes.
• Imágenes del logotipo: 250 × 100 píxeles. Mantiene logotipos crujientes en encabezados y pies de página.
• Favicones: 512 × 512 píxeles. Requerido por la mayoría de los navegadores.
• Imágenes del producto (comercio electrónico) : 800 × 800 píxeles. Ideal para cuadrículas de productos cuadrados.

Intente usar relaciones de aspecto consistentes en tipos de imágenes similares. Por ejemplo, todas las imágenes de blogs pueden seguir una relación 16: 9, mientras que las miniaturas del producto pueden mantener una relación de aspecto cuadrado (1: 1).

Edición de tamaños de imagen con el editor de Gutenberg

Si está creando contenido utilizando el editor de bloques Gutenberg, ajustar los tamaños de imagen es simple.

Una vez que agregue un bloque de imagen a una publicación o página, verá opciones en la barra lateral para seleccionar tamaños predefinidos, como miniatura, mediana, grande o completa.

Si tiene tamaños personalizados registrados, también aparecerán aquí '.

También puede ingresar sus dimensiones directamente. Simplemente ingrese el ancho y la altura deseados, y WordPress ajustará automáticamente el tamaño de la pantalla en consecuencia. Esto no cambia el tamaño real del archivo, sino solo cómo aparece en la página.

Regeneración de miniaturas después de los cambios de tamaño

Si cambia los tamaños de imagen predeterminados en su configuración, WordPress no cambiará automáticamente las imágenes antiguas. Para aplicar los nuevos tamaños a las imágenes subidas previamente, debe regenerar miniaturas.

Hay varios complementos que pueden ayudar con esto. Los más populares incluyen:

• Regenerar miniaturas
• Fuerza regenerar miniaturas

Una vez instalados, estos complementos le permiten cambiar el tamaño de todas las imágenes existentes con solo unos pocos clics según su configuración actualizada.

Cómo optimizar las imágenes en WordPress

La optimización de imágenes es esencial para mejorar la velocidad y el rendimiento del sitio web. Los archivos de imágenes grandes pueden ralentizar su sitio y aumentar las tasas de rebote, especialmente para los visitantes móviles.

Estas son las formas más efectivas de optimizar sus imágenes:

1. Elija el tipo de archivo correcto

Use JPEG para fotografías e imágenes coloridas. Admite la compresión y mantiene la buena calidad en tamaños de archivos más pequeños. Use PNG para gráficos, iconos o capturas de pantalla donde importen los bordes afilados y la transparencia.

2. Cambiar las imágenes antes de cargar

No confíe completamente en WordPress para cambiar su tamaño de sus imágenes. Cambiarlos con una herramienta como Photoshop, Canva o cualquier resonador en línea para que coincida con el ancho de su contenido antes de cargar.

Por ejemplo, si el área de contenido de su blog tiene 800 píxeles de ancho, no hay necesidad de cargar una imagen de 2400 píxeles.

3. Imágenes de comprimir

Puede reducir los tamaños de archivos de imagen utilizando técnicas de compresión con pérdida, que eliminan datos innecesarios sin una pérdida de calidad notable. Herramientas como TinyPng, ImageOptim o complementos como ShortPixel, Smush e Imagify automatizan este proceso.

4. Habilitar la carga perezosa

WordPress tiene una carga perezosa habilitada de forma predeterminada. Esto significa imágenes debajo del área visible de la carga de la pantalla solo cuando el usuario se desplaza hacia abajo, reduciendo los tiempos de carga iniciales y mejorando el rendimiento.

Complementos útiles para administrar los tamaños de imagen

Varios complementos de WordPress pueden ayudarlo a administrar los tamaños de imagen de manera más efectiva:

• Tamaños de imagen simples: le permite crear y administrar tamaños de imagen personalizados sin requerir modificaciones de código.
• Miniaturas de regeneración: recrea tamaños de imagen después de un cambio de tema o cambio en la configuración.
• Habilitar Reemplazo de medios: esta característica le permite reemplazar una imagen sin cambiar su URL.
• ShortPixel/Smush/Imagify: complementos populares de optimización de imágenes para comprimir y cambiar el tamaño de las imágenes automáticamente.

Conclusión

Comprender los tamaños de imagen en WordPress es una de esas cosas pequeñas pero importantes que hacen una gran diferencia. Cuando se hace bien, su sitio se ve más profesional, se carga más rápido y proporciona una mejor experiencia para sus visitantes.

Tómese el tiempo para definir la configuración del tamaño de su imagen, optimice sus imágenes antes de cargar y use las herramientas adecuadas para administrar sus archivos multimedia de manera efectiva. Una vez que lo haga, tendrá un sitio de WordPress más limpio, más rápido y más consistente, y eso es algo a lo que todo propietario del sitio debe apuntar.

Más del blog

• 5 Mejores complementos de optimización de imágenes de WordPress gratuitos
• Cómo crear efecto de desplazamiento de imágenes en Elementor
• Los mejores sitios web para encontrar imágenes y videos sin regalías