Im谩genes y v铆deos en la web

Im谩genes y v铆deos en la web

Total Kilobytes

Im谩genes y v铆deos en la web

Image Kilobytes

驴Mis im谩genes necesitan optimizaci贸n?

Herramientas online

WebPageTest

WebPageTest | Cloudinary

Developer Tools

Developer Tools

Developer Tools

Lighthouse

CLI Tools |聽psi

5.21 MB

CLI Tools|聽lighthouse

El mejor formato seg煤n el caso de uso

Formato de imagen

Imagen vectorial

Imagen bitmap

Formato de imagen

Pantallas de alta resoluci贸n

JPEG

PNG

GIF

WebP

JPEG XR

BPG

Formato de imagen

JPEG 2000

Formato de imagen

Pantallas de alta resoluci贸n

Formato de imagen | JPEG

Formato de imagen | JPEG

Formato de imagen | JPEG

Formato de imagen | JPEG

Formato de imagen | JPEG

Las ventajas de Progressive JPEGs

Formato de imagen | JPEG

Las ventajas de Progressive JPEGs

Formato de imagen | JPEG

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

Formato de imagen | WebP

Formato de imagen | WebP

Formato de imagen | AVIF

Formato de imagen | AVIF

Formato de imagen | AVIF

Formato de imagen | AVIF

Formato de imagen | JPEG XL

Formato de imagen | JPEG XL

Micro Optimizaci贸n

Chroma Subsampling

Micro Optimizaci贸n

Chroma Subsampling

Micro Optimizaci贸n

Chroma Subsampling

Micro Optimizaci贸n

Chroma Subsampling

Micro Optimizaci贸n

Memoria

Micro Optimizaci贸n

Width 脳 Height 脳 4

1,024 脳 300 脳 4 = 1,228,800 bytes

RGBA

Memoria

Micro Optimizaci贸n

Width 脳 Height 脳 3

1,024 脳 300 脳 3 = 921,600 bytes

YCbCr

Memoria

Micro Optimizaci贸n

Developer Tools | Performance

Micro Optimizaci贸n

Vale!, necesito optimizar mis im谩genes y v铆deos

Optimizaci贸 de im谩genes y v铆deos

Designer Responsibility

DR

Optimizaci贸 de im谩genes | App

Optimizaci贸 de im谩genes | App

Optimizaci贸 de im谩genes | App

Optimizaci贸 de im谩genes | App

Zopfli
PNGOUT
OptiPNG
AdvPNG
PNGCrush
JPEGOptim
Jpegtran
Guetzli
Gifsicle

jpeg-recompress
WebP
MozJPEG
pngquant

ImageMagick

Optimizaci贸n de im谩genes | CLI

Original聽| 766Kb

jpeg-recompress

Quality 80聽| 550Kb | 1.619s

Quality 70聽| 378Kb | 1.241s

Optimizaci贸n de im谩genes | CLI

Original聽| 766Kb

convert (ImageMagick)

Quality 80聽| 712Kb | 0.342s

Quality 70聽| 535Kb | 0.277s

Optimizaci贸n de im谩genes | CLI

Original聽| 766Kb

MozJPEG

Quality 80聽| 633Kb | 1.215s

Quality 70聽| 378Kb | 0.808s

Optimizaci贸n de im谩genes | CLI

Original聽| 766Kb

Quality 90聽| 705Kb | 3m 58.52s

Quality 84聽| 639Kb | 4m 3.33s

Optimizaci贸n de im谩genes | CLI

Imagemin + plugins

Optimizaci贸n de im谩genes | CLI

Imagemin + plugins

Optimizaci贸n de im谩genes | CLI

Imagemin + WebP

Optimizaci贸n de im谩genes | CLI

Optimizaci贸n de im谩genes | Service

Optimizaci贸n de im谩genes|聽"Service"

Optimizaci贸n de v铆deos

Optimizaci贸n de v铆deos

Optimizaci贸n de v铆deos

Optimizaci贸n de v铆deos

Optimizaci贸n de v铆deos

驴Me puedo fiar de la optimizaci贸n automatizada?

Designer

SSIM

Butteraugli

==

The Structural Similarity

Herramientas para medir las diferencias percibidas entre im谩genes

Valodaci贸n de im谩genes

Valodaci贸n de im谩genes

SSIM

Valodaci贸n de im谩genes

Butteraugli

Valodaci贸n de im谩genes

Valodaci贸n de im谩genes

Valodaci贸n de im谩genes

Velocidad de carga

Percepci贸n vs Realidad

Percepci贸n vs Realidad

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

Percepci贸n vs Realidad

La velocidad importa

La importancia de la velocidad

/La importancia de la velocidad/聽| Think with Google | Julio de 2017

Percepci贸n y realidad

La velocidad logra que las cosas funcionen

Percepci贸n vs Realidad

La importancia de la velocidad

Percepci贸n vs Realidad

Hackeando la percepci贸n del usuario para hacer que nuestros sitios web y aplicaciones se sientan m谩s r谩pidos

La importancia de la velocidad

Placeholder

Color s贸lido

Espacio

LQIP/SQIP

Silueta

Percepci贸n vs Realidad |聽Espacio vac铆o

Percepci贸n vs Realidad |聽Placeholder

Percepci贸n vs Realidad |聽Color s贸lido

Percepci贸n vs Realidad |聽LQIP

Low Quality Image Placeholders

Percepci贸n vs Realidad |聽SQIP

SVG Quality Image Placeholders

Percepci贸n vs Realidad |聽Silueta

Im谩genes Responsive

Utiliza el tag <picture>

Im谩genes Responsive

Im谩genes Responsive

One more thing...

Photo聽

聽Portrait

Image optimization聽

like a crazy

Original聽| 3,0Mb

Bokeh effect聽| 2,2Mb

OnePlus

Image optimization聽

like a crazy

Original聽| 2,5Mb

Bokeh effect聽| 6,6Mb

Huawei

Image optimization聽

like a crazy

No bokeh or blur

Synthetic bokeh

Gaussian blur

Image optimization聽

like a crazy

Image optimization聽

like a crazy

Image optimization聽

like a crazy

Image optimization聽

like a crazy

Image optimization聽

like a crazy

Original

Blur 1x1

Remove BG

186Kb

137Kb

426 Kb

Image optimization聽

like a crazy

Result | 146 Kb

馃敀 Optimizaci贸n de Im谩genes y V铆deo para la Web

By Joan Le贸n

馃敀 Optimizaci贸n de Im谩genes y V铆deo para la Web

  • 155