La optimización de imágenes puede resultar algo tedioso puesto que tienes que comprimir, cortar o reducir, lo cual puede llevar a un efecto de que la imagen baje la calidad, de igual modo buscamos que nuestra web sea más rápida al momento de cargar.
En muchos casos, las imágenes son el problema número uno que afecta los tiempos de carga del sitio web.
Todos entendemos que las imágenes de alta calidad contribuyen a una experiencia de usuario positiva, pero aveces hacen que nuestra web sea algo lenta.
1. Usa imágenes de manera responsable
El diseño minimalista a menudo se presta a una buena experiencia de usuario porque proporciona un mayor rendimiento. Pero debes preguntarte si una imagen es absolutamente crítica para tu diseño.
Para páginas web más dinámicas, puede ser tentador hacer imágenes interactivas e incluso un punto focal de tu diseño.
A menos que seas un fotógrafo, puedes aprovechar recursos alternativos en lugar de imágenes para mejorar su Usabilidad Web, como:
- CSS3 para elementos interactivos.
- Gráficos vectoriales escalables para logotipos y diseños simples.
- Videos incrustados en lugar de GIF voluminosos.
De hecho, las imágenes vectoriales tienden a mantener una mayor resolución cuando se cargan en dispositivos de mayor resolución.
Además, en lugar de codificar el texto dentro de las imágenes, que los motores de búsqueda no pueden leer, en su lugar podrías recurrir a fuentes web que mejoren la Usabilidad.
2. Automatizar la compresión de imágenes
Probablemente las dos mejores formas de optimización de imágenes para la velocidad son reducir su tamaño y comprimir sus archivos. La compresión de imágenes es increíblemente fácil con las herramientas adecuadas a tu disposición.
Si estás trabajando con WordPress, puedes instalar Imagify y comprimir todas tus imágenes de forma masiva en un solo clic. Todas la imágenes adicionales que se agreguen a tu biblioteca serán comprimidas usando esta herramienta.
Este complemento incluso ofrece una configuración agresiva para comprimir JPG y PNG para aumentar la velocidad de forma masiva.
Si te preocupa que los complementos reduzcan la velocidad de tu sitio o que trabaje con un CMS de código más abierto, puedes usar Image Optim para comprimir todas tus imágenes en una carpeta en particular. Sus características de arrastrar y soltar hacen que sea increíblemente fácil comprimir imágenes y luego agregarlas a tu sitio.

3. Servir imágenes en formatos de próxima generación
Dependiendo de tu formato de archivo, tendrás que usar compresión con pérdida o sin pérdida.
Tradicionalmente, nos hemos basado en dos formatos de imagen JPEG (con pérdida) y PNG (compresión sin pérdida).
Pero las herramientas han comenzado a recomendar nuevos formatos de imagen, especialmente para crear velocidades de carga rápidas y mantener relaciones de aspecto uniformes en dispositivos móviles.
Puedes elegir entre varios formatos nuevos, incluidos JPEG 2000, JPEG XR y WebP.
JPEG 2000 es muy similar al JPEG tradicional, pero con compresión sin pérdida. Esto significa que los archivos JPEG 2000 comprimidos conservan sus metadatos sin perder mucho de calidad.
JPEG XR es compatible con la compresión sin pérdida y con pérdida en relaciones de compresión más altas.
Desafortunadamente, estos dos formatos no son compatibles con la mayoría de los principales navegadores, incluidos Google Chrome y Firefox.
El único formato de imagen que es compatible con Google Chrome, así como Firefox es WebP. WebP te ofrece compresión sin pérdida y con pérdida, así como soporte para animación.
Hay una variedad de complementos de WebP para experimentar y puedes convertir un archivo JPEG o PNG a WebP usando un convertidor en línea o Photoshop.