2. Introducción

Antes de definir la apariencia de nuestras páginas con CSS debemos aprender a tratar y guardar las imágenes para Internet correctamente.

A nadie le gusta una página que tarda una eternidad en cargar y tiene imágenes mal tratadas o que no guardan sus proporciones.

Muchas veces se guardan imágenes con más peso del debido; otras veces nos encontramos con imágenes de grandes dimensiones que han sido redimensionadas en el HTML para que se muestren con un tamaño muy reducido. ¿No es mejor utilizar una imagen ligera y con las dimensiones con las que ha de mostrarse?

Vamos a ver cuáles son los formatos de imágenes adecuados para Internet, cuándo utilizar uno u otro y cómo tratar las imágenes para que tengan el tamaño y adecuado y pesen poco, conservando su calidad.

¿Qué ventajas tiene hacer un buen uso de las imágenes?

  • Páginas más ligeras.
  • Correcta visualización.
  • Mayor nivel de accesibilidad: si mi conexión no es buena, no podré acceder a páginas muy pesadas, por ejemplo. Puede parecer algo raro, pero hoy en día hay muchas conexiones móviles con tasa de transferencia limitada (100 MB al día, etc.).
  • Menor desgaste del servidor: en el caso de EducaMadrid no lo vamos a notar, pero si tenemos una web alojada en un servidor de pago y tenemos muchas visitas... Los proveedores de alojamiento web suelen cobrar más a mayor tasa de transferencia. Cuantos más datos se transfieran de un lado a otro, más "trabajo" para el servidor. Las imágenes son muchas veces las causantes de un excesivo desgaste.