Cómo usar imágenes en Wordpress

Cómo Insertar Imágenes en WordPress correctamente

Para aprovechar todo el poder de las imágenes necesitas ser consciente de cómo hacer un correcto uso de las mismas, caso contrario podrías terminar causándote más de un dolor de cabeza.
  1. Inicio
  2. WordPress
  3. Guías WordPress
  4. Cómo Insertar Imágenes en WordPress correctamente

WordPress es Mejor con Divi

Recursos mencionados en el video:

Una imagen vale más que mil palabras, antigua frase que se aplica mejor que nunca a la era de internet.

Sin embargo para aprovechar todo el poder de las imágenes necesitas ser consciente de cómo hacer un correcto uso de las mismas, caso contrario podrías terminar causándote más de un dolor de cabeza.

En esta guía voy a explicarte cómo insertar imágenes en una entrada o página de WordPress, vamos a ver en detalle el editor de imágenes avanzado de WordPress.org y te voy a contar qué cosas deberías tener en cuenta para sacar el máximo beneficio de éstas.

Por qué utilizar imágenes

Sea que tengas un blog o estés creando una página de tipo institucional es muy recomendable que acompañes siempre tus textos con imágenes.

  • Las imágenes mejoran el aspecto general del sitio web, captan la atención del lector y te ayudan a retenerla en artículos largos, ya que lo hacen más agradable a la vista y amenizan la lectura.
  • Las infografías son un recurso muy interesante para resumir conceptos de forma gráfica y si están bien hechas tu artículo tiene más posibilidades de ser compartido.
  • Si tus imágenes y gráficos son atractivos e interesantes tu lector se detiene a mirarlos y está comprobado que aumenta el tiempo de permanencia en la página, lo cual es positivo de cara al posicionamiento en buscadores.
  • Google no solo indexa el texto de tus artículos sino también las imágenes con lo cual, si tu artículo incluye imágenes, mejor.

Antes de subir tus imágenes

WordPress es el gestor de contenidos ideal para personas que no tienen conocimientos técnicos ni de diseño web, no me voy a cansar de decirlo, está creado y desarrollado pensando en gente «normal». Por eso incluye funcionalidades que se encargan de optimizar las imágenes automáticamente en el momento de subirlas y que te hacen las cosas más fáciles.

Si embargo no es Dios. Si por ejemplo subes una imagen en un formato inadecuado para internet, como podría ser el BMP, WordPress no la convierte a otro formato mejor. Sí existen plugins que se ocupan de optimizar y comprimir las imágenes para que no ocupen tanto espacio y carguen más rápido.

Sin embargo yo te voy a recomendar hacer algunas cosas antes de subir tu imagen para que obtengas mejores resultados con herramientas externas a WordPress y no sobrecargues tu blog con plugins innecesarios.

Elegir el formato adecuado

Por favor, nada de BMP, este formato de imagen no sirve para internet. Son archivos muy pesados que va a hacer muy lenta la carga de tus páginas y ésto está mal visto a los ojos de Google y de los usuarios, que no tenemos paciencia para esperar.

El criterio general es el siguiente:

  • JPG: para fotografías.
  • PNG: para logos, gráficos, infografías y capturas de pantalla.
  • GIF: para logos y gráficos animados.
  • SVG: para logos, imágenes gráficas e infografías.

Escalar las imágenes

No tiene sentido subir una imagen de 1500 píxeles de ancho para que se vea de 800 píxeles, y si bien WordPress ésto lo suele ajustar automáticamente no siempre es así. Y además, la imagen original queda guardada en el servidor.

Yo te recomiendo que la recortes antes de subir con cualquier editor de imágenes como Photoshop o Gimp.

El ancho en que se muestran tus imágenes depende de cómo esté configurado tu tema y en general no supera los 850 píxeles de ancho. Para saber la medida exacta en tu caso puedes hacer lo siguiente: si utilizas el navegador Firefox, lo cual te recomiendo siempre para desarrollo web:

  1. Haces clic derecho sobre la imagen y eliges Ver información de la imagen.
  2. En la ventana que se abre buscas el campo Dimensiones, donde te muestra la medida real en píxeles, y entre paréntesis te indica si el navegador la está escalando a pedido de tu tema (escalada a …).

Si las imágenes están siendo escaladas por el navegador es porque no hiciste bien la tarea.

 

Consultar dimensiones imagen internet

 

La anterior es una captura real de una imagen de mi blog. Nos dice que la imagen mide 850 píxeles de ancho y que el navegador la está escalando a 848, que es la medida de la columna central según el diseño actual.

En este caso 2 píxeles es una diferencia insignificante pero si te muestra diferencias muy grandes deberías preocuparte.

Optimizar el archivo

Escalar la imagen al tamaño adecuado no es suficiente.

Las imágenes JPG y PNG en general están grabadas con una calidad que suele ser muy superior a lo necesario para verse bien en internet. Por lo tanto necesitamos eliminar toda esa información adicional, innecesaria en nuestro caso, para que el archivo ocupe menos, alterando lo menos posible la calidad final de la imagen.

Para hacer ésto yo utilizo una herramienta online y gratuita que me resulta muy práctica: TinyPNG. Lo único que tienes que hacer es seleccionar la imagen y la aplicación se encarga de reducir su tamaño automáticamente al máximo posible.

En la siguiente captura puedes ver la increíble diferencia de tamaño entre los archivos originales y los optimizados, hasta el 70% de reducción. Y ésto sin afectar en lo más mínimo a la calidad de las imágenes.

 

Optimizar imagen con TinyPNG

 

Luego descargas la imagen optimizada y la subes a tu blog normalmente, pero antes te recomiendo una cosita más.

Darle un buen nombre al archivo

Para que la imagen sume al posicionamiento del artículo es importante que el nombre del archivo contenga las palabras principales del mismo o bien del subtítulo al que pertenece.

Ya que WordPress no te va a permitir modificar el nombre del archivo una vez subida la imagen es importante que no te olvides de hacerlo antes.

Por ejemplo, si tu artículo se llama Cómo cuidar un bonsái, la imagen principal del mismo debería llamarse cuidar-bonsai.jpg, y no image025.jpg.

 

Cumpliendo estas cosas puedes estar tranquilo de estar utilizando correctamente las imágenes y de sacar el máximo provecho de ellas.

Insertar una imagen en WordPress

Para insertar una imagen en WordPress, cuando estás en el editor de la entrada tienes que situar el cursor en el lugar donde deseas colocarla.

Después haces clic en el botón Añadir objeto, lo puedes encontrar encima de la barra de herramientas.

 

Cómo insertar una imagen en WordPress Paso 1

 

Entonces se abre una ventana como la siguiente. Vas a ver dos solapas en la parte superior: Subir archivos y Biblioteca multimedia.

 

Cómo insertar una imagen en WordPress Paso 2

 

Si hubieras subido ya algunas fotos, las mismas aparecerán en la solapa Biblioteca multimedia. Si en cambio necesitas subir una nueva haces clic en Subir archivos.

 

En la solapa subir archivos vas a Selecciona archivos para buscar la imagen en tu equipo navegando por las carpetas.

 

Cómo insertar una imagen en WordPress Paso 3

 

Una vez seleccionada la imagen el sistema comienza a cargarla y te lleva automáticamente a la Biblioteca multimedia donde aparece la imagen recién subida ya marcada.

 

Cómo insertar una imagen en WordPress Paso 4

 

Haces clic en el botón Insertar en la entrada y la imagen es colocada directamente en el lugar de la entrada donde habías puesto el cursor.

Detalles de la imagen

Una vez insertada la imagen, si haces clic sobre la misma vas a ver que aparece una pequeña barra con botones.

Editar una imagen en WordPress Paso 0Los primeros botones son para elegir la alineación de la imagen con respecto al texto, puedes probar lo que mejor te resulte.

El último botón, con forma de lápiz, abre una ventana para editar los detalles de la imagen, algunos de estos detalles es importante que los conozcas.

 

Editar una imagen en WordPress Paso 1

Texto Alternativo y Atributo «title» de la imagen

Antes te decía que la imagen debería tener en su nombre de archivo las palabras principales del artículo o del subtítulo al que pertenece para ayudar al posicionamiento en buscadores.

Tanto el Texto Alternativo como el Atributo «title» de la imagen también son muy importantes en este sentido y deberían ser ambos el mismo título del artículo, en nuestro caso Cómo cuidar un bonsái, si es que se trata de la imagen principal, o el subtítulo al cual pertenece, si es una imagen secundaria.

Es muy importante que estos valores no se repitan en otras imágenes por lo que debes que pensar bien qué frase utilizar en cada una, si tienes varias. Lo ideal es seguir la lógica del artículo y que cada imagen utilice el nombre del subtítulo al que pertenece.

Tamaño

Esta opción te permite elegir en qué tamaño mostrar la imagen: tamaño completo, medio o miniatura. Si tu imagen está correctamente escalada se supone que vas a utilizar Tamaño completo, es lo ideal por lo explicado más arriba sobre la optimización de las imágenes.

Enlazado a

Puedes elegir a dónde enlaza la imagen cuando alguien hace clic sobre ella. Lo normal es seleccionar Ninguna.

Editar original

Esta es la más poderosa de todas las herramientas que puedes encontrar en los Detalles de la imagen. Te permite escalar, recortar, rotar y reflejar la imagen.

Si bien, como te recomendaba más arriba, es mejor hacer estas tareas antes de subir la imagen, WordPress te brinda la posibilidad de retocar desde este panel.

Para acceder hay que hacer clic en el botón Editar original, a la derecha.

Una vez dentro vas a encontrar una serie de herramientas que te permiten hacer los diferentes cambios en la imagen.

 

Editar una imagen en WordPress Paso 3

Recorte de la imagen

Para recortar la imagen de forma manual hay que hacer clic en un punto de la misma y arrastrar formando una ventana, como se ve en la captura anterior.

Una vez definida la ventana a recortar haces clic sobre el icono Recortar de la barra de herramientas para completar la operación.

A la derecha vas a encontrar también una forma más precisa de recortar la imagen indicando los valores de la selección, pero con el recorte manual en general es más que suficiente.

 

El resto de las herramientas son bastante intuitivas y no requieren explicación. Una vez efectuados todos los cambios le das a Guardar y listo.

Conclusión

Lo que acabamos de ver es prácticamente todo lo que necesitás tener en cuenta sobre el tratamiento de las imágenes y las herramientas que ofrece WordPress para tal fin. Para que tus imágenes no sean solo decorativas sino que aporten al posicionamiento del artículo.

Como habrás podido observar, no se trata simplemente de elegir cualquier foto y subirla así como viene. La imágenes necesitan ser cuidadas de la misma forma que cuidamos el texto, en su redacción y ortografía.

 

Si te resultó útil compártelo con amigos, así los ayudas a ellos y también a mí. Utiliza los botones de más abajo. Gracias.

 

Jorge B.

Jorge B.

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

11 Comentarios

  1. Marcelo Villegas

    Excelente Curso Jorge, para nuestras imagenes en WP, gracias por toda la Informacion sobre WordPress. Esperamos mas Recursos sobre este CMS. Saludos y mucho exito.

    Responder
    • Jorge Baffa

      Gracias Marcelo. Un abrazo.

  2. Natalia

    Genial!!!!!!!!!

    Responder
    • Jorge Baffa

      Gracias Natalia. Éxitos!

  3. Sergio

    Muchas gracias por tu información de gran utilidad, para poder optimizar mejor las imagenes que subimos a la Web. Gran trabajo. Dios bendiga tu vida y mantenga ese espiritu que tienes de ayudar a las personas. Saludos, un gran abrazo desde España.

    Responder
    • Jorge Baffa

      Gracias Sergio por tu mensaje.
      Un abrazo.

  4. Laura Moreno Ropero

    Hola Jorge, mi wordpress no me escala las imágenes automáticamente. ¿Me puedes decir cuál sería el error? ¿o es que lo tengo que hacer yo manualmente cada vez que subo una imagen al blog?

    Responder
    • Jorge Baffa

      Hola Laura. WordPress no escala las imágenes. Hay que hacerlo manualmente con las herramientas que indico en la guía previo a subirlas a WordPress; o bien instalar algún plugin que escale las imágenes automáticamente al subirlas, como por ejemplo Smush.
      Saludos.

  5. Laura Moreno Ropero

    Y tengo otra pregunta, cuando hablas del Texto Alternativo y el Atributo «title» de la imagen, ¿se debe añadir con guiones entre palabra y palabra o la frase así tal cual?
    Gracias!!

    Responder
    • Jorge Baffa

      Sin guiones. Son textos para ser leídos por las personas que ayudan además a darle contexto a la imagen e indexarla mejor en Google.

      En el caso del «title» aparece cuando pasamos el mouse por encima de la imagen y el texto alternativo lo muestra el navegador en el caso de que no pueda cargar la imagen por cualquier motivo.

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *