Antes de insertar una o varias imágenes en una entrada o página, conviene pararse a pensar en el contenido del artículo y en la relación que deseamos mantenga con las imágenes incluidas en él. Así pues, es necesario plantearse preguntas como las siguientes: ¿para qué sirven las imágenes?, ¿aportan alguna información relevante?, ¿qué relación mantienen con el texto o con el contenido del sitio web?, ¿responden a meros propósitos estéticos, o tienen alguna otra finalidad?
Por otro lado, la inserción de imágenes también debe considerar algunas preguntas previas de carácter más técnico: ¿disponemos de licencia para reproducirlas?, ¿tienen suficiente calidad?, ¿en qué dispositivo prevemos que se vayan a visualizar?, ¿cuál es el ancho de banda habitual de los usuarios que van a verlas?, etc.
En función de la respuesta que demos a las preguntas anteriores (o a otras parecidas que puedan derivarse de las circunstancias específicas de cada sitio web), deberemos decidir qué imagen insertamos, de dónde la obtenemos, cómo la reproducimos y en qué condiciones la insertamos respecto al texto del artículo y otros elementos claves del diseño de nuestro sitio web. Un caso especialmente importante es el de las imágenes destacadas, ya que estas son utilizadas por los temas para crear miniaturas o cabeceras. En este sentido, y teniendo previamente en cuenta todos los condicionantes técnicos que hemos mencionado en el párrafo precedente, deberemos analizar aspectos como los siguientes:
- La relación entre el contenido de la imagen y el del artículo. Esa relación puede ser puramente denotativa, referencial (es decir, la imagen representa el contenido del artículo o algún aspecto clave de él), o bien intencionalmente expresiva: metafórica, alusiva, irónica, humorística, poética, etc. Una selección de imágenes creativa y original puede aportar efectos expresivos muy interesantes a un sitio web y proporcionarle un aspecto visual característico y singular.
- La forma y la proporción adecuadas para la imagen destacada. Muchos temas para WordPress permiten decidir entre distintos tamaños y proporciones (por ejemplo, el tema Education Pro, con el que está realizado este sitio web, permite al menos cuatro tamaños distintos). Así pues, en cada caso tendremos que optar por el que nos parezca más adecuado desde todos los puntos de vista.
Una vez tomadas todas las decisiones necesarias, ya podemos dedicarnos a la tarea de insertar imágenes, de acuerdo con las posibilidades que WordPress brinda a tal efecto.
Alineación de las imágenes
Las imágenes siempre deben considerarse en relación con el texto al que se refieren, y con el espacio disponible para insertarlas, espacio que se denomina “caja tipográfica” o “caja de texto” (este segundo término es más impreciso, ya que puede confundirse con el espacio de un formulario destinado a la introducción de texto). En WordPress, como en la inmensa mayoría de aplicaciones semejantes, las imágenes pueden alinearse a izquierda, a derecha, o en el centro del párrafo. Cuando la imagen se alinea a la izquierda, se dice que “flota” a ese lado; si se alinea a la derecha, el efecto de flotación se produce en el lado contrario. A continuación vemos ejemplos de ambas alineaciones, con imágenes que flotan con respecto a sendos párrafos sin sentido, generados automáticamente con la herramienta lorem ipsum:
Pellentesque sit amet leo diam. Praesent at urna viverra mi feugiat iaculis a eu dolor. Sed pretium felis orci, a vestibulum ipsum pretium nec. Morbi sit amet tellus vehicula, venenatis leo quis, mollis lacus. Aenean viverra bibendum pretium. Ut nec lectus dignissim, semper enim eu, placerat arcu. Nunc ac lacus velit. Nullam cursus, nisl at luctus efficitur, velit est maximus diam, ut egestas lorem eros eu dolor. Nam nec nulla quis tellus sodales pharetra. Aenean fermentum erat ac placerat porta. In risus orci, facilisis sed est a, iaculis porttitor lectus. Suspendisse placerat sem et blandit dictum. Nullam a felis a dolor porta porta et ut nisl. Donec nec libero ligula. Integer pellentesque nisi maximus, volutpat magna nec, posuere nibh.
Nunc hendrerit nibh non pharetra lacinia. Nunc semper ac leo ac fermentum. In ac dui efficitur, suscipit nulla sit amet, condimentum quam. Integer non mi risus. Vestibulum pretium semper porttitor. Suspendisse quis enim faucibus, volutpat risus non, rutrum nibh. Quisque eget ultricies purus. Aliquam convallis ipsum sodales maximus hendrerit. Vestibulum mattis elementum urna. Fusce auctor sit amet lectus et imperdiet. Suspendisse vel convallis mauris. Sed feugiat elit quis odio blandit tincidunt. Aenean tempor orci eget tortor venenatis eleifend. Nunc vulputate eget eros eget tristique.
Para que el efecto estético sea el mejor posible, es importante que el párrafo “envuelva” a la imagen cuando esta se alinea a izquierda o a derecha. Dicho de otro modo: el párrafo tiene que tener una longitud suficiente para que la imagen no quede separada del flujo de texto y aislada de él. No siempre es posible completar esta envoltura, porque a veces el párrafo es muy breve y no hay forma de alargarlo, pero conviene esforzarse para conseguir el mejor ajuste posible. En caso de que el párrafo sea tan breve que es imposible conseguir una buena envoltura (y en tal caso queda mucho espacio en blanco sin cubrir), lo mejor es prescindir de la alineación a izquierda y derecha, y alinear al centro.
Independientemente del tamaño que tengan, nunca se deben alinear dos o más imágenes a izquierda o derecha en el mismo párrafo, ya que ello produce resultados imprevisibles, normalmente feos o poco armoniosos. Si es necesario disponer dos o más imágenes pequeñas en una misma línea, lo que hay que hacer es construir una galería de imágenes con el tamaño adecuado; veremos cómo hacerlo en un próximo artículo de este curso.
En cuanto al centrado de las imágenes, hay también unos cuantos aspectos que deben tenerse en cuenta. A tal efecto, lo mejor es comenzar por una breve demostración de una imagen insertada en cuatro ocasiones consecutivas, con los distintos tamaños que permite WordPress (miniatura, mediano, grande y original):
Tamaño de las imágenes
Los ejemplos que acabamos de incluir demuestran, mejor que cualquier explicación teórica, la importancia de una buena selección del tamaño de la imagen, y de su correcta alineación con respecto a la caja tipográfica. En general, la inserción de imágenes centradas a tamaño pequeño y mediano produce un efecto muy poco elegante, ya que las imágenes quedan muy tristes, muy poco vistosas. Normalmente, el tamaño más aconsejable para una imagen alineada al centro es el grande, pues su efecto estético es mucho mejor. No hay que preocuparse porque la anchura de la imagen grande sobrepase la dimensión de la caja tipográfica; si el tema está bien programado, WordPress ajustará la anchura de la imagen para que no se desborde sobre la barra o barras laterales, y producirá un ajuste óptimo.
Por otro lado, los dos últimos ejemplos demuestran que la inserción de la misma imagen a tamaño grande y a tamaño completo producen exactamente el mismo resultado cuando aquella tiene unas dimensiones superiores a las de la caja tipográfica del tema, que en el caso que nos ocupa es de 660 píxels (recordemos que la fotografía a tamaño completo tiene 1600, por exigencia del tema Education Pro, y la de tamaño grande 1024).
Metadatos de las imágenes
WordPress permite añadir a cada imagen cuatro campos de medatatos diferentes, a saber:
- Título. Es el nombre con el que se identifica la imagen, y debe tener una relación clara con el contenido que esta representa. WordPress utiliza el nombre de la imagen para generar los listados de elementos que forman parte de la biblioteca multimedia; por tanto, es el campo más importante de todos. Un error muy habitual, sobre todo cuando se suben muchas imágenes desde una cámara de fotos, es mantener los nombres originales de los ficheros. Pues bien, nombres como image001.jpg, image002,jpg no significan nada. Cuando se tienen cientos o miles de imágenes, este tipo de nombres solo son fuente de problemas.
- Leyenda. Es un texto que suele utilizarse para mostrar lo que se conoce habitualmente como “pie de foto” (“caption”, en inglés). Permite incluir todo tipo de etiquetas HTML, como negritas, cursivas, enlaces, etc.
- Texto alternativo. Es un texto que permite etiquetar una imagen con información que los buscadores utilizan para conocer el contenido de la imagen. Ese mismo texto es el que se muestra en el navegador cuando la imagen no se puede mostrar por algún motivo (por ejemplo, cuando se ha borrado del servidor). Este metadato corresponde con el atributo “alt” de la etiqueta “img”, en código HTML.
- Descripción. Es un texto que sirve para describir el contenido de la imagen.
Esos metadatos deben cumplimentarse en todas y cada una de las imágenes de nuestro sitio web. Este requisito puede parecer arbitrario y ser considerado como una tarea pesada e inútil, pero ninguna de esas consideraciones resulta acertada. Téngase en cuenta que, a pesar de todos los avances en inteligencia artificial, los buscadores no saben interpretar las imágenes de manera tan precisa y rica como la combinación del ojo y el cerebro de un ser humano; si las imágenes no tienen metadatos, los buscadores tal vez no sepan qué son, ni puedan relacionarlas con el contenido textual. Por otro lado, hay personas con limitaciones visuales, que no ven bien las imágenes o incluso no las ven en absoluto; para estas personas, los metadatos son esenciales, puesto que los sistemas de ayuda visual que utilizan para poder “leer” un sitio web (lectores de pantalla con un motor de síntesis de voz, o líneas Braille) no sirven de nada si el dispositivo no puede extraer información a partir de metadatos.
¿Qué metadatos se deben insertar en cada uno de los cuatro campos que acabamos de mencionar? A este respecto, no hay ninguna recomendación universal. El autor de este artículo, por ejemplo, tiene la costumbre de introducir la misma información en los cuatro campos de metadatos de las imágenes con las que trabaja. Otros autores prefieren que la descripción sea más larga y detallada que los datos introducidos en los demás campos, o deciden prescindir del campo “leyenda”, para evitar que la imagen vaya acompañada de un pie de foto. La verdad es que esta es una decisión muy libre, que depende no tanto de normas o estándares cuanto de los gustos personales, de las circunstancias particulares de publicación de cada imagen, y de los hábitos de uso. Por ejemplo, en la imagen que se incluye a continuación, el campo “leyenda” contiene una información compleja en código HTML, porque nos interesa citar la fuente de la imagen; sin embargo, los demás campos de metadatos solo incluyen el texto, sin enlaces.
Enlaces de las imágenes
WordPress permite añadir enlaces a las imágenes insertadas desde la biblioteca multimedia. A este respecto, existen cuatro posibilidades diferentes:
- Que la imagen esté enlazada al archivo multimedia, es decir, a sí misma (opción por defecto). En este caso, al hacer clic sobre la imagen, esta se abre en su propia página o, como ocurre en este sitio web, en una ventana emergente con un efecto de superposición u overlay.
- Que la imagen esté enlazada a una URL externa. En este caso, al hacer clic sobre la imagen se abrirá la URL que se haya configurado.
- Que la imagen esté enlazada a la página de adjuntos.En este caso, al hacer clic sobre la imagen se abrirá la página de adjunto de WordPress correspondiente a ella.
- Que la imagen no esté enlazada a nada. En este caso, no se puede hacer clic sobre la imagen o, mejor dicho, tal acción no tiene ningún efecto.
En los tres primeros casos, se puede activar la opción de que el enlace se abra en una nueva pestaña o ventana.
A continuación incluimos ejemplos de los cuatro comportamientos que acabamos de describir. En todos ellos, la imagen está alineada con el centro del párrafo:
Las técnicas de inserción que hemos explicado en los párrafos precedentes se detallan también en los siguientes videotutoriales:
Un caso particular: las imágenes que no forman parte de la biblioteca multimedia
WordPress no solo permite insertar imágenes procedentes de su propia biblioteca multimedia, sino también de otras fuentes externas. Para conseguirlo, basta con hacer clic en el botón Añadir objeto del editor, y seleccionar la opción Insertar desde URL. El sistema nos permitirá alinear la imagen, añadirle un enlace, etc. El videotutorial que incluimos a continuación explica perfectamente el procedimiento:
Conviene tener en cuenta que esta técnica no permite seleccionar el tamaño de la imagen, a no ser que se definan clases CSS específicas. Por otro lado, y dado que la imagen insertada no se halla en nuestra selección, WordPress no puede gestionarla mediante la biblioteca multimedia. Dicho de otro modo: aunque es posible insertar en una instalación de WordPress imágenes que NO formen parte de dicha instalación, las posibilidades de uso se reducen bastante en comparación con las existentes cuando las imágenes están gestionadas mediante la biblioteca multimedia.
Alan Castellanos says
Hola, la explicación sobre las diferentes formas en que se puede agregar una imagen esta genial. Quisiera preguntarte como se hace para que una misma imagen, agregada dos paginas distintas, pueda tener leyendas (texto debajo) diferentes, por que si agrego una imagen a un post y les pongo los metadatos, cuando la quiero agregar a otro post, me aparecen los mismos metadatos que habia agregado antes.
Administrador says
Lo que puedes hacer, Alain, es lo siguiente: añadir la imagen del modo habitual y luego editar la leyenda directamente en la entrada, mediante el editor de WordPress en modo HTML. De ese modo, los metadatos del elemento multimedia quedarán editados solo para la entrada en la que hayas insertado la imagen.
Carlos says
Excelente articulo
Vaya la información mas exacta que he conseguido hasta ahora sobre las imágenes en wordpress.
Gracias.