Joan León PRO
⚡️ Web Performance Consultant | Speaker | Staff Frontend Engineer at @AdevintaSpain | @GoogleDevExpert in #WebPerf | @cloudinary Ambassador
Joan León
The advantages of Progressive JPEGs
The advantages of Progressive JPEGs
The disadvantages of Progressive JPEGs
Progressive JPEGs can be slower to decode than baseline JPEGs.
Progressive JPEGs are also not always smaller.
Some users may consider progressive loading to be a disadvantage.
Original | 766Kb
jpeg-recompress
Quality 80 | 550Kb | 1.619s
Quality 70 | 378Kb | 1.241s
Original | 766Kb
convert (ImageMagick)
Quality 80 | 712Kb | 0.342s
Quality 70 | 535Kb | 0.277s
Original | 766Kb
MozJPEG
Quality 80 | 633Kb | 1.215s
Quality 70 | 378Kb | 0.808s
Original | 766Kb
Guetzli
Quality 90 | 705Kb | 3m 58.52s
Quality 84 | 639Kb | 4m 3.33s
Imagemin + plugins
Imagemin + plugins
Imagemin + WebP
The Structural Similarity
Tools for measuring perceived differences between images
SSIM
Butteraugli
Chroma Subsampling
Using the <picture> Tagpicture
Follow José Manuel Perez
Engineer at @Spotify and Web Perf geek
By Joan León
Como profesionales del desarrollo web, nos procupamos de las buenas prácticas en Javascript y CSS, de la semántica en HTML, de la acesibilidad de nuestro contenido, pero ¿qué pasa con la imágenes? Las imágenes representa hasta el 60% del contenido de los sites, desde julio de 2017 en un site promedio de 3.0Mb, 1.7Mb son imágenes. Ahora que sabemos que deberíamos dedicar tiempo a optimizar las imágenes, veamos los diferentes niveles de optimización y formas de hacerlo.