Guía de estilos
Imágenes
Las imágenes solo pueden ser usadas cuando hay una necesidad real de los usuarios; no son para decoración. La razón de 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 kbTamañ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 kbTamañ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 kbTamañ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 kbTamañ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 kbTamañ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 imagen no cargue correctamente, este texto alternativo es visible para los usuarios.
Todas las imágenes que no son decorativas deben tener un texto alternativo con la siguientes características:
- Decir la información que la imagen contiene.
- Describir el contenido y la función de la imagen.
- Ser específico, significativo y conciso.
- Usar 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 adicional que no se encuentre en la página.
Otras recomendaciones:
- Evita imágenes con texto, especialmente en formato PNG o JPG, ya que pueden volverse ilegibles si el usuario hace zoom en la página.
- Si la imagen debe contener texto, asegúrate de utilizar SVG para que siga siendo legible sin importar el zoom. En estos casos, el texto alternativo debe ser igual al que se muestra en la imagen.
Ejemplo de texto alternativo

<img alt="Niños" src="/images/img_ninos.jpg" />
Existen algunas excepciones para que las imágenes no lleven descripción. Esto se da cuando:
- 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.
Si estás indeciso sobre si una imagen debe tener texto alternativo o no, puedes utilizar la herramienta Web Accessibility initiative alt decision tree.