¿Cómo insertar imágenes en WordPress?

Actualizado: junio/2019 Versión: 5.2.x  Nivel: Medio

¿Cómo insertar imágenes en WordPress?

Cuando se desarrolla un sitio web, ya sea con WordPress o con cualquier CMS, las imágenes juegan un papel muy importante en el diseño. Un sitio web sin imágenes carece de personalidad y el contenido se hace algo tedioso digerirlo.

Por otro lado, el exceso de imágenes tampoco es bueno en el diseño de un sitio web. Una buena imagen puede ofrecer mucha información sobre el contenido de una página o entrada pero el exceso de imágenes puede hacer que el lector pierda el foco del contenido y el significado.

1. El tamaño correcto de una imagen

Para comenzar a trabajar en una página o entrada, es necesario conocer el tamaño correcto que debe tener la imagen (o imágenes) que se va a utilizar.

Algunas veces, se suele usar imágenes irresponsablemente cuando se desarrolla un sitio web..

Esto se traduce de la siguiente manera:

  • Si utilizas imágenes muy grandes, el sitio web carga más lento y esto hace que pierdas usuarios.
  • Si utilizas imágenes muy pequeñas, se pierde la simetría de la página y no se ve bien.

El espacio asignado para una imagen suele estar dado por la plantilla. Mediante HTML y CSS se marcan los límites y tamaños de las imágenes para que se vean correctamente en el sitio web.

Entonces, ¿cómo conocer el tamaño correcto de la imagen?

Existe una extensión llamada Web Developer muy útil para trabajar con sitios web y se instala en los navegadores Chrome, Firefox y Opera. Puedes instalarla haciendo clic en el siguiente enlace: web developer.

Una vez instales la extensión (o complemento), en la parte superior derecha de tu navegador aparecerá un icono de rueda dentada.

¿Cómo insertar imágenes en WordPress?

Web Developer para Chrome, Firefox y Opera

Esta extensión cuenta con una serie de herramientas con las que podrás conocer cientos de parámetros de un sitio web.

Para conocer el tamaño exacto de un elemento, sigue los siguientes pasos:

  1. Abre en el navegador la página o entrada donde quieras insertar una imagen.
  2. Haz clic en el icono de la extensión y selecciona la pestaña Information.
  3. Haz clic en Display Element Information. Verás como el cursor del ratón ha cambiado por una cruz y, en la parte inferior del navegador, se ha abierto otra ventana.
¿Cómo insertar imágenes en WordPress?

Utilizando Web Developer en mi sitio web

Haciendo clic en cualquier elemento de la página, podrás conocer el tamaño exacto de ese elemento. El elemento que has seleccionado estará dentro de un rectángulo de borde rojo y en la ventana inferior aparecerá información relativa al elemento.

La información que nos interesa conocer son las dimensiones (ancho y alto) del elemento que se encuentra en el recuadro Layout. Las dimensiones vienen dadas en pixeles (px).

¿Cómo insertar imágenes en WordPress?

Midiendo las dimensiones de un elemento con Web Developer

Como puedes observar en la imagen anterior, el ancho del elemento es width: 640px y el alto es height: 108px.

Por ejemplo. Vamos a insertar una imagen entre el título principal y el primer bloque de texto.

Conocemos las dimensiones del elemento que acabamos de medir: un bloque de texto. Por lo tanto, para insertar una imagen justo encima de este elemento, la imagen deberá tener 640px de ancho.

La altura de la imagen puede ser cualquiera. Ten en cuenta que en un sitio web, normalmente, los límites son horizontales.

2. La extensión de una imagen

Otra característica importante a tener en cuenta, antes de subir una imagen a un sitio web, es la extensión de la imagen.

Dependiendo del uso que quieras darle a la imagen, podrá tener una extensión diferente de las demás.

Las extensiones más comunes, usadas en un sitio web, son:

  • JPG: utilizadas para fotografías o gráficos web.
  • PNG: utilizadas para logos, gráficos, infografías y capturas de pantalla.
  • GIF: utilizadas para logos y animaciones.
  • SVG: es un formato vectorial y es utilizado para logos, iconos y casi cualquier tipo de imagen sin pérdida.

El formato PNG permiten crear imágenes con fondo transparente (ideal para logos e iconos) y, utilizando unas buenas herramientas de optimización, pueden llegar a pesar muy poco sin perder calidad.

3. ¿Dónde encontrar imágenes para mi sitio web?

Ahora que ya sabes como conocer el tamaño exacto de una imagen y la extensión vamos a buscar una imagen para nuestro sitio web.

Lo que suelen hacer algunas personas es invocar a Google y buscar en su banco de imágenes. Ten en cuenta que estas imágenes "no pertenecen a Google" sino a otros sitios web que Google ha indexado así que ve con cuidado cuando quieras utilizar una imagen que hayas encontrado en Google porque podría tener derechos de autor.

Existen varias plataformas como Shutterstock donde se pueden comprar todo tipo de imágenes y vídeos libre de derechos de autor.

También existen otros cientos de plataformas donde descargar imágenes gratis pero ofreciendo una mención al autor mediante un enlace desde tu sitio web. Una de ellas es Freepik.

Otra alternativa es hacer fotogarfías. Esta es la mejor opción si estás desarrollando un sitio web de un lugar físico como un gimnasio, restaurante o una clínica, por ejemplo.

El artículo, donde conseguir imágenes gratis, nos ofrece información relevante de varios sitios web donde descargar imágenes gratis además de una información muy completa sobre el tipo de licencias de autor (Copyright).

4. ¿SEO para imágenes?

Así es. Las imágenes influyen en un gran porcentaje en el SEO de un sitio web. Por esta razón es muy importante que respetes y cumplas ciertas directrices para que tu sitio web se posicione correctamente.

Ten en cuenta que Google no solo posiciona un sitio web por el contenido textual. También lo hace por las imágenes y ofrece un valor añadido para que te encuentren en los resultados de las búsquedas.

Existen varios factores que Google toma en cuenta para incluir un sitio web en los resultados de las búsquedas. A continuación te enumero los más importantes y lo que tienes que hacer para optimizar correctamente tus imágenes.

Si has seguido el curso desde el inicio, podrás recordar que en la primera lección, hablamos del proyecto: desarrollar el sitio web de un Gimnasio.

Vamos a subir una imagen en base a esta temática y aplicar las técnicas SEO correspondientes.

4.1 Redimensionar una imagen (Velocidad de carga)

La velocidad de carga de un sitio web es uno de los factores más importantes en el SEO.

Afecta directamente a tus usuarios y es motivo para que el usuario se marche de tu sitio web si tiene que esperar mucho tiempo para ver la información que le ofreces.

Para que entiendas mejor el concepto de redimensionar una imagen te pongo un ejemplo.

Supongamos que tenemos una imagen de 200px de ancho y 100px de alto. Necesitamos que la imagen tenga 100px de ancho, lo que sería la mitad de la original.

Al redimensionar una imagen, si se modifica uno de sus lados, el otro lado también lo hace proporcionalmente; es decir, si el ancho se reduce a la mitad, la altura también se reduce a la mitad.. Una simple regla de tres.

Por lo tanto la imagen redimensionada tendría 100px de ancho y 50px de alto. En ningún momento hemos recortado la imagen ya que nos interesa la imagen completa sin perder nada.

Lo mismo pasaría si modificaramos la altura. El ancho se reduce a la mitad.

Continuando con el ejemplo inicial, vamos a buscar una imagen que tenga un ancho mayor o igual a 640px y sea de la temática de nuestro sitio web.

La imagen que hemos descargado tiene 1920px de ancho, 1080px de alto y pesa 182KB. Ten en cuenta que al modificar las dimensiones, también cambia el peso de la imagen.

Al redimensionar la imagen, el resultado es el siguiente:

  • Ancho: de 1920px a 640px
  • Alto: de 1080px a 360px
  • Peso: de 182KB a 45KB

El peso se ha reducido 137KB. Pareciera no tener importancia pero, si multiplicas eso por 1000 imágenes que pudiera tener un blog, a largo plazo, 137MB es un peso que se podría evitar y mejoraría la velocidad de carga de tu sitio web.

Pero, ¿con qué se redimensiona una imagen?

Existen cientos de aplicaciones con las que puedes redimensionar imágenes. Una de mis aplicaciones favoritas es GIMP.

Es un programa gratis que puedes descargar e instalar en tu ordenador (computadora) y, además de redimensionar imágenes, te permite hacer casi cualquier cosa ya que es muy similar a Photoshop.

Para descargar el programa haz clic en GIMP.

En este tutorial puedes aprender a redimensionar una imagen con GIMP.

¿Cómo insertar imágenes en WordPress?

GIMP: software de edición de imágenes

4.2 Recortar una imagen (Simetría)

Imagínate que quieres subir 3 imágenes, una al lado de la otra, como si fuera una galería. Cuando has buscado las imágenes y las has redimensionado, la altura de las 3 es diferente.

Lo recomendable es que recortes las 2 imágenes de mayor altura con la medida de la imagen de menor altura de manera que, cuando subas las imágenes a tu sitio web, estas tengan las mismas dimensiones.

Esto es algo que, a nivel de diseño, ofrece una simetría que visualmente es más agradable para el usuario y da un toque más profesional a tu sitio web.

En este tutorial puedes aprender a recortar una imagen con GIMP.

4.3 Nombre de la imagen (Indexación)

Para ayudar a Google a indexar las imágenes de tu sitio web, es necesario que las renombres correctamente teniendo en cuenta las siguientes reglas:

  • Que el título esté escrito todo en minúsculas. Intenta que coincida con el título de la página o entrada. Por ejemplo: gimnasio-training-fitness.jpg.
  • Que cada palabra esté separada por guiones (sin espacios).
  • Que ninguna palabra tenga tildes (acentos).
  • Que ninguna palabra tenga símbolos o caracteres especiales como la letra “ñ”. Si una palabra lleva “ñ”, puedes escribir la letra “n” en su lugar.

4.4 Optimizar una imagen (Carga en el servidor)

Una imagen comprimida mejora, aún más, la velocidad de carga de un sitio web.

Las imágenes suelen contener cierta información adicional que, para un sitio web, no interesa. Por esto es necesario quitar toda esa información para que el archivo pese menos y no ocupe más espacio de lo necesario en el servidor.

Existe una herramienta online llamada TinyPNG que se encarga de eliminar toda esa información innecesaria sin alterar la imagen. Puedes acceder a la página desde TinyPNG.

Selecciona la imagen (o imágenes) y arrástrala directamente al navegador. Inmediatamente el oso panda comenzará a hacer su trabajo. Una vez finalice, haz clic en download para descargar la imagen comprimida.

¿Cómo insertar imágenes en WordPress?

TinyPNG: aplicación online para comprimir imágenes

Como puedes observar en la imagen, TinyPNG ha reducido el peso de la imagen en un 28%. Si abres la imagen original y la imagen comprimida, verás que no existe ninguna diferencia ni se ha alterado la imagen original.

El resultado...

La imagen comprimida tiene las siguientes características:

  • Formato: JPG
  • Nombre: gimnasio-training-fitness.jpg
  • Dimensiones: 640px de ancho y 360px de alto
  • Tamaño: 33KB

La imagen se encuentra lista para subirla a nuestro sitio web.

5. Subir una imagen a WordPress

Inicia sesión en WordPress y dirígete a la página o entrada donde vayas a subir la imagen.

En este curso de WordPress, estamos trabajando con la plantilla Astra y el editor de contenidos Elementor.

Puedes echarle un vistazo a la lección instalación y configuración de Elementor, para que conozcas el funcionamiento de este editor de contenidos.

  1. En la página (o entrada) haz clic en Editar con Elementor.
  2. Crea una sección, de 1 columna, y arrástrala justo debajo del título principal.
¿Cómo insertar imágenes en WordPress?

Nueva sección en Elementor

  1. En la pestaña BÁSICO, selecciona el elemento Imagen y arrástralo a la nueva sección.
¿Cómo insertar imágenes en WordPress?

Insertar una imagen en Elementor

  1. En el panel izquierdo, haz clic en la imagen (Seleccionar imagen).

Tienes dos opciones para subir una imagen:

  • La seleccionas desde tu PC y la arrastras hasta la pantalla de WordPress.
  • Haz clic en el botón Seleccionar archivos, la buscas en el PC y la subes.
¿Cómo insertar imágenes en WordPress?

Subiendo una imagen a WordPress

Antes de insertar la imagen, verás otros campos que tienes que tener en cuenta:

  • Título: por defecto te muestra el nombre que has dado a la imagen. Puedes cambiarlo por un título que sea acorde al contenido de la página o entrada.
  • Leyenda: sirve para añadir texto debajo de la imagen y explicar su contenido. Dependerá de la plantilla que estés utilizando para que se muestre o no. Es opcional.
  • Texto alternativo: este campo es el más importante y se conoce como etiqueta ALT. Es un parámetro de las imágenes que hay que tener siempre en cuenta para el SEO.
    Puedes leer la entrada sobre títulos y etiquetas alt que es una de las directrices para Webmasters de Google que hay que respetar.
  • Descripción: es una descripción más amplia de la imagen y ayudará a Google a saber de qué trata la imagen.

Teniendo claros estos puntos, haz clic en el botón Insertar medio.

¿Cómo insertar imágenes en WordPress?

Imagen subida a WordPress

En el panel izquierdo se encuentran las opciones avanzadas para configurar la imagen. En nuestro caso, hemos optimizado nuestra imagen al tamaño máximo (640px de ancho).

Si has subido una imagen más grande (o más pequeña), puedes utilizar estas opciones avanzadas para adaptarla al contenido de la página o entrada.

¿Cómo insertar imágenes en WordPress?

Opciones avanzadas de una imagen en Elementor

  1. Haz clic en ACTUALIZAR.
  2. Abre en el navegador la página o entrada para visualizar los cambios.

Si medimos la imagen veremos lo siguiente:

¿Cómo insertar imágenes en WordPress?

Midiendo una imagen en un sitio web

La imagen tiene 620px de ancho y 349px de alto. ¿Qué ha pasado?

Por defecto, algunos editores de contenido, añaden un padding a los elementos. Para que la imagen se adapte al tamaño completo del contenido, hay que eliminar el padding.

En la lección, HTML y CSS para WordPress, tienes información actualizada sobre los conceptos padding y margin.

  1. Regresa a la edición de la página o entrada con Elementor.
  2. En la parte superior izquierda de la imagen verás el ícono de la columna. Haz clic en este ícono.
  3. En el panel izquierdo de Elementor aparecerán las opciones de la columna. Haz clic en la pestaña Avanzado.
  4. Escribe "0" (cero) en Relleno (padding).
  5. Haz clic en ACTUALIZAR.
¿Cómo insertar imágenes en WordPress?

Quitando el padding en la imagen con Elementor

De esta forma, hemos quitado los valores de padding que añade Elementor, por defecto, a los elementos y la imagen se adapta perfectamente al contenido del sitio web.

¿Cómo insertar imágenes en WordPress?

Imagen subida a un sitio web

6. Plugin para optimizar imágenes en WordPress

Aunque TinyPNG es una aplicación que comprime casi en su totalidad las imágenes antes de subirlas a WordPress, existe un plugin que las comprime un poco más: Smush Image Compression and Optimization.

Para instalar el plugin:

  1. Dirígete al apartado Plugins >> Añadir nuevo y en el buscador escribe Smush.
  2. Haz clic en Instalar ahora y luego en Activar.
¿Cómo insertar imágenes en WordPress?

Plugin Smush Image Compression and Optimization

Ahora dirígete al apartado Smush. Se abrirá una ventana emergente con el asistente de configuración del plugin.

Configura las opciones de la siguiente manera:

  • Compresión automática. Optimizar automáticamente los nuevos archivos subidos: desactivado. (Puedes activarlo pero consumirá ancho de banda del servidor y el proceso será más lento).
  • Metadatos EXIF. Quita los metadatos de mi imagen: activado.
  • Datos de uso. Permitir el seguimiento de uso de datos: opcional.

Haz clic en el botón FINALIZAR EL ASISTENTE DE CONFIGURACIÓN.

¿Cómo insertar imágenes en WordPress?

Ajustes del plugin Smush

Cada vez que subes imágenes a WordPress, el plugin te indicará que hay imágenes sin optimizar en el apartado Reducir por lotes.

Haciendo clic en el botón BULK SMUSH AHORA comenzara la optimización de todas las imágenes que se encuentren sin optimizar.

¿Cómo insertar imágenes en WordPress?

Optimizando imágenes con Smush

Cuando el plugin finalice de optimizar las imágenes te mostrará el siguiente mensaje: ¡Todos los adjuntos han sido reducidos. ¡Increíble!

Además te irá mostrando la cantidad de imágenes que se han optimizado y el tamaño que se ha comprimido.

¿Cómo insertar imágenes en WordPress?

Imágenes optimizadas con Smush

7. Gestionar imágenes en WordPress

Todas las imágenes que se suben a WordPress se suelen guardar en el servidor en un directorio llamado uploads que se encuentra en la ruta: wp-content/uploads/.

Además, si has configurado los ajustes de medios en el apartado Ajustes >> Medios para que se guarden en carpetas basadas en el mes y año, las imágenes se guardarán en la ruta wp-content/uploads/(año)/(mes)/.

En la lección, qué hacer después de instalar WordPress, tienes una información más detallada sobre este apartado (punto 4.4).

¿Cómo insertar imágenes en WordPress?

Ajustes de medios en WordPress

En WordPress, en el apartado Medios, puedes ver en formato lista o cuadrícula, todas las imágenes que componen tu sitio web. Desde este apartado puedes editar y borrar las imágenes que ya no utilices.

¿Cómo insertar imágenes en WordPress?

Gestión de imágenes en WordPress desde el apartado Medios

Recomendación...

Intenta siempre borrar las imágenes desde WordPress, ya sea desde el apartado Medios o desde cualquier página o entrada.

Nunca borres las imágenes desde el servidor ya que las imágenes también se guardan en la base de datos y, si las borras desde el servidor, la base de datos no sabrá que ya no existen y se convertirán en errores 404 muy penalizados por Google.

Con este sencillo tutorial podrás comenzar a trabajar con tus imágenes en WordPress correctamente. Recuerda que las imágenes cumplen un papel fundamental en el SEO de tu sitio web. Pueden ser tan útiles como llegar a convertirse en un dolor de cabeza si no las gestionas y optimizas adecuadamente.

¿Te ha gustado?

Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

Valora esta entrada

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas

(3 votos, promedio: 5,00 de 5)

Cargando…

Recibe notificaciones de actualizaciones

Suscríbete para recibir notificaciones de las actualizaciones del curso en tu correo.

Cuéntanos, ¿qué tal te la has pasado?

Deja un comentario si tienes alguna duda o comparte como ha sido tu experiencia. No necesitas registrarte para comentar. Cuando vayas a escribir tu nombre, marca la casilla Prefiero comentar como invitado y envía tu comentario.