Para qué usamos las imágenes en el portal

Las imágenes nos van a permitir:

• Apoyar la información de nuestros textos.

• Mejorar la experiencia de los usuarios.

• Mejorar la accesibilidad y el posicionamiento web, siempre y cuando apliquemos las recomendaciones especificadas.

Características deseables de nuestras imágenes (*)

• Usar imágenes relevantes para el contexto:

  • Evitar imágenes puramente decorativas. No dan buena experiencia de usuario.

  • Mostrar un mensaje claro a los usuarios con la fotografía o imagen que hayamos elegido.

  • Impactar emocionalmente sobre los usuarios y reforzar sentimientos que estés intentado crear al incluir esa imagen.

• Tener cuidado con las imágenes de stock. Evitar efecto “producto falso”.

• Evitar distorsiones, fotografías pixeladas o borrosas.

(*) Adaptación del artículo: “Pautas para usar imágenes de forma efectiva”. En Blog Torres Burriel Estudio. Disponible en: http://www.torresburriel.com/weblog/2019/03/20/pautas-para-usar-imagenes-de-forma-efectiva/ . Fecha de consulta: 27 de marzo de 2023.

Resolución, tamaño y nombre del archivo

Recomendamos que la imagen tenga:

• una resolución mínima de 72 píxeles por pulgada (nuestra plataforma del portal recomienda menores de 100 píxeles por pulgada), y

• un tamaño de 660 x 440 píxeles. No es necesario subir diferentes tamaños de nuestra imagen, ya que la plataforma adaptará y redimensionará la imagen al dispositivo (móvil, ordenador portátil o sobremesa) en el que se esté consultando la información.

• un nombre del archivo normalizado: para una mejor gestión, recuperación de las imágenes y optimización del espacio en el portal, si usas las imágenes que están dentro de Documentos y multimedia > Banco de imágenes enlázalas en las páginas que necesites, pero:

  • no cambies el nombre de la fotografía,

  • ni la muevas de sus carpetas

Ejemplo incorrecto

Nombre significativo del archivo fotográfico

Si vas a subir al portal imágenes de tu servicio o departamento que os hayan entregado profesionales fotógrafos o diseñadores gráficos, os solicitamos que las nombréis usando conceptos clave para favorecer el posicionamiento y la accesibilidad.

Ejemplos

depuradora_zaragoza.jpg

aljaferia_cortes_de_aragon.jpg

Selección de imágenes

¿Qué imagen selecciono para mis contenidos?

Debemos ser conscientes del uso que le damos a las imágenes que ilustran un contenido de texto. para ello deberíamos tener en cuenta los siguientes aspectos:

La relación de la imagen con el texto debe ser de anclaje. Las imágenes deben ser congruentes y referenciales con el contenido textual, sin margen a la ambigüedad. Debe resultar a lo sumo, complementario e ilustrativo.

Evitar el uso de imágenes tipo “cliparts” (imágenes prediseñadas) salvo que formen parte de una imagen diseñada de propio para el Gobierno de Aragón.

De existir un proyecto gráfico relacionado con el contenido, se debería priorizar el uso de dichas imágenes o partes de dicho material gráfico. Permitiría proyectar coherencia visual al contenido.

Además debemos tener en cuenta que estos proyectos gráficos tienen que estar aprobados por la Comisión de Comunicación Institucional.

Debemos tener cuidado con el permiso de las imágenes que publiquemos. Deben ser propias (la opción ideal), libres de derechos o que tengamos permiso/ licencia de uso o derechos de reproducción sobre ellas.

Subir imágenes al portal

Paso 1. Pincha en el apartado “Documentos y multimedia” del menú “Contenido”.

Paso 2. A continuación, pincha en la carpeta de “Imágenes - DPTOS” y luego en la carpeta que sea de tu departamento. Dentro de tu departamento o instituto puedes crear nuevas subcarpetas para organizar tus imágenes.

Paso 3. Elegida ya la carpeta en la que quieres subir las imágenes, pulsa el botón “+” para ver las opciones como se indica en la imagen: 

Se desplegará el menú con las siguientes opciones:

• Subir archivo: opción para subir solo UNA imagen.

• Carga múltiple de archivos: opción para subir más de UNA imagen a la vez.

• Carpeta: para crear una subcarpeta.

• Acceso directo: crear un acceso directo a cualquier imagen al que tengas acceso de lectura. Esto permitirá a los usuarios con acceso a ambos, el acceso directo y el documento original.

Seguimos con el proceso como si fuéramos a subir solo una imagen.

Paso 4. Seleccionar en el menú “Subir archivo” y a continuación, aparece una ventana en la que tienes que pinchar en el botón “Seleccionar archivo”.

Paso 5. Elije la imagen que quieras subir desde tu ordenador y pulsa el botón “Publicar”.

Campos de imagen principal y su descripción de imagen

Para conocer cuáles son los campos para insertar la imagen principal consulta Generar nuevo contenido > Imagen principal.

Recomendaciones de accesibilidad

Descripción (de la imagen)

♿ Todas las imágenes incluidas en las páginas, salvo que sean decorativas, deben tener una descripción que transmita la misma información que la imagen. El lector de pantalla leerá la descripción de la imagen a los usuarios.

♿ La descripción debe tener menos de 150 caracteres.

Descripción extensa

♿ Si la imagen es compleja (una gráfica, un mapa, un calendario, una infografía) no podrá describirse solo en 150 caracteres y necesitará una descripción extensa.

Texto de pie de imagen (pie de foto)

♿ La función de la descripción de la imagen es transmitir la misma información que la imagen a los usuarios que no pueden verla, mientras que la función del pie es identificar la imagen para todos los usuarios.

♿ El pie de foto no es obligatorio, ni necesario en muchos casos, pero si se incluye, su texto debe ser complementario al texto de la descripción de la imagen. En ningún caso la descripción y el pie de foto deben tener el mismo texto.

Recomendaciones de posicionamiento

🔍 También es aconsejable para mejorar el posicionamiento de nuestros contenidos rellenar la descripción de la imagen (también llamado atributo ALT) y así poder posicionar por Google Imágenes.

Insertar imagen en el cuerpo principal (con el editor)

Las imágenes se incluyen dentro del contenido en el campo “Cuerpo” y con la herramienta del Editor > Imagen.

Casos en los que puede ser necesario incluir una imagen en el cuerpo principal.

• Un organigrama

• Una infografía

• Un cartel

• Una fotografía

• Consulta Añadir imagen en el cuerpo de contenido para saber como incluir imágenes en el cuerpo principal.

Si finalmente la imagen es necesario incluirla tienes que tener muy presentes estas recomendaciones de accesibilidad.

Recomendaciones de accesibilidad

♿ Una vez insertada la imagen, hay que añadir su descripción en: menú contextual al pulsar el botón derecho sobre la imagen > Propiedades > campo “Texto alternativo”.

♿ Si la imagen necesita una descripción mayor de 150 caracteres, en el campo “Texto alternativo” solo identificas la imagen y dónde está la descripción extensa. La descripción extensa debe incluirse manualmente en la página, por ejemplo, debajo de la misma:

Imágenes de texto (carteles, campañas)

Hay ocasiones en las que nos han diseñado algún cartel o folleto para difundir información, evento, campaña, etc. Estas acciones de comunicación tienen que estar aprobadas por la Comisión de Comunicación Institucional.

En el caso de estar aprobadas por esta Comisión, se pueden recortar y adaptar al tamaño de 660 x 440 y utilizar como Imagen principal, por ejemplo.

Suelen ser estos casos cuando nos encontramos con imágenes que emplean el texto para difundir información. Veamos que implicaciones tienen de accesibilidad.

Recomendaciones de accesibilidad

♿ Las imágenes del cartel de un evento, como tiene un diseño y una presentación que debe mantenerse, pueden incluirse teniendo en cuenta que la información que contiene la imagen ya está incluida en el texto de la página.

♿ De no ser así tendría que incluirse esa información en la Descripción o Descripción extensa de la imagen. Los usuarios que no pueden ver las imágenes dependen de su descripción para no perderse la información que transmiten.

♿ Las imágenes de texto es mejor evitarlas porque suelen necesitar descripciones extensas y suelen verse borrosas cuando el usuario necesita acceder con zoom.

Ejemplos incorrectos

Es incorrecto incluir una imagen con texto si ese texto podría incluirse a través del editor del gestor de contenido:

Ejemplos de descripciones incorrectas / correctas de imágenes

Ejemplos de descripciones incorrectas y cuál sería su redacción correcta:

Imagen	Descripción incorrecta	Descripción correcta
	Logo del departamento.  Nota: este texto es demasiado genérico, no transmite la misma información que el logotipo	Logotipo del Departamento de Economía, Industria y Empleo del Gobierno de Aragón.
	Divulgación y asistencia: “Campaña de invierno” Delegación Local (Casa de la Comunidad). Teruel. Fuente: AHTP Nota: este texto sería el apropiado para el pie de foto	Fotografía de los años 40 o 50, en blanco y negro. Siete mujeres y un hombre recogen paquetes en una habitación.   Nota: el lector de pantalla ya anuncia que es una imagen, solo es necesario comenzar con palabras genéricas (“imagen”, “icono”, “fotografía”) si es importante indicar el tipo de imagen.
	Cartel amarillo, con varios coches de colores y un semáforo, de las terceras jornadas de seguridad vial. Nota: la descripción no incluye todo el texto del cartel y se explican aspectos gráficos irrelevantes.	Cartel de la tercera jornada de seguridad vial laboral que se celebrará en Zaragoza el 14 de febrero de 2019. Nota: la descripción incluye todo el texto del cartel y no se explican aspectos gráficos irrelevantes.
	Gráfica de la superficie destinada a producción de semilla certificada en España por comunidades autónomas. Andalucía más de 40.000 hectáreas; Aragón más de 30.000 hectáreas; Castilla La Mancha más de 10.000 hectáreas… Nota: la descripción no puede tener más de 150 caracteres.	Gráfica de la superficie destinada a semilla certificada en España. Los datos se incluyen en formato tabla tras la imagen. Nota: después de la imagen se incluirían los datos en formato tabla, como se indica en la descripción.
	Retrato de una mujer con una sonrisa enigmática con un paisaje al fondo.	Cuadro “La Gioconda” de Leonardo da Vinci. Nota: la descripción adecuada de las obras de arte es simplemente identificar la obra.
	Logotipo de accesibilidad	Icono que representa a una persona en silla de ruedas en movimiento. Los brazos de la persona están impulsando la silla y tiene el cuerpo inclinado hacia delante. Nota: hay que describir el icono para que transmita la misma información que se quiere comunicar al incluirlo en esta noticia en particular.
Estaciones de metro: Gran Vía	Icono de un hombre sentado en una silla de ruedas.	Estación accesible Nota: en este contexto no hay que describir el icono, solo la información que transmite, es decir, que la estación es accesible.

Carpetas para guardar las imágenes

• Consulta el apartado de Documentos y multimedia > Carpetas para conocer las carpetas creadas para almacenar imágenes.

Banco de imágenes

El Gobierno de Aragón tiene una cuenta en https://www.shutterstock.com/es/ que permite descargarse imágenes libres de derechos para uso interno del Portal.

Primero hay que entrar en la página de Shutterstock, buscar una imagen y por último copiar la url de la imagen y enviársela por correo a portalpublico@aragon.es

Desde Portal público, se descargará la imagen con las medidas de calidad óptimas para colocarla en el apartado de imagen principal de la plantilla (660x440) y se guardará en la carpeta creada en Documentos y multimedia>Imágenes.