#JPEG #PNG #GIF #WebP #JPEG-XR #JPEG-2000 #BPG #HEIF #FLIF #MP4 #WebM #HEVC #OGG
#Codemotion #webinar
Joan León
#CSS
#PostCSS
#Animation
#SVG
#Javascript
#WebPerformance
#ImageOptimization
#GDE
#MDE
01. El mejor formato según el caso de uso 02. ¿Mis imágenes necesitan optimización? 03. ¡Vale!, necesito optimizar mis imágenes 04. Creando imágenes responsive para la web 05. ¿Me puedo fiar de la optimización automatizada? 06. Velocidad de carga: Percepción vs Realidad en la web 07. Procesamiento de imágenes 08. Optimizando vídeos 09. Recursos para mejorar tus conocimientos en Optimización de Imágenes y Vídeos
Según la investigación de Soasta / Google de 2016, las imágenes fueron el segundo predictor más alto de conversiones, ya que las mejores páginas tienen un 38% menos de imágenes.
Imagen vectorial
Imagen bitmap
Pantallas de alta resolución
Pantallas de alta resolución
Las ventajas de Progressive JPEGs
Las ventajas de Progressive JPEGs
Progressive JPEGs pueden ser más lentos de decodificar que los JPEG de línea de base.
Progressive JPEGs no siempre son más pequeños.
Algunos usuarios pueden considerar la carga progresiva como una desventaja.
Las desventajas de Progressive JPEGs
Chroma Subsampling
Chroma Subsampling
Chroma Subsampling
Chroma Subsampling
Memoria
Memoria
Memoria
Developer Tools | Performance
⏳
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
Quality 90 | 705Kb | 3m 58.52s
Quality 84 | 639Kb | 4m 3.33s
⏳
Imagemin + plugins
Imagemin + plugins
Imagemin + WebP
The Structural Similarity
Herramientas para medir las diferencias percibidas entre imágenes
SSIM
Butteraugli
Un estudio reciente pone de manifiesto que, a pesar de que la velocidad es de vital importancia en la Web móvil, también lo es la percepción que de ella tienen los usuarios, y ofrece a los propietarios de sitios web una serie de ideas para mejorar la usabilidad.
La importancia de la velocidad
/La importancia de la velocidad/ | Think with Google | Julio de 2017
La importancia de la velocidad
/La importancia de la velocidad/ | Think with Google | Julio de 2017
La importancia de la velocidad
La importancia de la velocidad
Placeholder
Color sólido
Espacio
LQIP/SQIP
Silueta
Low Quality Image Placeholders
SVG Quality Image Placeholders
Utiliza el tag <picture>
Photo
Portrait
Original | 3,0Mb
Bokeh effect | 2,2Mb
OnePlus
Original | 2,5Mb
Bokeh effect | 6,6Mb
Huawei
No bokeh or blur
Synthetic bokeh
Gaussian blur
Original
Blur 1x1
Remove BG
186Kb
137Kb
426 Kb
Result | 146 Kb
01. El mejor formato según el caso de uso 02. ¿Mis imágenes necesitan optimización? 03. ¡Vale!, necesito optimizar mis imágenes 04. Creando imágenes responsive para la web 05. ¿Me puedo fiar de la optimización automatizada? 06. Velocidad de carga: Percepción vs Realidad en la web 07. Procesamiento de imágenes 08. Optimizando vídeos 09. Recursos para mejorar tus conocimientos en Optimización de Imágenes y Vídeos
Joan León
#CSS
#PostCSS
#Animation
#SVG
#Javascript
#WebPerformance
#ImageOptimization
#GDE
#MDE