«La optimización de las imágenes es uno de los puntos más críticos a la hora de optimizar cualquier sitio web: un poco de trabajo y buenas prácticas pueden hacer tu sitio increíblemente más rápido»
¿Qué es optimizar imágenes para web?
Las imágenes creadas con Photoshop e Illustrator son muy buenas, pero por lo general siempre son archivos muy grandes con información extra. El motivo; para poder editar de diferentes maneras, estos programas añaden mucha información no necesaria.
Si cada imagen que tienes en tu web, se puede optimizar un 30 o 40% estás perdiendo ancho de banda y sobre todo, carga instantánea, haciendo que el usuario tenga que esperar para descargar una información en las imágenes que no le aporta nada.Guardar imágenes para la web consiste en reducir el tamaño del archivo eliminando la información extra, en formatos reproducibles por un navegador web, pero sin perder calidad.
«Optimizar las imágenes, aparte de servirlas desde un dominio sin cookies, con gzip y en formato progresivo (si no sabes lo que es, estate atento a nuestro blog, pues lo cubriremos en nuestro siguiente post).»
¿En que consiste optimizar imágenes para web?
Como hemos dicho, consiste en convertir la imagen a un formato amigable para los navegadores y eliminar información extra innecesaria, pudiendo ganar hasta un 80% de carga total.
Por algo, la optimización de las imágenes está en el top 5 de acciones a revisar ante problemas de web performance.
Hay dos formas de compresión que tenemos que entender, con pérdida y sin pérdida.
Las imágenes guardadas en un formato con pérdida se verán un poco diferente de la imagen original sin comprimir. Ten en cuenta que la diferencia es mínima, y que ocupa menor tamaño y usa menos memoria del servidor, por lo que generalmente es la opción recomendada.
Las imágenes guardadas en formato sin pérdida retienen toda la información para producir la imagen original pero son de mayor tamaño, como es de imaginar.
Puntos a revisar para tener imágenes perfectas en tu web
Evidentemente, no es algo que vayas a dominar ni mucho menos con un simple artículo, pero si sigues las siguientes prácticas, seguro que vas a mejorar muchísimo la carga de tu sitio:
- Reducir el espacio en blanco alrededor de imágenes
- Utiliza formatos de archivo adecuados: jpg, png o gif.Por ejemplo, una imagen png, si el que no tenga fondo no es importante, suele pesar mucho más que jpg el 90% de las veces
- Haz las imágenes en el tamaño final: si haces una imagen más grande, el navegador tiene que descargarla al tamaño completo y después redimensionarla, por lo que tarda un tiempo totalmente inútil en descargar más información y después adaptarla
- Al añadir las imágenes, añade el tamaño final de la misma, aunque tenga ese tamaño, así ahorras al navegador el tener que identificar el mismo
- Usa sprites con CSS. Mediante CSS, incluyes una imagen conjunta, por ejemplo varios iconos, y ocultas el resto, reduciendo el número de llamadas http, cosa muy importante ya que el navegador descarga los elementos por paquetes y le facilitas la tarea
- Usa imágenes progresivas siempre que sea posible. Cada vez es más aceptado por los navegadores modernos y su descarga es mucho más rápida que los jpg normales