Imágenes de los artículos en la web

Las imágenes son actualmente, para mí, uno de los mayores problemas del blogging y de la web en general. Durante mucho tiempo nos acostumbramos a tomar imágenes de cualquier sitio sin dar créditos, pero cada vez esto se va convirtiendo en necesario y en definitiva es lo que corresponde. También es posible que se deba pagar por esos derechos. La otra opción es tomar imágenes libres y gratuitas, pero que también habría que dar los créditos. Los buenos bancos de imágenes libres requieren un pago mensual para poder utilizarlos. Todo esto hace que sea extremadamente difícil obtener buenas imágenes para nuestros artículos.

Pero por supuesto todos estos puntos no son tenidos demasiado en cuenta y seguimos utilizando imágenes que encontramos en internet a diestra y siniestra. La mejor alternativa es siempre citar la fuente de la imagen, pero puede suceder que no estemos citando al autor original o que no tengamos los permisos. En el mejor de los casos podemos recurrir a Flickr —u otros servicios similares— y buscar imágenes bajo licencias Creative Commons que nos permitirán tomarlas y publicarlas, siempre respetando los créditos, citando y enlazando al autor original. Aún así, a muchos debemos pedirle permiso y explicarle para qué vamos a utilizarla. Convirtiéndose en un procedimiento muy engorroso.
Otra opción es buscar imágenes de dominio público, un buen lugar para ello es la librería del congreso de Estados Unidos.

Por estas razones desde hace un tiempo acostumbro a hacer yo mismo las imágenes. La mayoría de dudosa calidad, pero prefiero eso a tener que recorrer toda internet en busca de una sencilla fotografía. Además de que a menudo me parece excesivo eso de andar pidiendo crédito por todo, mucho más si se reclama un beneficio económico. Se entiende para fotografías o dibujos que llevan tiempo y conocimientos, pero cuando se trata de algo sencillo, vamos. Pero esta es sólo mi opinión y no tienen por qué estar de acuerdo conmigo. De hecho muchos han tomado imágenes de este blog sin citarlo —incluso un periódico online importante de mi país—, y no reclamé nada. En parte porque yo al principio hice lo mismo y en parte porque no lo considero grave. Aunque sí estoy en contra de llevarse el crédito como propio, pero ese sería otro tema.

Formatos, dimensiones y calidad de las imágenes

Las dimensiones siempre variarán según el tipo de sitio en el que se inserten. La calidad generalmente viene acompañada de su peso, por tanto se buscará un equilibrio entre calidad de imagen, tamaño y peso.
¿Por qué es esto importante? Todos quisiéramos nuestras imágenes en la mejor calidad posible, pero al hacer esto, también correríamos el riesgo de ralentizar la carga de la página. Por tanto es importante seleccionar con conciencia, midiendo todos los factores.

Los formatos de los archivos pueden ser .jpg o .png. El primero comprime la información de la imagen de tal forma que permite presentar una calidad aceptable con el menor peso posible. Por eso es el formato preferido de la web en general. Sin embargo, para algunos casos puede perderse mucha calidad —sobre todo con colores «vivos y fuertes»— además de que Blogger tiende a comprimir aún más las imágenes .jpg dando como resultado final algo bastante pobre.

El formato .png conserva mucho la calidad pero sacrificando el peso de la misma. Como dije, a mayor peso, mayor demora en mostrar las imágenes. Por su parte, Blogger no «maltrata» a este formato, conservando su calidad original.
De todas formas tanto uno como otro formato pueden comprimirse al crear los archivos hasta un nivel que consideremos adecuado dependiendo de los factores citados. O también podemos utilizar programas o herramientas online para comprimir mejor los archivos jpg. El mejor que conozco en este sentido es: JPGMini. Según mi opinión es la mejor alternativa para reducir el peso de los archivos conservando «casi intacta» su calidad. Aunque también es cierto que debido a este proceso —y dependiendo mucho de sus colores— puede llegar a empobrecer mucho la calidad de la imagen.

Existen otros tantos de formatos de archivos como .gif o .bmp. Los gifs animados fueron un furor en los comienzos de la web y también era un formato muy utilizado para las imágenes estáticas. Actualmente se encuentra en práctico desuso por su ineficacia, pésima calidad de imagen y mucho peso. Sería un error utilizarlo. Aunque los gifs animados siguen teniendo su atractivo y se utiliza mucho en algunas redes sociales.
El .bmp se hizo popular por pertenecer a Microsoft, tiene buena calidad pero el peso de las imágenes es desorbitante. También sería un error utilizarlo.

En cuanto a sus dimensiones, dije que variará según el sitio, principalmente por el diseño del mismo. El ancho del cuerpo del post en la plantilla influirá en este aspecto. Si son imagenes centradas, por lo general de 450 a 600 pixeles de ancho estarán bien.
Si se ubicarán a la izquierda o derecha de 250 a 350 pixeles —máximo— de ancho estará bien. Esto es un detalle estético que deberá considerarse para cada caso en particular.

Desde ya, aconsejo al menos una imagen. Vivimos en un mundo visual y si no le damos soporte visual al usuario se verá desorientado. En lo posible de contacto inmediato, es decir, sin que se deba hacer scroll para ubicarla. Es un punto de apoyo visual, llamativo, complementario al texto, para que el lector no se sienta abrumado. Algo dinámico para que recuerde qué está leyendo y a diferencia de muchos sí aconsejo colocar una imagen meramente decorativa si no se cuenta con otra opción. No es necesario que exclusivamente refleje a la perfección el texto escrito. En este punto la imaginación y el ingenio del redactor serán siempre bien vistos.

La importancia de ALT y title

Al incluir imágenes en un artículo, desde el código HTML podemos ver distintos datos que variarán según se trate de Blogger o Wordpress, cada uno inserta su propio código. Uno guarda los archivos en los servidores de Google, el otro en nuestro propio servidor.
Más allá de ese código —que más adelante analizaré— hay dos atributos muy útiles que deberemos incluir. Y creanme, son muy útiles.

Alt o Texto alternativo de la imagen

Significa Texto Alternativo. Es el texto que se mostrará cuando la página esté cargando en el lugar reservado a la imagen en cuestión. Debe ser una descripción de la imagen para que en caso de no poder cargarse por distintos problemas —o el visitante tenga de alguna manera deshabilitado poder ver imágenes— se pueda aún saber de qué trata esa imagen que no se muestra. Hace tiempo, con conexiones muy lentas de internet esto era de mucha ayuda. Ahora conserva poco sentido. Aunque los buscadores lo siguen teniendo mucho en cuenta.

Aún sabiendo lo que debe hacerse con este atributo no lo recomiendo para nada. En su lugar aconsejo utilizar palabras claves de nuestro artículo. Por ejemplo, si tomo una captura de pantalla de lo que ahora estoy escribiendo el «Alt correcto» sería alt=”captura de pantalla”. Pero en su lugar utilizaría alt=”imagenes redaccion web”.
Es decir, camuflando un poco mi palabra clave al incluir la palabra imágenes que es la protagonista de este post. Esto ayudará a posicionar no sólo la imagen en el buscador, sino además al artículo mismo.

Pero no solo eso, la principal razón es para evitar que lleguen personas desde el buscador de imágenes tan sólo para descargarla e irse, sin interés en nuestro sitio. Esto sólo aumenta el porcentaje de rebote —personas que sólo se quedan unos pocos segundos en nuestro sitio. Además podríamos evitar un poco el «hotlinking» —usuarios que utilizan nuestros servidores para mostrar las imágenes en foros y demás. Si no describimos exactamente la imagen, es probable que no la encuentren para esos propósitos, pero sí cuando busquen lo que nosotros queremos que encuentren. Para no levantar «sospechas» a Google es preferible que sea corto —de 2 a 5 palabras— y que guarde una mínima relación con el texto.

Title de la imagen

Significa, desde luego, título. El uso que aconsejo es muy similar a alt. Aunque con alguna modificación, ya que éste será el que aparezca al apoyar el puntero del mouse sobre la imagen. Yo utilizo generalmente el título del artículo, que salvo excepciones, incluye alguna buena palabra clave. En este caso: title=”Imágenes de los artículos en la web”.

Nombre del archivo de la imagen

Tan importante como los anteriores el nombre del archivo en sí. En este caso deberemos procurar no dejar espacios. Para conseguirlo no escribiremos «todojunto» sino separar las palabras con guiones medios o bajos. Además de obviar los artículos y conectores. Recomiendo los guiones medios ( - ): imagenes-articulos-web.jpg

La diferencia es que los guiones bajos ( _ ) suelen utilizarse para las fechas, ya que en los nombres de archivos no se admiten las barras. Por ejemplo una fecha así 01/01/13 la escribiríamos así 01_01_13
Al no dejar espacios nos aseguramos que «nada raro» suceda en el camino y que los buscadores puedan indexarla correctamente, bajo el nombre que le hayamos dado.

Seguramente dejé muchos temas afuera, pero probablemente vuelva a tocar el tema de las imágenes en futuros artículos —en todo caso están los comentarios para hacer sugerencias. Uno de los puntos importantes es cuando se trabajan blogs de sólo imágenes, caricaturas, memes, etc. Por ahora recomiendo siempre escribir al menos un párrafo de 100 palabras. Que cada entrada tenga una breve descripción de la imagen o algo relacionado a ella. Esto con el fin de que los buscadores no la pasen desapercibida.