Imágenes y la performance de nuestra web

Ya es sabido que el peso o espacio que ocupe un archivo hará que cargue este más rápido, es por esa razón que en el tema de hoy tocaremos como influyen las imágenes, su tamaño y su formato la performance de nuestra web.

También cabe destacar que las imágenes han tenido diferentes funcionalidades a lo largo del tiempo según su formato, estas pueden ser como su compresión con y sin perdida de datos transparencia, animaciones, capacidad de tener metadatos y ICC.

El Tamaño de nuestra imagen

Lo óptimo para nuestras páginas es que la imagen tenga el tamaño adecuado para la misma, ¿cómo logro esto?.Pues veamos un ejemplo:

Supongamos que tenemos una página web que lo que hace es mostrar wallpapers. No pienses en sistema de negocios. Solo piensa en que quiero una galeria con los wallpapers que ofresco para bajar y cuando clickeamos en esta voy a la pagina que muestra el wallpaper y nos la permite bajar.

Para que esto no se tarde rato largo cargando estas grandes imágenes usted, necesitara realizar imágenes a menor escala de la original. Si esto no se realiza de esta manera tu página podría llegar a más de 2 segundos fácilmente si muestras más de 50 wallpapers en una sola página y todos sabemos mas de 2 segundos es un usuario que se va de la pagina.

En pocas palabras necesitaremos la versión small y la versión original y puede que una intermedia si así lo desea. La cuestión es que mostrando 50 imágenes small no bloqueara la carga de la página mientras que 50 redimensionadas o resizeadas sí.

Formatos o extensiones que puede tener nuestras imágenes.

BMP(lanzado en1986)no recomendado

Fue uno de las primeras extensiones que las imágenes tuvieron, no use este formato en páginas web, es muy pesado.

TIFF(lanzado en 1986)no recomendado.

Aunque TIFF es mejor que BMP en muchos sentidos es poco soportado por los navegadores y hay mejores alternativas.

GIF(lanzado en 1987)

Lo bueno de GIF es que nos deja hacer una imagen animada, y es por lo que siempre se ha reconocido más a GIF.

soporta compresion

JPEG(lanzado en 1992)

Es soportado por todos los navegadores, pero hoy en día hay mejores alternativas.

PNG(lanzado en 1996)

El formato PNG permite transparencias, y distintas calidades PNG8 fue alguna vez pensado para ocupar poco, PNG24 guarda cada valor de color. Hoy en día hay mejores alternativas. Fue muy usado en los header de páginas por la transparencia de este.

JPEG2000(lanzado en 2000) Recomendado para web

Creado por los mismos creadores de JPEG llego para superar la compresión que este da pero con perdidas de datos.

JPEG XR (lanzamiento inicial 2009)

Creado por Microsoft rinde un 50% más en la reducción de espacio que JPEG

WebP(lanzado en 2010) Recomendado para web

Es un formato que será soportado por la gran mayoría de los navegadores, su desarrollador es Google. Soporta compresión con perdida y sin ella. Permite la transparencia Actualmente si tu web no usa este formato deberias estar pensando en utilizarlo.

Compite directamente con JPEG o JPG como le quieras llamar.

AVIF( no pude encontrar la fecha de lanzamieto) Recomendado para web

Es el formato que se estima será usado en todas partes a partir de 2021. AVIF vino a superar a webp y nos ahorraria un 50% de espacio más que un jpeg.

Tabla de formatos y soporte
extension	Firefox	edge y explorer	opera	safari	chrome	exif o XMP	ICC	animation	transparency
BMP	si	si	si	si	si	no	no	no	no
TIFF	no	no	no	si	no	si	no	no	no
GIF	si	si	si	si	si	no	no	si	si
JPEG	si	si	si	si	si	si	si	no	no
PNG	si	si	si	si	si	no	no	no	si
JPEG2000	si	si	si	si	si	xml form	si	no	si
JPEG XR	no	si	no	no	no	si	si	No espesifica	si
WebP	si	edge si (explorer no)	si	si	si	si	si	si	si
AVIF	last version	no	ver-71	no	ver-85	no espesificado	si	si	si

Recomendaciones de Google Sobre imágenes.

Los formatos JPEG 2000, JPEG XR y WebP hacen que se compriman mejor las imágenes y es lo recomendado hoy dia a ser utilizados. AVIF por ahora es para un futuro próximo.

Otras recomendaciones que nos da Google es el atributo alt en nuestra imagen son no poner el nombre de nuestra imagen como atributo(1), no poner un exceso de palabras clave(2), las mejores opciones son la opción 3 y 4 siendo la 4 la óptima, ya que describe lo que pasa en la imagen.

Incorrecto (falta texto alternativo): <img src="puppy.jpg"/>
Incorrecto (exceso de palabras clave): <img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>
Opción buena: <img src="puppy.jpg" alt="puppy"/>
Opción óptima: <img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

Los puntos anteriores fueron directamente copiados de las recomendaciones de google.

Category: otros

Something wrong? If you found an error or mistake in the content you can contact me on Twitter | @luisg2249_luis.