Optimización de imágenes para la velocidad de carga de sitios web

Consideraciones de tamaño y opciones de compresión

El tamaño de la imagen influye en la página de renderizar la velocidad y el uso de ancho de banda, por lo que cuanto menor sea el mejor, siempre y cuando la calidad de imagen se conserva.
En la práctica, el 60-70% de calidad jpeg es un buen equilibrio entre la calidad y el tamaño.

media_1373085873800.png

Imagen JPEG con una calidad 100% – 69KB

media_1373085732086.png

Imagen JPEG con calidad de 60% – 21KB

Imagen Dimensión   Calidad   Formato   Tamaño      Después de herramientas

peony   800×429      100%      PNG      466 KB    445 KB
peony   800×429      100%      JPG      256 KB    224 KB
peony   800×429       60%      JPG       65 KB     64 KB
peony   800×429       30%      JPG       30 KB     30 KB

peony   400×215      100%      PNG      133 KB    127 KB
peony   400×215      100%      JPG       69 KB     69 KB
peony   400×215       60%      JPG       22 KB     21 KB

Para la 800x429px JPG la diferencia entre el 100% y la calidad del 60% es la friolera de 256-64 = 192 KB salvó. En una carpeta con 15 imágenes que significa 2,880 KB carga de la página / ancho de banda ahorrado.
La calidad es razonable, sin embargo en el 60%, como se puede ver a continuación.

¿Qué formato JPG de usar, base o progresivo?

Últimamente ha habido un renovado interés en el antiguo formato JPG progresivo, ya que es recomendado por PageSpeed ​​de Google y porque muchas personas argumentan que es mejor presentar a los usuarios móviles (con ancho de banda limitado) una imagen de resolución más baja con la primera.

Otro argumento a favor de los estados JPG progresivo que evita mezcolanza de elementos del sitio web antes de que la imagen se haya cargado completamente. ¿Qué se puede y se debe evitar de todas formas estableciendo correctamente al menos el ancho de la imagen de los elementos de la CSS.

Yo prefiero usar de referencia, ya que el factor de ancho de banda se ve compensado por el aumento de la memoria y requisitos de procesamiento para los usuarios de móviles al utilizar JPG progresivo.

¿Qué pasa con las pantallas de alta resolución retina?

Crear imágenes separadas para las pantallas en alta resolución (retina), si es necesario. Hacerlos 150-200 por ciento en tamaño con una calidad de 30 a 40 por ciento (y especificar el ancho y la auto-altura en el css para escalar hacia abajo otra vez). El resultado es un JPG con buena calidad y tamaño razonable (en nuestro ejemplo, la imagen de 30 KB de 800×419 a 30%, 21KB de 400×215 a 60%).

Pruébalo tu mismo para comprobar la calidad del resultado final.

Herramientas gratuitas para optimización de imágenes en Windows (proceso por lotes)

Radical Image Optimization Tool

JPEG Reducer

PNG Gauntlet

Añadir cabeceras expiradas

Consistiria en añadir esto al fichero “.htaccess” :

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

Por último aqui tenéis también algunas recomendaciones de Google:

https://developers.google.com/speed/docs/best-practices/payload#CompressImages

Y tu ¿usas estas o otras técnicas para mejorar la velocidad de carga de sitios web con las imágenes?

Anuncios

  1. Pingback: Como optimizar un sitio Joomla | Vicen Martínez
  2. Pingback: Los mejores pluggins para optimizar la velocidad de carga de un sitio WordPress | Vicen Martínez
  3. Pingback: Las mejores extensiones para optimizar la velocidad de carga de un sitio Joomla | Vicen Martínez

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s