Al momento de compartir imágenes en la web, redes sociales o simplemente enviarlas por correo-e, debes tener en cuenta diversos factores para su correcta optimización. Utiliza esta breve guía para ayudarte a generar gráficos que descargan al instante.
Es cotidiano encontrarse en una situación de espera al momento de cargar un artículo o sitio web, en el que todo parece detenerse o no funcionar correctamente. Esta situación puede llevarnos a creer que hemos perdido señal, que estamos sin conexión, a abandonar la navegación, a perder la paciencia, desenfocarnos de nuestra tarea, etc. Sabemos el rol clave que tienen las imágenes en la comunicación, pero si estas no están optimizadas para su carga y visualización, nos pueden jugar en contra y hasta hacernos perder gran cantidad de visitantes, posibles clientes, posición en los buscadores, etc.
Cada byte de información de más se traduce en un mayor tiempo de carga, aún en este tiempo de tantos avances en tecnología de redes y velocidades de conexión. Tengamos en cuenta que aún muchos usuarios de móviles utilizan velocidades inferiores a 4G, redes públicas compartidas o se conectan desde zonas remotas con baja señal.
Publicar una imagen sin prestar atención a su formato de archivo, sus dimensiones en pixeles, tamaño en KB y tiempo de carga, conlleva un riesgo en varios aspectos. Cuanto más bytes tengan las imágenes en un servidor, se traduce en un elevado tiempo de espera, en redes saturadas de información, más recursos involucrados por parte del servidor, cantidad de energía perdida, etc. En un artículo, libro electrónico o página web, el tipo de medio que más bytes conlleva, son los gráficos y fotografías.
¿Por qué optimizarlas?
Optimizar imágenes puede generar algunos ahorros de tráfico de información y mejoras en el rendimiento de tu sitio o publicación web. Cuanto menos bytes tenga que descargar el navegador, más disponibilidad de ancho de banda existirá para quienes la comparten y menos competencia por los datos también. Esto se traduce en un navegador con mejores tiempos de respuesta, descargas e interpretación de los datos para representarlos luego en pantalla.
Para no volver a los comienzos de Internet donde reinaba el texto plano y las fotografías se publicaban con tamaño de estampillas, vamos a conocer el arte de como lograr imágenes livianas y a elegir el formato indicado según tipo de gráfico o fotografía.
Para esto nos centraremos básicamente en dos tipos de imágenes fijas: unas basadas en pixeles (mapa de bits) y otras en vectores. Cada uno tiene sus ventajas y desventajas.
Imágenes en mapa de bits
Si es una captura o fotografía, estamos hablando de una imagen en mapa de bits (en inglés Raster), la cual está formada mediante una grilla de pixeles en la que cada pixel (del inglés Picture Element, elemento de imagen) tiene un valor color asignado en RGB (rojo, verde y azul). Cada uno equivale a 24 bits ó 4 bytes de información. Recordemos que un byte equivale a una letra, número o símbolo. Una pequeña imagen de 100×100 pixeles contiene 10.000 pixeles, lo cual se traduce en 40.000 bytes (40 KB) sin compresión. Los formatos de imagen en mapa de bits compatibles, estándar, con posibilidades de compresión (con pérdida y sin pérdida de calidad) para publicar en web son:
JPEG
(Grupo Conjunto de Expertos en Fotografía) tiene una relación de compresión grande con pérdida en la calidad. Ideal para imágenes de gran tamaño y fotografías. No permite transparencia.
PNG
(Gráficos de Red Portátiles) es un formato sin perdida de calidad, lo que se traduce en un mayor peso final o cantidad de bytes. Recomendado para imágenes formadas por grandes áreas de color plano o con pocas variaciones de color. Permite transparencia.
Ambos formatos pueden generarse con Adobe Illustrator, Photoshop y Vista Previa [Preview]. La resolución mínima deberá ser 144 PPI (pixeles por pulgada) y cada archivo no deberá superar los 200 KB. ¿Y qué ocurre con el legendario formato GIF? Es indicado cuando se requieren animaciones simples de pocos cuadros, y con una paleta color limitada.
Guía paso a paso
Para exportar desde Photoshop vamos a realizar los siguientes pasos:
- Ir al comando de menú Archivo – Exportar – Exportar como…
- A la derecha del cuadro de diálogo elegir formato: JPEG o PNG
- Si es JPEG, indicar la calidad entre: 30% y 90%
- Si es PNG, indicar si tiene transparencia
- Corroborar a la izquierda que la imagen no supere los 200 KB
- Confirmar si queremos guardar la información de autor como metadatos
- Presionar el botón Exportar todo…
Utiliza el comando de menú Exportar para indicar el formato de imagen, el nivel de calidad, confirmar su peso en KB y las dimensiones finales.
Recuerda que según el formato de archivo a elegir, está relacionado la complejidad de la imagen o fotografía. Para tonos lisos utilizaremos PNG y para imágenes complejas JPEG.
En el caso de elegir formato JPEG, deberemos indicar el porcentaje de calidad (0 a 100%). Cuanto mayor su valor, más alta calidad y mayor peso de archivo resultante.
Gráficos vectoriales
Las imágenes basadas en vectores se generan a partir de cálculos matemáticos. Además son independientes de resolución y escala visual, ya que utilizan lineas, puntos y polígonos para representar una imagen. Son ideales para gráficos que consisten en formas geométricas simples, por ejemplo logotipos, texto, iconos, etc. Sin embargo se quedan cortos cuando la imagen es compleja, por ej. el caso de una foto. La cantidad de código necesario para poder representar una fotografía, lo hace prohibitivo. El formato para gráficos vectoriales compatible, estándar, liviano y recomendado para publicar en web es:
SVG
(Gráficos Vectoriales Escalables) es un formato que puede ser re-dimensionado, tanto como se requiera, sin pérdida de calidad de imagen.
Este formato puede generarse con Adobe Illustrator y Photoshop.
Guía paso a paso
Para guardar desde Illustrator un gráfico vectorial en SVG, vamos a realizar los siguientes pasos:
- Ir al comando de menú Ventana – Asset Export †
- Arrastrar el gráfico agrupado al panel para generar un activo *
- Indicarle un nombre al activo, dentro del panel
- Elegir el formato SVG dentro del desplegable Formato
- Presionar el botón Exportar
- Indicar la ubicación a exportar
† Alternativamente al panel Asset Export, puedes utilizar el comando Archivo – Guardar como una copia. La diferencia de esta opción es que guardará como SVG todo lo que esté contenido en la mesa de trabajo activa del Illustrator. * Ten en cuenta que el gráfico a exportar debe estar agrupado antes de convertirse en activo. De lo contrario, quedará separado en varios objetos.
Utiliza el comando de menú Ventana para visualizar el panel Asset Export y agregar como activos cada gráfico que quieras exportar desde Illustrator.
Para generar un activo primero deben agruparse los objetos. Luego se arrastra el grupo y por último se le asigna un nombre, el cual será utilizado para el archivo de salida final.
Desde el panel Asset Export, podemos elegir el tipo de archivo a generar, tanto sea como mapa de bits (PNG, JPEG) o como gráfico vectorial (PDF, SVG).
Conclusión
Ahora que conoces la importancia de optimizar una imagen antes de publicar en la web, elegir el formato apropiado según tipo de imagen o gráfico a utilizar (JPEG, PNG, SVG) e indicar una resolución mínima (144 PPI), es tiempo de ponerlo en práctica. Ayudarás a obtener la información buscada sin largas esperas, con mejores resultados para todos. Puedes conocer más acerca de como optimizar imágenes en el curso Adobe Photoshop: Entrenamiento esencial.
Deja un comentario