En este artículo vamos a contarte las diferentes opciones que tienes de incluir imágenes en entorno web y en qué circunstancias deberías usar cada una de ellas.
Escoger un formato de imagen para nuestra web parece un asunto fácil, ¿verdad? Podríamos subir laimagenquemegusta.jpg solo prestando atención a que se vea bien y que muestre el contenido que queremos. Sin embargo la elección del formato de imagen y su optimización tiene importantes implicaciones que deberíamos tener en cuenta.
¿Por qué es tan importante?
En primer lugar, debemos considerar el tiempo de carga de las imágenes que usamos en la web. Una imagen que no esté optimizada (es decir, que no se haya tratado para tener la mejor calidad posible con el menor tamaño de archivo) añadirá peso innecesario que se traducirá en una mayor lentitud de carga de la página y en un mayor consumo de datos del usuario… y a nadie le gusta quedarse sin datos cuando navega, ¿no? Intentemos que esto no ocurra.
¿Sabes diferenciar entre vector y pixel?
Formatos vectoriales
En ellos se guarda la información de forma ligera y escalable, es decir, podemos ampliar la imagen tanto como queramos y no pierde calidad, y además pesa poco. En ellos no existe compresión, son un código que se renderiza directamente en la web. En general, siempre que sea posible es recomendable usar formatos vectoriales ya que con ellos vamos a restar peso al contenido que cargamos mientras aseguramos una buena calidad en la visualización.
Si usas vector usa SVG
El formato SVG (Scalable Vector Graphics) es el más extendido en web, es abierto y basado en XML, por tanto compatible con cualquier navegador. Sería recomendable usar .svg para iconos, logotipos…. Y podríamos decir para todo aquello que sea “formas, color plano, texto”. Conviene recordar que .svg tiene la opción de animarse, y es compatible con CSS.
Formatos “pixel” (rasterizados o mapa de bits)
No todo lo que vemos en Internet son gráficos, hay también muchas fotografías. Por su riqueza de matices no es factible usar formatos vectoriales, sino que tienen que utilizar miles de pixels para representar el “mundo real”. Contienen, por así decir, un mosaico de cuadraditos donde cada uno de ellos lleva unas instrucciones de color. En el caso de color para pantallas, RGB, indica con qué intensidad se tienen que encender en ese píxel concreto cada uno de los tres diodos, rojo, verde y azul.
Los clásicos, PNG y JPG
Los reyes de la categoría son PNG y JPG (o JPEG). Si no sabes cuál usar hazte la siguiente pregunta: ¿Necesito transparencia en las fotos? Si este es tu caso, usa .png (Portable Network Graphics). En principio se trata de un formato de compresión sin pérdida capaz de guardar canal alpha (transparencia) y, por si te lo preguntabas, al haber nacido para web solo soporta espacio de color RGB y no CMYK pero esto ya es otro tema.
Sin embargo la mayoría de las fotos que vemos y descargamos suelen ser .jpg/.jpeg (Joint Photographic Experts Group) por dos razones:
La primera es porque es el formato hegemónico en cámaras digitales, y la segunda es porque es capaz de comprimir muchísimo, ahora sí, con pérdida. JPEG lleva siendo mucho tiempo el estándar en web y puede que te suene JPEG2000, un formato lanzado en 2000 con mejor compresión que JPEG con intención de reemplazarlo… spoiler, no ocurrió. De modo que está bien saber que JPEG2000 existe, pero úsalo solamente si tu cliente te lo pide o tu proyecto lo requiere, ya que no es soportado por la mayoría de navegadores.
En cualquier caso lo que deberías hacer si usas imágenes rasterizadas (png o jpg) es optimizar la imagen antes de subirla a la web o pasarla al equipo de desarrollo.
Esto hará que sin perder calidad de imagen tu archivo pese menos y cargue antes sin dar mucho problema. Para esto existen varias herramientas online que comprimen tu archivo reduciendo bastante su peso y sin diferencia de calidad perceptible por el ojo en un entorno web.
Las más usadas y que te recomendamos son:
La nueva tendencia: WebP y AVIF
WebP (Web Picture Format) y AVIF (AV1 Image File Format) son dos formatos abiertos que ofrecen tasas de compresión mucho mejores de las de los formatos clásicos de imagen. La diferencia fundamental entre ellos es que WebP está más extendido, mientras que AVIF es capaz de comprimir hasta un 30% más y además puede contener vídeo (se desarrolló para streaming), sin embargo todavía su uso es menor.
Si quieres utilizar estos formatos debes saber que ninguno de ellos es vectorial y además no son soportados de forma nativa por Photoshop, por lo que necesitarás usar una herramienta online o GIMP (aunque con peores resultados).
Bonus track: responsive images
Sea cual sea el formato que escojas para tus imágenes en web, no deberías olvidarte de aportar diferentes resoluciones de imagen para desktop, tablet y mobile. ¿Por qué? Por ejemplo en un móvil tu imagen va a escalarse a menor tamaño, por lo que mucha de su información sobra al no poder apreciarse visualmente la diferencia en ese dispositivo. Opta siempre por varios tamaños para evitar el gasto innecesario de datos móviles y reducir tiempos de carga con conexiones más lentas.
La conclusión es que el formato que escojas dependerá del uso que le vayas a dar la imagen, con lo cual es adecuado conocer las ventajas y desventajas de cada uno de ellos para buscar la mejor solución. Recuerda que al final es como en la vida misma: lo que no suma, te lastra. Reduce siempre que puedas el peso de tus imágenes y evita cargar en tu web recursos que no necesitas.
Configuración de cookies