ElegantThemes

Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas)

¿Quieres saber sobre el tamaño de imagen de WordPress?

Los principiantes a menudo nos preguntan qué tamaño de imagen deberían usar en su sitio de WordPress y cómo WordPress maneja las imágenes en diferentes áreas.

En esta guía para principiantes, explicaremos los tamaños de imagen comunes de WordPress y compartiremos las mejores prácticas sobre cómo saber qué tamaños usar en su sitio web.

Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 18

¿Cuáles son las dimensiones de la imagen?

El tamaño de la imagen generalmente se refiere al ancho y la altura de una imagen medida en píxeles. Por ejemplo, 1600 × 900 píxeles significa que la imagen tiene 1600 píxeles de ancho y 900 píxeles de alto.

tamaño de la imagen
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 19

Estas medidas también se denominan dimensiones de la imagen.

Básicamente, una imagen de mayor tamaño contiene más píxeles, lo que dará como resultado un aumento en el tamaño del archivo de imagen.

El tamaño del archivo de imagen es el espacio, en bytes, que ocupa un archivo de imagen en su computadora. Por ejemplo, 100 KB (kilobytes).

Si el tamaño del archivo de la imagen es grande, los usuarios tardarán más en descargarla y afectará la velocidad y el rendimiento de su sitio web. Es por eso que mantiene el tamaño del archivo de imagen lo más pequeño posible, mientras mantiene las dimensiones de la imagen correctas.

Esto nos lleva al formato de archivo de imagen.

Un formato de archivo de imagen es una técnica de compresión para guardar archivos de imagen. Los formatos más utilizados en la web son JPEG y PNG.

Las imágenes, como las fotografías que contienen más color, se pueden comprimir mejor con el formato de archivo JPEG.

Por otro lado, las imágenes como las ilustraciones con menos detalles de color pueden usar PNG para obtener mejores resultados.

Para obtener más detalles sobre los formatos de archivo de imagen, consulte nuestro artículo sobre cómo optimizar imágenes en WordPress.

Habiendo dicho eso, echemos un vistazo a los tamaños de imagen utilizados en WordPress para diferentes áreas de su sitio web.

¿Qué tamaño deben tener las imágenes en mi sitio de WordPress?

Para un sitio típico de WordPress, utilizará imágenes en varias áreas del sitio. Debe proporcionar imágenes para publicaciones de blog, miniaturas, encabezados, imágenes de portada y más.

De forma predeterminada, WordPress maneja automáticamente algunos tamaños de archivos de imagen. Cada vez que subes una imagen, WordPress automáticamente hace múltiples copias de diferentes tamaños.

Copie automáticamente imágenes de diferentes tamaños
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 20

Puede ver e incluso ajustar el tamaño de imagen predeterminado de WordPress visitando Ajustes » Medios Páginas en el área de administración de WordPress.

Verá los tamaños «Mediano», «Miniatura» y «Grande».

Tamaño de imagen predeterminado en WordPress
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 21

Sin embargo, su tema de WordPress puede crear su propio tamaño de imagen adicional y usarlo para diferentes partes de su sitio web.

Estas dimensiones no son visibles en la pantalla de medios y la única forma de ver estas dimensiones adicionales es ir al administrador de archivos en su cuenta de alojamiento de WordPress.

Luego navegue a la carpeta /wp-content/uploads/ y seleccione cualquier carpeta de año allí para buscar. Esto lo ayudará a ver todos los diversos tamaños de imagen generados por su sitio de WordPress.

Habiendo dicho eso, echemos un vistazo a las diferentes áreas de su sitio web y qué tamaños de imagen debe usar en esas áreas.

qué tamaño de imagen usar en las publicaciones del blog

Debe elegir el tamaño de la imagen para las publicaciones de su blog de acuerdo con su tema de WordPress.

Por ejemplo, algunos temas de WordPress vienen con diseños de una sola columna que le permiten usar imágenes más anchas.

Imágenes en un diseño de una sola columna
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 22

Por otro lado, algunos temas de WordPress utilizan un diseño de varias columnas (contenido + barra lateral), lo que significa que debe ajustar el ancho de la imagen en consecuencia.

diseño de dos columnas
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 23

Para la mayoría de los blogs, puede utilizar los siguientes tamaños de imagen:

  • Diseño de una sola columna: 1200 × 675
  • Diseño de dos columnas: 680 × 382

Ahora, puede notar que muchos sitios populares de WordPress usan el mismo ancho de imagen para todas las imágenes en una sola publicación. Sin embargo, esta no es una regla estricta.

Por ejemplo, si necesita agregar un bloque de «medios y texto», puede cambiar el tamaño de la imagen en consecuencia. En el siguiente ejemplo, usamos una imagen de tamaño vertical junto a un texto.

Una publicación de blog que muestra una imagen de tamaño vertical junto a un texto
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 24

Asimismo, es posible que desee utilizar imágenes cuadradas en algunos casos.

Por ejemplo, aquí hay un ejemplo de una imagen cuadrada utilizada en un diseño de varias columnas.

imagen cuadrada en columna
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 25

Cuando utilice imágenes cuadradas, solo necesita asegurarse de que las dimensiones de la imagen tengan el mismo ancho y alto, por ejemplo, 300 x 300 píxeles.

Tamaño de imagen utilizado para las imágenes destacadas

Las imágenes destacadas, también conocidas como miniaturas de publicaciones, son una característica del tema de WordPress. Esto significa que su tema determinará el tamaño de la imagen que se mostrará.

Por ejemplo, algunos temas de WordPress pueden usar la relación de aspecto estándar de 16:9 para mostrar los tamaños de imagen destacados (por ejemplo, 680 × 382 píxeles).

Algunos temas de WordPress también pueden usar imágenes destacadas como imágenes de encabezado más grandes. Para esto, pueden necesitar imágenes más grandes (como 1200×675).

Imagen destacada utilizada en la portada.
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 26

Las imágenes destacadas son importantes porque su tema de WordPress puede usarlas en diferentes áreas de su sitio web. Por lo general, son lo primero que ven sus visitantes, por lo que debe causar una buena primera impresión.

Recomendamos usar imágenes más grandes, para que aún se vean hermosas, ya sea reducidas o en un modo más amplio.

Imagen destacada dentro del contenedor
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 27

Del mismo modo, si su tema de WordPress usa imágenes cuadradas como imágenes destacadas, le recomendamos que use imágenes que tengan 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

Su tema de WordPress generará dimensiones adicionales para las imágenes destacadas para su uso en diferentes áreas, como la página de inicio, la página del blog o la página de archivo.

Imagen destacada en la página de inicio
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 28

Tamaño de imagen para redes sociales

Ahora, si su tema de WordPress usa imágenes destacadas con una relación de aspecto de 16:9, también puede usarlas como imágenes de redes sociales para Twitter y Facebook.

Sin embargo, cuando alguien comparte un artículo de su sitio web, debe decirles explícitamente a estas plataformas qué imagen desea mostrar.

Para esto necesitas SEO todo en uno Complemento de WordPress. Es el mejor complemento SEO de WordPress utilizado por más de 3 millones de sitios web en el mercado. Le ayuda a optimizar su sitio web para motores de búsqueda y plataformas de redes sociales.

notas: una restricción más SEO todo en uno en la versión gratuita Puedes probar.

Primero, debe instalar y activar el complemento. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Una vez activado, el complemento iniciará el asistente de configuración. Siga las instrucciones en pantalla para completar el asistente. También puede consultar nuestra guía sobre cómo configurar SEO todo en uno para obtener instrucciones paso a paso.

Después de eso, debes visitar SEO todo en uno » Redes Sociales y cambia a la pestaña de Facebook. Desde aquí puede configurar la imagen destacada como la fuente de imagen predeterminada de Open Graph.

Imagen predeterminada para Facebook Open Graph
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 29

Luego puede cambiar a la pestaña de Twitter y hacer lo mismo.

No olvide hacer clic en el botón «Guardar cambios» para almacenar su configuración.

Ahora, si su tema de WordPress usa imágenes de diferentes tamaños, es posible que Facebook y Twitter no muestren esas imágenes correctamente.

En este caso, puede proporcionar imágenes personalizadas para las plataformas de redes sociales.

Simplemente cree una imagen con una relación de aspecto de 16:9 (1200×675 píxeles o 680×382 píxeles). Luego edite la publicación o página y desplácese hacia abajo hasta la sección de configuración de AIOSEO debajo del editor.

Desde aquí, debe cambiar a la pestaña Social y desplazarse hacia abajo hasta la sección Fuentes de imágenes. En el menú desplegable, seleccione Imagen personalizada y cargue su imagen de Facebook.

Establecer una imagen personalizada para Facebook
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 30

También deberá repetir el proceso en la pestaña de Twitter.

Debe hacer esto para todos los artículos que publique para asegurarse de que las redes sociales usen las imágenes que desea que usen.

Para obtener más tamaños de imágenes de redes sociales, consulte nuestra hoja de trucos para principiantes de redes sociales de WordPress.

Tamaño de imagen utilizado para el logotipo del sitio web en WordPress

Muchos temas de WordPress le permitirán saber qué tamaño de imagen debe usar para el logotipo de su sitio web.

Por ejemplo, nuestro tema de demostración muestra este mensaje cuando intentamos cargar un logotipo.

Recomendación de tamaño de la imagen del logotipo
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 31

Sin embargo, si está utilizando un tema de WordPress más nuevo con capacidades completas de edición del sitio, es posible que no obtenga las recomendaciones de tamaño de imagen del logotipo.

En este caso, te recomendamos que subas diferentes estilos y tamaños para ver cuál funciona mejor para tu marca. Una imagen de logotipo de 300 x 200 píxeles podría ser un buen punto de partida.

Editor de bloques de logotipos de sitios web
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 32

Edite imágenes para su sitio de WordPress

La mayoría de los usuarios de WordPress no son diseñadores gráficos profesionales. Sin embargo, necesitará un software de edición de imágenes para crear tamaños de imagen para su sitio de WordPress.

El propio WordPress viene con algunas herramientas básicas de edición de imágenes.Para usarlos sólo tienes que ir a Medios » Bibliotecas página y haga clic en la imagen.

Esto abrirá la imagen en una ventana emergente donde verá un botón para editar la imagen.

Editar imágenes en WordPress
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 33

Esto abrirá las opciones de edición.

Estas herramientas incluyen cambiar el tamaño, recortar, rotar y voltear imágenes básicas.

Opciones de edición de imágenes en WordPress
Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) 34

Esta edición básica de imágenes es útil si necesita corregir una imagen rápidamente. Sin embargo, esta no es la mejor manera de editar imágenes todos los días.

Afortunadamente, hay varias opciones gratuitas y económicas disponibles para usted.

  • Canva: software gratuito de edición de imágenes basado en la web. También incluye plantillas listas para usar para imágenes de sitios web, logotipos, imágenes de redes sociales y más.
  • píxel – Software gratuito de edición de imágenes basado en la web. Se puede usar para cambiar fácilmente el tamaño de las imágenes para las publicaciones del blog.
  • aburrido – Software de edición de imágenes gratuito y de código abierto. Está disponible como una aplicación de escritorio nativa en Windows, Mac y Linux. Se puede usar para cambiar el tamaño de las imágenes, agregar capas de texto, editar fotos y más.

Esperamos que este artículo le haya ayudado a aprender más sobre los tamaños de imagen de WordPress y qué tamaños de imagen usar en su sitio web. También puede consultar nuestra guía sobre cómo elegir el mejor creador de sitios web o nuestras selecciones de expertos para los mejores complementos de WordPress para sitios web de pequeñas empresas.

Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube Videotutoriales para WordPress.También puedes encontrarnos en Gorjeo y Facebook.

El artículo Guía para principiantes sobre el tamaño de imágenes de WordPress (+ mejores prácticas) apareció por primera vez en AprenderWP.

Artículo Recomendado:  Accordion FAQ Plugin for WordPress v1.4.0

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.