Todo principiante de WordPress entiende este dilema de las imágenes: subir fotos demasiado pequeñas y se ven borrosas, subirlas demasiado grandes y tu sitio se vuelve dolorosamente lento.
En WPBeginner, hemos trabajado en perfeccionar los tamaños de imagen en nuestro propio blog, asegurándonos de que siempre se vean bien y no ralenticen nuestro tiempo de carga de página.
En el proceso, hemos aprendido algunas formas sencillas de elegir los mejores tamaños de imagen para un aspecto limpio y profesional, y una gran experiencia de usuario.
Hacer esto bien ha sido un punto de inflexión para la apariencia general de nuestro sitio. 🎨
En esta guía para principiantes, compartiremos todo sobre los tamaños de imagen en WordPress. Aprenderás las dimensiones estándar que funcionan mejor, cómo optimizar imágenes para diferentes tamaños de pantalla y las técnicas sencillas que harán que tu sitio web sea hermoso y rapidísimo.
¿Qué es el tamaño de una imagen?
El tamaño de una imagen generalmente se refiere al ancho y alto de una imagen medidos en píxeles. Por ejemplo, 1600×900 píxeles significa que una imagen tiene 1600 píxeles de ancho y 900 píxeles de alto. Estas medidas también se llaman dimensiones de imagen.
Básicamente, una imagen con dimensiones más grandes tiene más píxeles, lo que aumentará el tamaño del archivo de la imagen.
El tamaño del archivo de imagen es el espacio que ocupa un archivo de imagen en una computadora, y se mide en bytes. Por ejemplo, 100 KB (kilobytes).
Si una imagen tiene un tamaño de archivo grande, tardará más en descargarse para los usuarios y puede afectar la velocidad y el rendimiento de tu sitio web. Por eso es importante mantener el tamaño del archivo de imagen lo más pequeño posible, conservando las dimensiones adecuadas de la imagen.
Aquí es donde entran en juego los formatos de archivo de imagen.
Los formatos de archivo de imagen definen cómo se almacenan y comprimen los datos de la imagen. JPEG y PNG son los más comunes que verás en línea.
Las imágenes como fotografías que contienen más colores se pueden comprimir mejor utilizando el formato de archivo JPEG. Por otro lado, las imágenes como ilustraciones con menos detalles de color pueden usar PNG para obtener los mejores resultados.
Para más detalles, puedes consultar nuestro artículo sobre WebP vs PNG vs JPEG: los mejores formatos de archivo de imagen para WordPress.
Con esto en mente, aquí tienes un resumen rápido de los temas que cubriremos en este artículo:
- ¿Qué tamaño deben tener mis imágenes para mi sitio de WordPress?
- ¿Qué tamaños de imagen debo usar en las publicaciones del blog?
- ¿Qué tamaños de imagen debo usar para las imágenes destacadas?
- ¿Qué tamaños de imagen debo usar para las redes sociales?
- ¿Qué tamaño de imagen debo usar para el logotipo de mi sitio web en WordPress?
- Consejo extra: Edición de imágenes para tu sitio web de WordPress
- Preguntas frecuentes sobre los tamaños de imagen de WordPress
- Recursos adicionales sobre imágenes de WordPress
¿Listo? Empecemos.
¿Qué tamaño deben tener mis imágenes para mi sitio de WordPress?
Para un sitio web promedio de WordPress, usarás imágenes en varias áreas de tu sitio. Necesitarás imágenes para tus publicaciones de blog, miniaturas, encabezados de página, imágenes de portada y más.
WordPress maneja automáticamente algunos de los tamaños de archivo de imagen por defecto. Cada vez que subes una imagen, WordPress creará automáticamente varias copias en diferentes tamaños.
Puedes ver e incluso ajustar los tamaños de imagen predeterminados de WordPress visitando la página Ajustes » Medios en el área de administración de WordPress.
Aquí verás tres tamaños de imagen: miniatura, mediano y grande.
Sin embargo, tu tema de WordPress puede crear sus propios tamaños de imagen adicionales y usarlos para diferentes secciones de tu sitio.
Estos tamaños no serán visibles en la pantalla de ‘Medios’, y la única forma de ver esos tamaños adicionales es yendo al ‘Administrador de archivos’ en tu cuenta de hosting de WordPress.
Luego, querrás navegar a la carpeta /wp-content/uploads/ y seleccionar cualquier carpeta de año allí para explorar. Esto te ayudará a ver todos los diversos tamaños de imagen que genera tu sitio de WordPress.
Ahora, veamos diferentes áreas de tu sitio web y qué tamaños de imagen debes usar en esas áreas.
¿Qué tamaños de imagen debo usar en las publicaciones del blog?
Debes elegir el tamaño de imagen para tus publicaciones de blog según tu tema de WordPress.
Por ejemplo, algunos temas de WordPress vienen con un diseño de una sola columna, lo que te permite usar imágenes más anchas.
Algunos otros temas de WordPress usan diseños de varias columnas, que típicamente consisten en un área de contenido y una barra lateral.
Si usas este tipo de tema, necesitas ajustar el ancho de la imagen en consecuencia.
Para la mayoría de los blogs, puedes usar los siguientes tamaños de imagen:
- Diseño de una sola columna: 1200×675 píxeles
- Diseño de dos columnas: 680×382 píxeles
Ahora, podrías notar que muchos sitios web populares de WordPress usan el mismo ancho de imagen para todas sus imágenes dentro de un artículo. Ten en cuenta que esta no es una regla estricta.
Por ejemplo, si necesitas agregar un bloque de ‘Medios y Texto’, entonces puedes ajustar el tamaño de la imagen en consecuencia. En el ejemplo a continuación, estamos usando una imagen en formato vertical junto a algo de texto.
De manera similar, es posible que desees usar imágenes cuadradas para algunas situaciones.
Sin embargo, no olvides asegurarte de que las dimensiones de la imagen tengan el mismo ancho y alto, como 300 x 300 píxeles. Por ejemplo, aquí tienes un ejemplo de imágenes cuadradas usadas en un diseño de varias columnas.
🧑💻 Consejo profesional: Si necesitas mostrar muchas imágenes juntas, entonces crear una galería es un enfoque mucho mejor. Una galería organiza tus fotos en una cuadrícula de aspecto profesional que es fácil de navegar para los visitantes.
Envira Gallery es el mejor plugin de galería de WordPress del mercado. Te permite crear galerías de fotos hermosas y adaptables a dispositivos móviles con un constructor fácil de arrastrar y soltar. Consulta nuestra reseña completa de Envira Gallery para obtener más información al respecto.
Si buscas crear sliders de imágenes, entonces Soliloquy es una opción fantástica y de carga rápida que nuestro equipo ha utilizado en varios proyectos. Explora sus características en nuestra reseña completa de Soliloquy.
¿Qué tamaños de imagen debo usar para las imágenes destacadas?
No hay una medida única, pero un buen punto de partida es 1200×628 píxeles o 680×382 píxeles para una relación de aspecto de 16:9.
Dicho esto, las imágenes destacadas (también llamadas miniaturas de publicación) son controladas por tu tema. Algunos temas pueden recortar o estirar las imágenes. Por lo tanto, es mejor consultar la documentación de tu tema o experimentar con algunos tamaños para ver qué funciona mejor.
Las imágenes destacadas son importantes, ya que tu tema de WordPress puede usarlas en diferentes áreas de tu sitio web. A menudo son lo primero que ven tus visitantes, así que querrás causar una buena primera impresión.
Recomendamos usar imágenes más grandes, que pueden verse hermosas ya sea que se reduzcan o se usen en modos más amplios.
De manera similar, si tu tema de WordPress utiliza imágenes cuadradas para las imágenes destacadas, te recomendamos usar imágenes de al menos 600×600 píxeles.
- Para temas que usan imágenes destacadas rectangulares: 1200×687 píxeles
- Para temas que usan imágenes destacadas cuadradas: 600×600 píxeles
Tu tema de WordPress generará tamaños adicionales para las imágenes destacadas que se usarán en diferentes áreas, como la página de inicio, la página del blog o las páginas de archivo.
¿Qué tamaños de imagen debo usar para las redes sociales?
Ahora, si tu tema de WordPress está utilizando imágenes destacadas con una relación de aspecto de 16:9, también puedes usarlas como imágenes para redes sociales para X (anteriormente Twitter) y Facebook.
Sin embargo, deberás indicar explícitamente a esas plataformas qué imagen deseas mostrar cuando alguien comparta un artículo de tu sitio web.
Para hacer eso, necesitarás el plugin All in One SEO para WordPress. Es el mejor plugin SEO para WordPress del mercado y lo usan más de 3 millones de sitios web. Este plugin puede ayudarte a optimizar tu sitio web para motores de búsqueda y plataformas de redes sociales.
En WPBeginner, somos grandes admiradores de AIOSEO y lo usamos para muchas tareas. Incluyen la gestión de nuestros mapas de sitio XML, meta descripciones, etiquetas de título y configuraciones de OpenGraph para Facebook y X. Para más información sobre el plugin, consulta nuestra reseña completa de AIOSEO.
Para empezar, necesitas instalar y activar el plugin All in One SEO. Para más detalles, puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
📝 Nota: ¿Tienes un presupuesto ajustado? También hay una versión gratuita de All in One SEO que puedes probar antes de decidirte por la versión Pro.
Al activarlo, el plugin iniciará el asistente de configuración. Simplemente sigue las instrucciones en pantalla para completar el proceso. También puedes ver nuestra guía sobre cómo configurar All in One SEO para obtener instrucciones más detalladas.
Después de eso, necesitas visitar la página All in One SEO » Redes Sociales y cambiar a la pestaña de Facebook. Desde aquí, puedes establecer la ‘Imagen destacada’ como tu fuente de imagen Open Graph predeterminada.
Luego puedes cambiar a la pestaña X(Twitter) y hacer lo mismo.
No olvides hacer clic en el botón ‘Guardar Cambios’ para almacenar tu configuración.
Ahora, si tu tema de WordPress utiliza imágenes de un tamaño diferente, es posible que Facebook y Twitter no puedan mostrar esas imágenes correctamente.
En ese caso, puedes proporcionar a las plataformas de redes sociales una imagen personalizada.
Simplemente crea una imagen con una relación de aspecto de 16:9, que puede ser de 1200×675 píxeles o 680×382 píxeles. Luego, edita la publicación o página y desplázate hacia abajo hasta la sección ‘Configuración de AIOSEO’ debajo del editor de contenido.
Desde aquí, deberás cambiar a la pestaña ‘Social’ y desplazarte hacia abajo hasta el campo ‘Image Source’. En el menú desplegable, selecciona ‘Custom Image’ y luego carga tu imagen de Facebook.
Una vez hecho esto, puedes repetir el proceso también en la pestaña ‘Twitter’.
Ten en cuenta que tendrás que hacer esto para todos los artículos que publiques para asegurarte de que las redes sociales utilicen la imagen que deseas. Para conocer más tamaños de imágenes para redes sociales, consulta nuestra guía de referencia de redes sociales para WordPress para principiantes.
¿Qué tamaño de imagen debo usar para el logotipo de mi sitio web en WordPress?
Un buen tamaño inicial para un logo de WordPress es de 300×200 píxeles. Sin embargo, el tamaño ideal puede variar según tu tema.
Muchos temas de WordPress recomendarán un tamaño específico para el logo durante la carga. Por ejemplo, algunos pueden mostrar un mensaje sugiriendo las dimensiones óptimas.
Sin embargo, si estás utilizando un tema de WordPress más nuevo con una función de edición completa del sitio, es posible que no obtengas una recomendación para el tamaño de la imagen del logo.
En ese caso, recomendamos subir diferentes estilos y tamaños para ver qué luce mejor para tu marca. Un tamaño de imagen de logotipo de 300×200 píxeles puede ser un buen punto de partida.
Consejo extra: Edición de imágenes para tu sitio web de WordPress
Entendemos que la mayoría de los usuarios de WordPress no son diseñadores gráficos profesionales. Sin embargo, aprender a usar software de edición de imágenes para escalar el tamaño de las imágenes para tu sitio web es una gran habilidad que debes tener, y es muy fácil hacerlo.
El propio WordPress viene con algunas herramientas básicas de edición de imágenes. Para usarlas, simplemente ve a la página Medios » Biblioteca y haz clic en una imagen.
Esto abrirá la imagen en una ventana emergente, donde verás un botón para editar la imagen.
Una vez que hagas eso, deberías ver las opciones de edición.
Las herramientas de edición incluyen redimensionamiento básico de imágenes, recorte, rotación y volteo.
Esta edición básica de imágenes es útil si necesitas solucionar rápidamente un problema de imagen. Sin embargo, no es la mejor manera de editar tus imágenes a diario.
Afortunadamente, hay varias opciones gratuitas y económicas que puedes usar:
- Canva – Un software de edición de imágenes gratuito basado en web. También incluye plantillas listas para usar para imágenes de sitios web, logotipos, imágenes de redes sociales y más.
- Pixlr – Un software de edición de imágenes freemium basado en web. Se puede usar para redimensionar imágenes para tus publicaciones de blog fácilmente.
- Gimp – Software gratuito y de código abierto para edición de imágenes. Esta herramienta funciona como una aplicación de escritorio nativa en Windows, Mac y Linux. Se puede usar para redimensionar imágenes, agregar capas de texto, editar fotos y más.
Para más información sobre este tema, puedes consultar nuestra guía sobre cómo hacer edición básica de imágenes en WordPress.
Preguntas frecuentes sobre los tamaños de imagen de WordPress
Habiendo ayudado a miles de usuarios a que sus sitios web funcionen sin problemas, hemos respondido a nuestra parte justa de preguntas sobre imágenes. Aquí están algunas de las más comunes que escuchamos.
¿Cuál es el mejor formato de imagen: JPEG, PNG o WebP?
El mejor formato depende del tipo de imagen. Los JPEG son excelentes para fotografías con muchos colores porque ofrecen una buena compresión sin una gran pérdida de calidad.
Los PNG son ideales para gráficos, logos e ilustraciones con colores planos o fondos transparentes. WebP es un formato moderno que proporciona una excelente compresión para ambos tipos de imágenes, pero es posible que necesites un plugin para servirlas en tu sitio.
¿Necesito un plugin para la optimización de imágenes?
Si bien puedes optimizar imágenes manualmente antes de subirlas, usar un plugin puede ahorrarte mucho tiempo. Los plugins de optimización de imágenes comprimen automáticamente tus imágenes para reducir el tamaño del archivo sin perder calidad visual.
Muchos plugins de caché populares, como WP Rocket, incluyen funciones de optimización de imágenes. Esto ayuda a que tus páginas carguen más rápido, lo cual es excelente tanto para la experiencia del usuario como para el SEO.
¿Cuál es la diferencia entre las dimensiones de una imagen y el tamaño del archivo?
Las dimensiones de una imagen son el ancho y el alto de una imagen, medidos en píxeles (por ejemplo, 1200 x 675 píxeles). Estos determinan cuán grande aparece la imagen en la pantalla.
El tamaño del archivo es la cantidad de espacio de almacenamiento que ocupa la imagen, medido en kilobytes (KB) o megabytes (MB). Dimensiones más grandes generalmente conducen a un tamaño de archivo mayor, lo que puede ralentizar tu sitio.
¿Cómo puedo encontrar las dimensiones de imagen correctas para mi tema?
La forma más fácil es revisar la documentación de tu tema, que a menudo especifica los tamaños de imagen recomendados.
Si no puedes encontrarlo allí, puedes usar las herramientas de desarrollador de tu navegador. Simplemente haz clic derecho en un área de imagen en tu sitio (como el área de contenido) y selecciona 'Inspeccionar'. Esto te mostrará las dimensiones exactas del contenedor, dándote un tamaño objetivo a alcanzar.
Recursos adicionales sobre imágenes de WordPress
Esperamos que esta guía te haya ayudado a dominar los tamaños de imagen en WordPress. Si deseas aprender más, aquí tienes otros artículos que podrían resultarte útiles:
- Cómo agregar zoom de magnificación para imágenes en WordPress
- Cómo agregar subtítulos a las imágenes destacadas en WordPress
- Cómo usar IA para generar imágenes en WordPress
- Cómo agregar archivos de imagen SVG en WordPress
- Texto alternativo de imagen vs. título de imagen en WordPress
- Cómo optimizar imágenes para el rendimiento web sin perder calidad
- Los mejores lugares para encontrar imágenes gratuitas de dominio público para tu blog
- Cómo solucionar el problema de que la imagen destacada no se muestre en WordPress
- Cómo solucionar problemas de carga de imágenes en WordPress
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Leroy jason Klassen
¿cómo redimensiono mis fotos a 1200px de ancho x 500px de alto pero que se vean iguales (que se vea toda la foto) con alta calidad?
Soporte de WPBeginner
Dependería del tamaño de la foto original y de si la estás escalando hacia arriba o hacia abajo. Normalmente usarías un software de edición de imágenes para hacer ese tipo de cambio.
Administrador
Jiří Vaněk
Un artículo muy informativo, ya que he estado usando formatos de tamaño personalizado que básicamente inventé yo mismo, pero probablemente no sean ideales. Aprecio especialmente el consejo sobre qué formatos usar para imágenes cuadradas (para imágenes destacadas). Tengo una plantilla que usa este diseño, así que este consejo me es muy útil.
Soporte de WPBeginner
Glad to hear the guide was helpful
Administrador
mohadese esmaeeli
Usar imágenes SVG para mejorar la velocidad del sitio es muy beneficioso, pero WordPress en sí no te permite subir imágenes SVG directamente. ¿Qué formato recomiendas?
Soporte de WPBeginner
Si quieres usar archivos SVG en tu sitio de WordPress, te recomendamos que eches un vistazo a nuestro artículo a continuación:
https://www.wpbeginner.com/wp-tutorials/how-to-add-svg-in-wordpress/
Para otros tipos de archivo, dependería del objetivo de la imagen para saber qué tipo es el mejor.
Administrador
Moinuddin Waheed
Las imágenes son una gran parte del sitio web y son las razones por las que vemos una buena experiencia en el sitio web.
Solía pensar que las dimensiones de las imágenes y los tamaños de las imágenes eran dos cosas diferentes. Tener una dimensión adecuada para colocar imágenes para diferentes necesidades es importante y saber el tamaño ideal nos ayuda a tener una imagen optimizada para nuestro sitio web.
Gracias a wpbeginner por dar diferentes dimensiones para usar en diferentes casos de uso.
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Sunil Suresh
Una pregunta:
1a) En el artículo, usted dijo que WordPress genera ciertos tamaños de imagen por sí solo. Entonces, subo la Imagen A, y WordPress crea copias de A en algunos tamaños predefinidos. ¿Qué sucede cuando elimino la Imagen A (digamos que ya no la estoy usando en ninguna publicación/página)? ¿WordPress eliminará automáticamente las imágenes generadas, o tendré que ir a la Biblioteca de Medios y eliminar las imágenes manualmente?
1b) De manera similar, si es algún plugin el que está generando las imágenes redimensionadas, ¿qué sucede con esas imágenes generadas cuando elimino la imagen original?
Soporte de WPBeginner
Debería eliminar la mayoría de los tamaños generados si se eliminan correctamente, pero existen plugins como los que se mencionan en nuestro artículo a continuación para limpiar cualquier imagen que no se elimine:
https://www.wpbeginner.com/plugins/how-to-clean-up-your-wordpress-media-library/
Administrador
ASHIKUR RAHMAN
Estoy usando el tamaño/dimensión original para las fotos convertidas antes de subirlas a WP. Pero mi pregunta es: ¿qué tamaño necesito para las páginas de categorías/etiquetas? Ya que he puesto tamaño 0 en la página de configuración de medios para subir imágenes en tamaño original. La mayoría de mis imágenes son de 1280*720 o más grandes debido a los requisitos de mi tema.
Soporte de WPBeginner
Tu tema específico determinaría el tamaño de las imágenes necesarias para cada sección de tu sitio y, como cada tema es diferente, deberías consultar con el soporte del tema específico que estás utilizando.
Administrador