Estándares y guías para la digitalización

Guía de estilos

Imágenes

Las imágenes solamente pueden ser usadas cuando hay una necesidad real de los usuarios y no solo por decoración. Esto es porque las imágenes hacen que la carga de la página sea más lenta y, por lo tanto, los usuarios con poca conectividad no podrán tener una buena experiencia.

Imagen principal de páginas

Tamaño del contenedor en plataforma

656 x 370 píxeles

Tamaño mínimo permitido en la carga

656 x 370 píxeles

Peso mínimo: 150 kb

Tamaño máximo permitido en la carga

1400 x 785 píxeles

Peso máximo: 3 mb

Tamaño del contenedor en plataforma

288 x 162 píxeles

(Resolución mínima dispositivo Iphone 5/SE)

Caso de uso en página

Imagen cuadrada

Tamaño del contenedor en plataforma

280 x 280 píxeles

Tamaño mínimo permitido en la carga

280 x 28 píxeles

Peso mínimo: 60 kb

Tamaño máximo permitido en la carga

785 x 785 píxeles

Peso máximo: 3 mb

Tamaño del contenedor en plataforma

350 x 210 píxeles

(Resolución mínima dispositivo Iphone 5/SE)

Imagen interna en cards

Tamaño del contenedor en plataforma

350 x 210 píxeles

Tamaño mínimo permitido en la carga

350 x 210 píxeles

Peso mínimo: 100 kb

Tamaño máximo permitido en la carga

785 x 471 píxeles

Peso máximo: 3 mb

Tamaño del contenedor en plataforma

350 x 210 píxeles

(Resolución mínima dispositivo Iphone 5/SE)

Caso de uso en página

Imagen interna en card alternativo

Tamaño del contenedor en plataforma

232 x 218 píxeles

Tamaño mínimo permitido en la carga

232 x 218 píxeles

Peso mínimo: 60 kb

Tamaño máximo permitido en la carga

857 x 785 píxeles

Peso máximo: 3 mb

Tamaño del contenedor en plataforma

324 x 252 píxeles

(Resolución mínima dispositivo Iphone 5/SE)

Caso de uso en página

Miniaturas de imagen

Versión 1

Versión 2

Tamaño del contenedor en plataforma

100 x 155 píxeles

Tamaño mínimo permitido en la carga

100 x 155 píxeles

Peso mínimo: 60 kb

Tamaño máximo permitido en la carga

303 x 470 píxeles

Peso máximo: 3 mb

Tamaño del contenedor en plataforma

100 x 155 píxeles

(Resolución mínima dispositivo Iphone 5/SE)

Caso de uso en página

Texto alternativo

Para que los lectores de pantalla puedan describir a sus usuarios qué es lo que se muestra en cada imagen, es necesario agregar texto alternativo o "alt text". En caso una imágen no cargue correctamente, este texto alternativo es visible para los usuarios.

Todas las imágenes que no son decorativas deben tener texto alternativo con la siguientes características:

  • Decir la información que la imagen contiene
  • Describe el contenido y la función de la imagen
  • Es específico, significativo y conciso.
  • Usa puntuación normal, incluyendo comas y puntos, para que el texto sea fácil de leer y entender.

Estas características no deben ser incluidas:

  • No debe tener el nombre del fotógrafo o el creador de la imagen
  • No debe empezar el texto con "Imagen de" o "Fotografía de"
  • No debe repetir información de la página.
  • No debe incluir información adición que no se encuentre en la página.

Ejemplo de texto alternativo

<img alt="Niños" src="/images/img_ninos.jpg" />

Algunas imágenes no necesitan descripción.

Utilizar alt="" cuando la imagen:

  • Es decorativa y no incluye contenido importante.
  • Es un ícono con una etiqueta de nombre, ya que se repetiría la información.
  • Está siendo usada en un enlace y no es necesaria para entenderlo.

Para decidir si una imagen debe tener texto alternativo o no, puedes utilizar la herramienta Web Accessibility initiative alt decision tree. Recuerda evitar imágenes que tienen texto, especialmente en formato PNG o JPG, ya que la imagen puede volverse ilegible si el usuario hace zoom en la página. Si la imagen debe contener texto, asegúrate de utilizar SVG para que pueda seguir siendo legible sin importar el zoom. En estos casos, el texto alternativo debe ser igual al que se muestra en la imagen.