Una guía para trabajar con imágenes en ArcGIS StoryMaps

Por Hannah Wilber y Mark Harrower

Agregar imágenes a su historia es fácil y popular. Ya sea una hermosa fotografía para su portada, un mapa estático exportado desde ArcGIS Pro o una serie de gráficos basados ​​en datos, hay muchas formas en que las imágenes pueden mejorar su historia.

Buscando flexibilidad, el constructor ArcGIS StoryMaps admite varios tipos de imágenes populares: GIF, JPEG, PNG y SVG. Cada uno de estos tipos de archivos tiene sus propios puntos fuertes y débiles, por lo que es fundamental saber cómo elegir el más adecuado para sus necesidades. Además de eso, es útil comprender la relación entre la resolución de la imagen, el tamaño de la imagen y el tamaño del archivo; todo esto afectará la nitidez de una imagen y la rapidez con la que se carga para los lectores.

Si se ha estado preguntando cómo obtener imágenes nítidas y claras a lo largo de su historia sin tener que sacrificar tiempos de carga rápidos, siga leyendo. Los consejos y las mejores prácticas que siguen, junto con el apoyo entre bastidores del creador, lo convertirán en un mago que maneja imágenes en poco tiempo.

Buscando flexibilidad, el constructor ArcGIS StoryMaps admite varios tipos de imágenes populares: GIF, JPEG, PNG y SVG.

Lo primero es lo primero: tipos de archivos

Cuando se trata de elegir un tipo de archivo para sus imágenes, tiene opciones. (Seleccionar el tipo de archivo de una imagen se realiza fácilmente en la mayoría de los softwares de manejo de imágenes a través de las herramientas Guardar como o Exportar). Pero cada tipo tiene su propio conjunto de ventajas y desventajas; querrá elegir el que mejor se alinee con lo que necesita que haga su imagen. A continuación, se muestra un desglose rápido de los tipos de archivos admitidos en el generador de historias:

Los archivos JPG (o JPEG) son quizás el tipo más común que existe; la extensión del archivo significa Joint Photographic Experts Group, si tiene curiosidad. Lo que hace que los JPG sean tan geniales es la cantidad de detalles que pueden conservar en un archivo de tamaño relativamente pequeño. Sin embargo, los archivos JPG pueden experimentar una compresión con "pérdida" cuando se exportan repetidamente, lo que significa que gradualmente se verán cada vez menos nítidos cuantas más veces edite y luego vuelva a guardar el archivo o lo cambie de tamaño.

Los archivos GIF (abreviatura de Graphic Interchange Format) están ganando popularidad en estos días, en gran parte por su capacidad para mostrar animación o movimiento. Los GIF pueden estar compuestos por una serie de fotogramas, que es como consiguen este efecto. También admiten fondos transparentes, por lo que no tendrá que modificar el archivo solo porque decida cambiar el color de fondo de su historia. Pero mientras gana animación y transparencia con GIF, pierde flexibilidad de color. Los GIF solo contienen 256 colores, lo que los hace menos que ideales para imágenes complejas o muy detalladas con paletas de colores ricos o degradados. Además, cuantos más colores tenga un GIF y más cambien esos colores, mayor será el tamaño del archivo de esa imagen.

Los archivos PNG (Portable Network Graphics) no son tan conocidos, pero son increíblemente útiles para publicar contenido en la Web. Al igual que los GIF, los PNG admiten fondos transparentes, pero a diferencia de los GIF, no están limitados en la cantidad de colores que pueden contener: un degradado que parece grueso en un GIF se verá suave como la seda en un PNG. Y, a diferencia de los JPG, los PNG son inherentemente sin pérdidas; nunca se degradarán en calidad, no importa cuántas veces se modifiquen. Sin embargo, la compensación aquí es el tamaño del archivo. Si guarda la misma imagen como JPG y PNG, el PNG siempre será un archivo más grande.

Los archivos SVG (Scalable Vector Graphics) son sin duda el formato más especializado en esta lista; necesitará un software de diseño más sofisticado (como Adobe Illustrator o Sketch) para exportar a este tipo de archivo. O puede encontrarlos en muchas de las bibliotecas de iconos disponibles en la web. Como su nombre lo indica, estos archivos se basan en vectores, por lo que, a diferencia de los tipos de archivo anteriores, se pueden escalar más allá de su tamaño original sin experimentar ninguna pérdida en la calidad de la imagen o aumentar el tamaño del archivo. También son otro tipo de archivo que admite transparencia. Pero los SVG no están diseñados para manejar el nivel de detalle que ves en fotografías, capas de sombreado o ilustraciones complejas.

Deberá elegir el tipo de archivo que mejor se adapte a lo que necesita que haga su imagen.

De acuerdo, eso es lo que es cada tipo de archivo, pero ¿cuándo los usa? Nuevamente, depende de tu objetivo para esa imagen. Probablemente sea más útil desglosar esto por casos de uso comunes:

Quieres lucir una fotografía impresionante o una obra de arte asombrosa. Estos tendrán muchos colores y detalles finos, ¡y no querrás restar importancia a ese gran trabajo! Un JPG le dará la imagen más nítida para el tamaño de archivo más pequeño — más sobre esto en un momento — así que ese debería ser su tipo de imagen de referencia. ¿Ves lo bien que muestran las imágenes del paisaje y la vida silvestre en esta historia?

Tiene un mapa estático con etiquetas o anotaciones que contienen información clave. Ahora estamos entrando en territorio de PNG. ¿Por qué? Porque no tienen pérdidas. El creador de historias trabaja arduamente para garantizar que los lectores no tengan que esperar mucho para que se cargue una imagen, por lo que hace algo de magia entre bastidores para optimizar la entrega de imágenes, lo que generalmente implica un poco de compresión de imagen. Dado que los archivos PNG no tienen pérdidas, esta compresión no afectará negativamente a elementos extremadamente finos como texto, líneas o flechas; esos podrían empezar a volverse un poco borrosos si la imagen fuera un JPG. Para esta historia, los mapas anotados se exportaron como PNG por esa misma razón.

Tiene una infografía o cuadro que agrega profundidad a su narrativa. Dependiendo de la complejidad del gráfico, tiene opciones aquí. Los PNG le servirán bien para las cualidades sin pérdidas descritas anteriormente, y su compatibilidad con fondos transparentes hará que sea más fácil integrarlos sin problemas en el lenguaje visual de una historia. Los SVG harán lo mismo, pero con un tamaño de archivo aún más pequeño. Si el gráfico solo contiene un puñado de colores, un GIF también podría ser suficiente. Los gráficos de esta historia son todos PNG, al igual que las leyendas de los mapas.

Tiene una serie de mapas o gráficos estáticos que, cuando se animan secuencialmente, muestran tendencias o cambios importantes a lo largo del tiempo. Como probablemente adivinó por la palabra clave "animado", los GIF son el camino a seguir en este caso. Necesitará un software que pueda ayudarlo a convertir las imágenes estáticas en marcos de un GIF (Adobe Photoshop puede hacer esto, pero existen innumerables herramientas en línea gratuitas que puede probar). Esta técnica de mapa animado se utiliza con gran efecto en la visualización de la densidad del ganado que se muestra aquí.

Tiene pequeños íconos u otros adornos visuales que le darán a su historia ese nivel extra de pulido. Ya sea un logotipo, un separador personalizado, un marcador de imagen en un mapa rápido u otros elementos únicos para resaltar cada sección de su historia, estos adornos gráficos son candidatos ideales para SVG. Por lo general, son simples y no merecen un tiempo de carga lento, por lo que cuanto más pequeño sea el tamaño del archivo, mejor. Por supuesto, un PNG será un buen sustituto, ya que también admite la transparencia. Las huellas de patas que rematan esta historia son un ejemplo de esta técnica.

Tamaño de archivo, resolución y tiempos de carga

Saber qué tipo de archivo usar para sus imágenes será de gran ayuda para garantizar que sus historias se vean mejor, pero el tipo de archivo no lo es todo. Como probablemente haya deducido de la discusión anterior, el tamaño del archivo (medido en kilobytes, megabytes, etc.) juega un papel importante, ya que los archivos más grandes tardan más en cargarse.

Cuantos más píxeles tiene una imagen, más detalles contiene y mayor es su resolución.

Tenga en cuenta que el tamaño del archivo no es el mismo que el tamaño de la imagen (que se refiere a qué tan ancha y alta es una imagen), pero los dos están vinculados por la resolución de la imagen. Antes de profundizar en esto, definamos algunos términos clave para asegurarnos de que estamos en la misma página.

PPI significa píxeles por pulgada. A veces se usa indistintamente con DPI (puntos por pulgada), pero en realidad son términos diferentes. Los puntos son redondos y son muy importantes en los medios impresos. Los píxeles, sin embargo, son cuadrados; estas son las unidades que importan para los medios digitales y las pantallas. Esto se debe a que los píxeles se correlacionan directamente con la resolución o la cantidad de información contenida en una imagen o pantalla. Cuantos más píxeles tiene una imagen, más detalles contiene y mayor es su resolución. Una imagen de 1920 x 1080 (1920 píxeles de ancho, 1080 píxeles de alto) tiene la mitad de resolución que una imagen de 3840 x 2160. Si ambas imágenes fueran escaladas para tener 2000 píxeles de ancho, la segunda imagen sería mucho más clara que la primera, porque tiene un ppi más alto.

Entonces, cuanto mayor sea la resolución, mejor será la imagen, ¿verdad? ¡No necesariamente! Todos esos detalles de resolución también afectan el tamaño del archivo; más detalles significan más bytes de almacenamiento, por lo que las imágenes de mayor resolución significarán archivos más grandes y tiempos de carga más lentos.

Si bien los medios de impresión requieren una inmensa densidad de puntos, el contenido digital es más tolerante. Los gráficos web se verán nítidos en la mayoría de los dispositivos con solo 72ppi; cualquier cosa por encima de eso, y obtendrá una mejora mínima en la claridad de la imagen mientras corre el riesgo de un aumento significativo en el tiempo que tarda en cargarse esa imagen.

Por lo tanto, si ha diseñado un mapa o gráfico para imprimir y luego desea reutilizarlo en una historia, sería prudente reducir su resolución antes de cargarlo en el creador. Lo mismo ocurre con las fotografías capturadas con cámaras de alta gama: su historia simplemente no necesita todos los píxeles atascados en la imagen original.

Los gráficos web se verán nítidos en la mayoría de los dispositivos con solo 72ppi.

El tamaño de imagen correcto para el bloque elegido

Si ha utilizado mucho el generador de historias, sabrá que hay muchos bloques de contenido que pueden incorporar imágenes, pero los tamaños de estos pueden diferir sustancialmente de un bloque a otro, de un diseño a otro e incluso de un dispositivo a otro. Entonces, si eres un verdadero riguroso con los tiempos de carga y quieres usar solo una imagen tan grande como sea absolutamente necesaria para ese bloque, ¿cómo puedes resolver todo eso?

Para empezar, recuerde que el constructor de historias está de su lado. Va a hacer esa magia detrás de escena mencionada anteriormente para optimizar todo lo que subas para la entrega más rápida posible. Si subes una imagen de 3000 píxeles de ancho y luego la configuras para que flote en tu narrativa, el constructor creará una nueva versión de esa imagen que es tan ancha como sea necesario para el tamaño flotante (510 píxeles). Si luego lo configura en el tamaño mediano, ofrecerá una versión de nuevo tamaño (1200 píxeles de ancho) para adaptarse a la configuración más grande. El constructor también crea tamaños más pequeños que se sirven a lectores móviles que tienen pantallas más pequeñas y posiblemente velocidades de descarga más lentas.

Entonces, donde debe enfocar sus esfuerzos, es asegurarse de que la imagen no sea demasiado pequeña o de resolución demasiado baja para el lugar donde desea utilizarla. Reducir la escala de una imagen es fácil, hay muchos píxeles adicionales con los que trabajar. Pero la ampliación es una historia diferente (los SVG son la excepción) porque los píxeles originales no proporcionan suficiente detalle para el nuevo tamaño más grande. Aquí es cuando su imagen se volverá borrosa o pixelada.

El constructor de historias intenta nuevamente ayudarlo en estas situaciones. Al usar el bloque de imagen, por ejemplo, puede notar que ciertos tamaños se desactivarán si tiene una imagen de baja resolución. El tamaño mediano requiere imágenes que tengan al menos 1200 píxeles de ancho, y la opción grande requiere un ancho mínimo de 1920 píxeles.

En términos generales, entonces, querrá una imagen que tenga una resolución de 1920px para imágenes grandes, o para llenar los grandes paneles multimedia de sidecar, presentación de diapositivas, deslizamiento y recorrido por el mapa (si está utilizando el diseño centrado en los medios). Para opciones más pequeñas, puede escalar cómodamente hasta 1200 px sin preocuparse, o incluso más pequeño para esos iconos embellecedores mencionados anteriormente.

Armado con toda esta información específica de imágenes, ahora debería sentirse bastante seguro de su capacidad para crear una historia que se vea nítida y se cargue rápido. Pero si aún tiene preguntas, envíenos una nota sobre la comunidad de Esri; ¡Siempre estaremos encantados de ayudar!

Hannah Wilber

Trasplante en el norte del estado de Nueva York. Creador de contenido para el equipo de StoryMaps de Esri. Fascinado por cómo la narración afecta al cerebro humano. Amante de la conservación. Mamá demasiado orgullosa de un perro.

Mark Harrower

Nerd del mapa. Apasionado por el gran diseño, la enseñanza y hacer cosas interesantes con datos.