Menú


Optimización de imágenes: Peso y resolución

Lo mejor para evitar que las imágenes supongan un problema en la carga inicial de la Web, por su peso y tamaño, es cargarlas en diferido a través del famoso ### Lazy Load

Si aún así optamos por cargar la imágen sin diferirla por que no tenemos otra opción, tened en cuenta los siguientes aspectos:

Ajustar resolución original

Ajustar la resolución de la imagen a la que se mostrará en la Web: Es decir si en la Web la imagen se muestra a una resolución de 200x200, no subáis una imagen original de 800x800.

Si la misma imagen se muestra en dos tamaños distintos en la misma web, vale más crear dos archivos diferentes a dos resoluciones, que poner la imagen a la resolución más grande y reducirla por HTML o CSS.

No me sean vagos, lo más importante es la velocidad, si tenemos que crear 100 versiones de una misma imagen para 100 páginas que la cargan a distintos tamaños, pues se hace. Ahora bien, si es verdad que tenemos 100 tamaños diferentes, el problema ya no esta en las imágenes, ni tan solo en la Web.

Ajustar la calidad de compresión

Ajustar la calidad de la compresión al máximo. A veces la diferencia entre una calidad de 100 a 50 puede pasar inadvertida por el usuario. Hay que ver que tipo de Web y que imagen se quiere vender para saber hasta que punto estamos dispuestos a ceder en calidad en favor de velocidad.

Hay algunos programas que ayudan a optimizar al máximo la compresión con unos resultados visuales muy aceptables.

FileOptimizer es una fácil y buena herramienta de compresión

Utilizar formatos de nueva generación

Otra de las opciones que se nos ofrece, es la de utilizar formatos de imagen de próxima generación: JPEG 2000, JPEG XR y WebP. Estos formatos están muy bien porque mejorar los ratios de compresión de los archivos. Pero como pasa siempre, todavía no funcionan en todos los navegadores y veremos si lo hacen. Ya sabemos que las luchas de poderes hacen que cueste un poco normalizar las cosas. Veremos como evoluciona el tema. Nosotros de momento utilizamos los formatos de siempre, pero cada vez más tipos vectoriales com .SVG. Estos archivos en algunos casos mejoran de forma muy importante el peso y el problema de las resoluciones. Al ser un archivo vectorial se puede ajustar a cualquier resolución sin perder ni un ápice de calidad.

Artículos relacionados