En 2016, todos los sitios web modernos son ricos en contenido multimedia (imágenes, vídeos...). Si nos fijamos solamente en las imágenes, veremos que representan más del 60% de la carga de un sitio web. Esta es la razón por la cual, si quieres contar con un sitio web bien optimizado que cargue rápido, debes empezar primero por la optimización de imágenes. En este artículo comentamos los errores más comunes cometidos por desarrolladores y diseñadores cuando se trata de gestionar imágenes, y cómo solucionarlos.
Utilizar imágenes para cosas que puedes hacer con CSS
Hubo un tiempo, cuando la especificación CSS era bastante básica, que las imágenes eran necesarias para fondos, sombras, iconos, etc. Sin embargo con CSS3, el cual es compatible con todos los navegadores web más populares, puedes hacer que tu sitio web cargue más rápido y ahorrar en ancho de banda mediante el uso de técnicas CSS.
¿Necesita un degradado? Lo puedes hacer con CSS puro. ¿Te gustan algunos iconos? No utilices iconos en formato imagen, sino SVGs o alguna fuente de iconos de las cientas que pululan por la red
Utilizar el formato de imagen adecuado
Un error bastante común a la hora de mostrar imágenes online es utilizar el formato incorrecto. Voy a intentar resumirlo: .jpg, .gif y .png son los tres formatos más comunes para imágenes en Internet. Pero eso no significa que debas cualquiera de ellos. De hecho, cada formato tiene sus propios pros y contras, y el uso del formato adecuado para cada tipo de imagen es algo que, definitivamente, te hará ahorrar ancho de banda y hará que tu sitio cargue más rápido.
Las fotografías deben estar siempre en formato .jpg. ¿Logos y gráficos? .png es la opción correcta. ¿Qué pasa con .gif? Úsalo sólo para imágenes muy pequeñas, como fondos repetidos, que no puedas realizar con CSS puro. Los GIF son muy populares cuando se trata de mostrar videos cortos y en bucle.
Otra cosa a considerar son los formatos emergentes. WebP es un formato de imagen creado por Google que proporciona una compresión sin pérdidas (un 26% más pequeño en comparación con un PNG) para las imágenes que quieras mostrar en la web. Desde hace muy poco, WebP es compatible de forma nativa con Chrome y Opera, y no hay duda de que otros navegadores cogerán el testigo. Microsoft también ha creado otro formato llamado JPEG-XR, que actualmente es compatible con los navegadores de Microsoft exclusivamente.
Usar imágenes no optimizadas
Como regla general, cada imagen que se muestre en tu sitio web debe estar optimizada. La forma más fácil de optimizar imágenes es mediante la función "Guardar para Web" de Adobe Photoshop.
Si utilizas WordPress, definitivamente debes instalar el plugin WP Smush: optimiza automáticamente todas las imágenes que subas a WordPress y las reduce hasta en un 90%, sin comprometer la calidad. ¡Este plugin es de obligada instalación, definitivamente! El plugin también cuenta con una versión premium, con funciones adicionales y una mayor optimización. No la he probado aún, pero se ve muy interesante.
Usar el redimensionamiento del navegador en imágenes grandes
En 2016, es obligatorio que tu sitio web se vea bien en los diversos dispositivos y resoluciones. Mientras que hacer que tu sitio web sea responsive es relativamente sencilo, tratar con imágenes es algo más complicado.
Puede ser muy tentador usar una imagen, con la máxima resolución necesaria, y luego usar el redimensionamiento del navegador para reducirla a resoluciones más pequeñas. El problema con el redimensionamiento del navegador es que sigue sirviendo la misma imagen grande, lo que hace que el sitio web tenga que cargar la imagen completa tanto si estás navegando a través de un dispositivo móvil como si estás haciéndolo desde una tablet. Con el consumo de datos que implica eso...
La solución a este problema es crear diferentes miniaturas de la misma imagen y mostrar el tamaño de imagen adecuado de acuerdo con la resolución del usuario. Para ello, puedes utilizar una solución de código abierto, como el popular ImageMagick, o confiar en un servicio basado en la nube como Cloudinary.
No cachear las imágenes
No cachear tus imágenes es un error que hace que tu sitio web cargue más lento. Las imágenes y otros recursos estáticos deben almacenarse en caché para impedir al navegador del usuario que vuelva a cargar un recurso obtenido previamente.
El almacenamiento en caché se puede implementar fácilmente pegando el siguiente código en tu archivo .htaccess:
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule>
Si utilizas WordPress, te recomiendo encarecidamente el plugin W3 Total Cache.
Fuente: catswhocode.com