PageSpeed insights optimizar imagenes

Me pase dos días peleando con Page speed Insights por que me pedía optimizar las imágenes, pero no me decía como y no lograba entender que estaba haciendo mal.  Bajaba la calidad de las imágenes y siempre me pedía bajar mas la calidad… En fin aquí dejo mi análisis de que funciona y que no.

Mi primer proyecto seo de 4 ya planeados este año :3

Bajar la calidad de la imagen (casi no funciona)

Algunos editores de imagen gratuitos como gimp permiten reducir la calidad de la imagen al exportar, sin reducir la dimensión de la imagen.  Esto lo hacen con un algoritmo que analiza los colores y reduce la gama usada. De tal forma que en la misma cantidad de pixeles hay menos información.

Lo que me di cuenta tras probar este método varias veces, es que Google siempre me seguía pidiendo que optimizara las imágenes, en mi mente solo pensaba en “¡que mas quieres de mi Google!”   Al final entendí que es lo que Google quiere, pero es una muy mala idea.

Bajar la resolución de la imagen (funciona, pero ¿quien demonios quiere imágenes pequeñas?)

Después de varios intentos me di cuenta que lo que realmente quiere Google es que la imagen tenga la resolución que usa realmente. Por ejemplo, si tenemos un div en forma de tarjeta y la imagen de esta ocupa 300px ancho y 200px alto, pero la imagen real es de 800×600. Entonces Google lo que quiere es que la imagen tenga enrealidad la resolución de 300×200.

Una completa tontería,  si nuestro diseño es responsivo, ese div de 300×200 tal vez se convierta en uno de 400×250 al pasar a móvil. y page insights  nos da dos valores diferentes de optimización, uno para descktop y otro para móvil.

Engañando a Pagespeed insights, una buena solución ;)

De entrada dejemos claros que usar este método e imágenes de 1200×650  es muy muy estúpido.  Es bueno tener las imágenes optimizadas. El problema es que Google nos pide sobre optimizar y eso no es tan buena idea.

La solución es simple, solo tenemos que no cargar la imagen hasta que sea realmente necesaria.  Este método se le conoce como Image lazy load.  hay varias librerías con este nombre y cualquiera funciona, por ejemplo jquery_lazyload.  Consiste en colocar la url de la imagen en el atributo “data-origin=”,  con esta modificación la imagen no se carga hasta que el javascript detecte que la imagen esta visible para el usuario.

Martin Quinta

Crecí con una computadora desde el kinder. Empece a programar a los 14 y hoy, mas de una década después… realmente odio estar frente a una computadora. Pero programar es en lo que soy bueno, por lo tanto me desahogo en este blog mientras bebo cerveza artesanal y pienso en un mundo bonito donde Java no existe.

Facebook Twitter LinkedIn  

Entradas relacionadas:

Leave a Reply

Your email address will not be published. Required fields are marked *