gub.uy ayuda Sitio de apoyo para la comunidad de referentes

Las mejoras en las imágenes se aplicaron en los contenidos, la galería de imágenes, el formato carpeta (ejemplo: listado de noticias), contenedores 3x3 (Hero, listados horizontales y verticales). 

Mejoras

• Las imágenes ya no quedarán recortadas al cargarlas, por lo tanto, no perderán información.
• A partir de la imagen original, gub.uy generará imágenes que se adapten a las dimensiones requeridas por cada contenedor. De esta forma se optimiza el peso de las imágenes cargadas, lo que mejora la velocidad del sitio. 
• Se podrán tratar de forma diferente las imágenes horizontales y las verticales.
• Dependiendo del formato, las imágenes se escalarán al tamaño óptimo. 

Varias de estas mejoras se actualizarán para todos los sitios en el sprint 19, y otras se actualizarán en el sprint 20. Aunque todavía no se visualizarán todas en todos los sitios, se recomienda comenzar a subir las imágenes en las medidas indicadas a continuación.

Recomendaciones para cargar cada tipo de imagen en Drupal

Imagen principal

• Tamaño máximo para cargarla: 2 MB
• Relación de aspecto 3:2
• Ancho mínimo para imágenes horizontales: 945 píxeles.
• Alto mínimo para imágenes verticales: 630 píxeles.

Las imágenes horizontales ocuparán siempre todo el ancho del contenido; las imágenes verticales se centrarán horizontalmente. 

A partir de ahora, las imágenes principales no se estirarán para cubrir todo el ancho, por lo tanto, las imágenes horizontales ya subidas al sitio que no tengan los 945 píxeles requeridos, se mostrarán enteras, centradas y con borde.

Galería de imágenes

Aplican las mismas medidas que para imagen principal.

• Tamaño máximo para cargarla: 2MB
• Relación de aspecto 3:2
• Ancho mínimo para imágenes horizontales: 945 píxeles.
• Alto mínimo para imágenes verticales: 630 píxeles.

Las imágenes que superen el tamaño óptimo en alguna de las dimensiones, serán escaladas y centradas de forma vertical u horizontal, manteniendo las proporciones de la imagen original. A su vez, las imágenes que no lleguen a tamaño óptimo, continuarán mostrándose con márgenes horizontales y verticales.  

Formato carpeta (listados)

• Las imágenes horizontales y verticales se escalarán solas a 700 píxeles de ancho y el alto se calculará de forma automática, manteniendo las proporciones de la imagen original. 
• La imagen se mostrará siempre completa. 
• Relación de aspecto recomendada: 3:2.

Contenedores 3x3

Ancho mínimo para imágenes horizontales: 900 píxeles.
Alto mínimo para imágenes verticales: 600 píxeles.

Contenedor Hero

• Ancho mínimo: 900 píxeles.
• Alto mínimo 600 píxeles.
• Si se elige la opción “Auto” al cargar la imagen, se mostrará siempre completa. 
• En caso de que el tamaño de la grilla sea LG o MD, la imagen deberá cargarse con los siguientes parámetros para que se muestre completa: 
  • Grilla LG: 900 x 649 píxeles.
  • Grilla MD: 1003 x 600 píxeles.

Contenedores Listado Vertical, Listado Horizontal, Listado de Últimas noticias

• Relación de aspecto: 3:2. Si no está en esta relación, no se mostrará completa la imagen.
• Se recomienda utilizar imágenes horizontales y en lo posible 3:2.