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 (para determinadas campañas de concienciación).

• 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

Open

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 de nuestros contenidos.

Ejemplos

depuradora-zaragoza.jpg

aljaferia-cortes-de-aragon.jpg

parque-nacional-de-ordesa.jpg

vacunacion-gripe-covid-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.

Open

Noticia acompañada de una imagen que apoya el texto

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

1. 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 de descripciones incorrectas / correctas de imágenes

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

Carpetas para guardar las imágenes

1. 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.