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

¿Quieres aprender acerca de los tamaños de imagen de WordPress?

A menudo los principiantes nos preguntan acerca de los tamaños de imagen que deben utilizar 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 habituales en WordPress y compartiremos las mejores prácticas para saber qué tamaños utilizar en su sitio web.

¿Qué es el tamaño de una imagen?

El tamaño de una imagen suele referirse a su anchura y altura medidas en píxeles. Por ejemplo, 1600×900 píxeles significa una imagen que tiene 1600 píxeles de ancho y 900 píxeles de alto.

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 aumenta el tamaño del archivo.

El tamaño de un archivo de imagen es el espacio que ocupa un archivo de imagen en un ordenador, y se mide en bytes. Por ejemplo, 100 KB (kilobytes).

Si el tamaño del archivo de una imagen es mayor, los usuarios tardarán más en descargarla, lo que afectará a la velocidad y el rendimiento de su sitio web. Por eso es importante que el tamaño del archivo de imagen sea lo más pequeño posible y que tenga las dimensiones adecuadas.

Esto nos lleva a los formatos de archivo de imágenes.

Los formatos de archivo de imagen son las tecnologías de compresión para guardar tus archivos de imagen. Los más utilizados en la web son JPEG y PNG.

Las imágenes como las 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 utilizar PNG para obtener los mejores resultados.

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

Dicho esto, veamos qué tamaños de imagen utilizar en WordPress para las distintas áreas de su sitio web.

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

En un sitio web WordPress normal, utilizarás imágenes en varias áreas de tu sitio web. Necesitará imágenes para las entradas de su blog, miniaturas, cabeceras de página, imágenes de portada y mucho más.

WordPress maneja automáticamente algunos de los tamaños de archivo de imagen por defecto. Cada vez que subas una imagen, WordPress hará automáticamente varias copias de ella en diferentes tamaños.

Puede ver e incluso ajustar los tamaños de imagen por defecto de WordPress visitando la página Ajustes ” Medios en el área de administrador de WordPress.

Verás tres tamaños: mediano, miniatura y grande.

Sin embargo, su tema de WordPress puede crear sus propios tamaños de imagen adicionales y utilizarlos para diferentes secciones de su sitio.

Estos tamaños no serán visibles en la pantalla de medios, y la única forma de ver esos tamaños adicionales es accediendo al gestor de archivos de su cuenta de alojamiento de WordPress.

A continuación, vaya a la carpeta /wp-content/uploads/ y seleccione la carpeta de cualquier año que desee examinar. Esto le ayudará a ver todos los diferentes tamaños de imagen de su sitio de WordPress está generando.

Dicho esto, echemos un vistazo a las distintas áreas de su sitio web y a los tamaños de imagen que debería utilizar en ellas.

Qué tamaño de imágenes utilizar en las entradas de blog

Debe elegir el tamaño de la imagen para las entradas de su blog en función de su tema de WordPress.

Por ejemplo, algunos temas de WordPress vienen con una estructura / disposición / diseño / plantilla de una sola columna que permite utilizar imágenes más anchas.

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

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

• Estructura / disposición / diseño / plantilla: 1200×675
• Estructura / disposición / diseño / plantilla a dos columnas: 680×382

Ahora bien, puede que hayas advertido que muchos sitios web populares de WordPress utilizan el mismo ancho de imagen para todas sus imágenes dentro de un artículo. Sin embargo, esto no es una regla estricta.

Por ejemplo, si necesita añadir un bloque de “medios y texto”, puede ajustar el tamaño de la imagen en consecuencia. En el ejemplo siguiente, utilizamos una imagen en tamaño vertical junto a un texto.

Del mismo modo, es posible que desee utilizar imágenes cuadradas para algunas situaciones.

Por ejemplo, aquí tiene un ejemplo de imágenes cuadradas utilizadas en una estructura / disposición / diseño / plantilla de varias columnas.

Cuando utilice imágenes cuadradas, sólo tiene que asegurarse de que las dimensiones de la imagen tengan la misma anchura y altura, como 300 x 300 píxeles.

¿Qué tamaño de imagen utilizar para las imágenes destacadas?

Lasimágenes destacadas, también llamadas miniaturas de entradas, son una característica de los temas de WordPress. Esto significa que tu tema determinará qué tamaño de imágenes mostrar.

Por ejemplo, algunos temas de WordPress pueden utilizar la relación de aspecto estándar 16:9 para los tamaños de las imágenes destacadas (por ejemplo, 680×382 píxeles).

Algunos temas de WordPress también pueden utilizar la imagen destacada como una imagen de cabecera más grande. Para ello, es posible que necesiten imágenes más grandes (como 1200×675).

Las imágenes destacadas son importantes ya que tu tema de WordPress puede utilizarlas en diferentes áreas de tu sitio web. Suelen ser lo primero que ven tus visitantes, así que querrás causar una buena primera impresión.

Recomendamos utilizar imágenes más grandes, para que sigan luciendo bonitas tanto si se reducen como si se utilizan en modos más amplios.

Del mismo modo, si su tema de WordPress utiliza imágenes cuadradas como imagen destacada, le recomendamos que utilice imágenes de al menos 600×600 píxeles.

• Para temas que utilizan imágenes destacadas rectangulares: 1200×687 píxeles
• Para temas que utilizan imágenes destacadas cuadradas: 600×600 píxeles

Su tema de WordPress generará tamaños adicionales para las imágenes destacadas que se utilizarán en diferentes áreas, como la página de inicio, la página de blog o las páginas de archivo.

¿Qué tamaño de imagen utilizar en los medios sociales?

Ahora bien, si tu tema de WordPress utiliza imágenes destacadas con una relación de aspecto de 16:9, también puedes utilizarlas como imágenes de medios sociales para Twitter y Facebook.

Sin embargo, tendrás que indicar explícitamente a esas plataformas qué imagen quieres mostrar cuando alguien comparta un artículo de tu sitio web.

Para ello, necesitará el plugin All in One SEO para WordPress. Es el mejor plugin SEO para WordPress del mercado, utilizado por más de 3 millones de sitios web. Te ayuda a optimizar tu sitio web para los motores de búsqueda y las plataformas de medios sociales.

Nota: También existe una versión gratuita limitada de All in One SEO que puede probar.

En primer lugar, debe instalar y activar el plugin. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, el plugin 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 establecer All in One SEO para obtener instrucciones paso a paso.

Después de eso, necesitas visitar la página de All in One SEO ” Redes Sociales y cambiar a la pestaña de Facebook. Desde aquí puedes establecer “Imagen destacada” como tu fuente de imagen Open Graph por defecto.

A continuación, puedes cambiar a la pestaña Twitter y hacer lo mismo.

No olvides hacer clic en el botón Guardar cambios para establecer los ajustes.

Ahora bien, si tu tema de WordPress utiliza imágenes con un tamaño diferente, es posible que Facebook y Twitter no puedan mostrar esas imágenes correctamente.

En ese caso, puede proporcionar a las plataformas de medios sociales una imagen personalizada.

Simplemente crea una imagen con relación de aspecto 16:9 (1200×675 píxeles o 680×382 píxeles). A continuación, edite la entrada o página y desplácese hasta la sección de ajustes de AIOSEO situada debajo del editor.

Desde aquí, tienes que cambiar a la pestaña Social y desplazarte hasta la sección Fuente de imagen. En el menú desplegable, seleccione Imagen personalizada y, a continuación, suba su imagen de Facebook.

Tendrás que repetir el proceso también en la pestaña Twitter.

Tendrás que hacer esto para todos los artículos que publiques para asegurarte de que los medios sociales utilizan la imagen que tú quieres que utilicen.

Para obtener más información sobre el tamaño de las imágenes de los medios sociales, consulta nuestra hoja de trucos para principiantes sobre los medios sociales en WordPress.

Qué tamaño de imagen usar para el logotipo de un sitio web en WordPress

Muchos temas de WordPress le indicarán el tamaño de imagen que debe utilizar para el logotipo de su sitio web.

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

Sin embargo, si está utilizando un tema de WordPress más reciente con la característica de edición completa del sitio, entonces usted no puede obtener una recomendación para el tamaño de la imagen del logotipo.

En ese caso, le recomendamos que suba diferentes estilos y tamaños para ver qué se adapta mejor a su marca. Un tamaño de imagen de logotipo de 300×200 píxeles puede ser un buen punto de partida.

Edición de imágenes para su sitio web WordPress

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

WordPress incluye algunas herramientas básicas de edición de imágenes. Para utilizarlas, basta con ir a la página Medios ” Biblioteca y hacer clic en una imagen.

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

Se abrirán las opciones de edición.

Entre las herramientas se incluyen las básicas de redimensionado, recorte, rotación y volteo de imágenes.

Esta edición básica de imágenes resulta muy útil si necesitas corregir una imagen rápidamente. Sin embargo, no es la mejor forma de editar tus imágenes en el día a día.

Por suerte, hay varias opciones gratuitas y baratas que puedes utilizar.

• Canva: software gratuito de edición de imágenes en Internet. También incluye plantillas listas para usar para imágenes de sitios web, logotipos, imágenes de medios sociales y mucho más.
• Pixlr – Software gratuito de edición de imágenes. Puede utilizarse para cambiar fácilmente el tamaño de las imágenes de las entradas de tu blog.
• Gimp – Software de edición de imágenes gratuito y de código abierto. Funciona como una aplicación de escritorio nativa en Windows, Mac y Linux. Se puede utilizar para cambiar el tamaño de las imágenes, añadir capas de texto, editar fotos y mucho más.

Esperamos que este artículo te haya ayudado a aprender más acerca de los tamaños de imagen de WordPress y qué tamaños de imagen utilizar en tu sitio web. Puede que también quieras ver nuestra guía sobre cómo elegir el mejor maquetador de sitios web o nuestra selección experta de los mejores plugins de WordPress para sitios de pequeñas empresas.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.