trabajando con imagenes en Drupal

En este artículo vamos a repasar buenas prácticas para cargar imágenes en Drupal.

Es muy común que los tipos de contenidos principales tengan un campo para subir una foto y eso hace que nos preguntemos qué formato tiene que tener, qué medidas y qué resolución son las mejores para la carga de una imagen.

Si bien a nivel técnico se pueden cargar imágenes en múltiples formatos y medidas, vamos a mencionar buenas prácticas a tener en cuenta para sistematizar la configuración de las imágenes antes de subirlas al sitio web.

Buenas prácticas a tener en cuenta para la carga de imágenes en Drupal

Proporción de las fotos: En la mayoría de los casos, recomendamos que las imágenes tengan una proporción horizontal (y no vertical). Esto evita que luego el sistema recorte parte de las imágenes o que la página empiece a perder consistencia en cuanto a diseño. Se pueden subir fotos verticales, pero luego hay que buscar recursos para que quede bien o asimilar que los listados, los sliders o cualquier elemento donde haya una imagen después de otra, puede llegar a verse raro si las imágenes tienen distintas proporciones. Hay contenidos específicos como la carga de libros, revistas o publicaciones, donde ahí si, la imagen va a tener naturalmente una proporción vertical. Pero en el resto de los casos, sugerimos que todas las imágenes se carguen con una proporción horizontal y que sea consistente en los distintos tipos de contenido. En casi todos los casos utilizamos en Drupal lo que se llama “estilos de imagen” que lo que hace es forzar una determinada medida (mediante la escala o el recorte) para que luego las fotos aparezcan con el mismo tamaño. Es por eso que para que sea predecible el resultado, es importante mantener siempre una determinada proporción.

Tamaño de las imágenes: Relacionado con lo anterior, el tamaño que vamos a sugerir es que sea lo suficientemente grande para que se vea correctamente en todos los dispositivos (sin llegar a pixelarse) y lo suficientemente pequeña para que la imagen no sea demasiado pesada. Si bien el sistema luego la recorta y la optimiza, las imágenes originales que se van subiendo, van ocupando lugar en el servidor. Si se suben cientos de imágenes entonces esto empieza a ser algo a tener en cuenta para que no falten recursos. Una medida sugerida puede ser de mínimo 1900px de ancho y de máximo 2500px de ancho dependiendo el tipo de contenido que se esté cargando. Igualmente la especificación dependerá de cada sitio y a los clientes les indicamos las medidas exactas en el instructivo al terminar cada proyecto.

El punto a tener en cuenta es que si una foto se carga con una medida de 300px de ancho y luego el sitio la escala a 800px para que encuadre en la grilla, entonces la imagen se va a ver mal.

Formato: Para simplificar lo recomendado es trabajar con JPG para las fotos en general.
Con PNG con transparencia para algunos casos puntuales (logos) y en formato GIF animado en el caso de que haya un banner o algo similar. Igualmente esto también se detalla en el instructivo.

Simplificar: Adicionalmente de la preparación de las imágenes, nuestro enfoque es seguir un espíritu simple desde el comienzo. Dentro de lo posible esto implicará que el sitio mantenga la menor cantidad posible de formatos de imágenes en cuanto a presentación. Es decir si cambian los tamaños, que la proporción sea la misma y que el usuario editor cargue una sola imagen en el nodo que luego se adaptará a los distintos formatos a lo largo del sitio.

Esto le simplificará considerablemente la tarea en el futuro al momento de cargar contenido. Ya que en lugar de pensar en cientos de medidas y tamaños posibles, contará con una o dos opciones como mucho en el instructivo.