Optimización de Imágenes

por J. Román H.@Manz

Uso de imágenes ¿Por qué es importante?

Desarrolladores de aplicaciones

Tamaño final de la aplicación

Ejemplo práctico

Juego Android “Save the World”

Imágenes antes de optimizar

289KB 305KB

Imágenes después de optimizar

80KB 91KB

Reducción total de 56% de la app

-56%

Diseñadores web

Velocidad de carga de página

83%

31%

82%

85%

85%

33%

14%

62%

34%

82%

PETICIONES TAMAÑO

Hay que encontrar un equilibrio

Formatos de imagen¿Cuál es el más adecuado?

Formatos principales

Hay cientos de formatos

JPG GIF PNGCON

PÉRDIDASSIN

PÉRDIDASSIN

PÉRDIDAS

- Texturas- Detalles

JPG

JPG

Calidad de imagen: 91%

JPG

Calidad de imagen: 10%

JPG

Elección subjetiva

JPG

JPEG “Baseline”

JPG

JPEG Progresivo

OPTIMIZADO

JPG

Metadatos

Miniaturas EXIF

«Nunca dejes que la realidad te arruine una buena foto»

Miniaturas EXIF

JPG

http://www.irfanview.com/

JPG

Eliminar EXIF

JPG

Eliminar EXIF (jhead)

JPG

Optimizar JPEG (jpegtran)

http://www.getpaint.net/

http://www.gimp.org/

El futuro(lo que viene)

JPGAlternativas

WEBP

25-34%MÁS PEQUEÑO

JPG2000

20%MÁS PEQUEÑO

https://developers.google.com/speed/webp/http://www.jpeg.org/jpeg2000/http://research.microsoft.com/en-us/um/redmond/groups/ivm/JPEGXR/

25-34%MÁS PEQUEÑO

JPG XR

25-50%MÁS PEQUEÑO

+ CANAL ALFA

JPG

Procesos por “lotes”(automatizar)

http://caesium.sourceforge.net/

http://www.xnview.com/en/xnconvert/

http://www.irfanview.com/

Optimización JPEG por “lotes”

9,08GB

5,06GBOPTIMIZADAS

- Imágenes pequeñas- Animaciones

- Máx. 256 colores

GIF

- Píxels de color “transparente”

GIFEstoy aquí

Optimizar GIF (gifsicle)

GIF

GIFAlternativas

APNGMÁS EFICIENTECOMPATIBLE PNG

MNGMENOS

EXTENDIDO

http://www.libpng.org/pub/mng/https://wiki.mozilla.org/APNG_Specification

(MUY DESCONOCIDAS)

- Imágenes con colores “lisos”- Bocetos, diseños, screenshots

PNG

Grado de compresión

PNG

0 1 2 3 4 5 6 7 8 9202KB

66KB

64KB

63KB

62KB

61KB

61KB

61KB

60KB

60KB

Sin compresión Por defecto

Tipos de PNG

PNG24PNG8True color256 colores

PNG32True colorCanal alfa

+

“Mapa” indexado de colores

PNG8

PNG Indexado a 256 colores

256256

PNG8

60KB

PNG Indexado a 128 colores

128128

PNG8

50KB

PNG Indexado a 64 colores

6464

PNG8

41KB

PNG Indexado a 32 colores

3232

PNG8

32KB

PNG Indexado a 16 colores

1616

PNG8

25KB

PNG Indexado a 8 colores

88

PNG8

20KB

Optimizar PNG (AdvPNG)

PNG8

Optimizar PNG (OptiPNG)

PNG8

Optimizar PNG (PNGOut)

PNG8

http://bit.ly/rHSWQG

https://code.google.com/p/grafx2/

http://pnggauntlet.com/

PNGOut DeflOptOptiPNG

http://trimage.org/

PNGCrush AdvPNGOptiPNG

jpegoptim

- Color verdadero- Ocupa (MÁS) que un JPEG

- No tiene artefactos

PNG24

Canal alfa (transparencial real)

PNG32

PNG32

PNG32

Canal alfa (transparencial real)

PNG32

Formatos con transparencias

66,2KB 56,1KB 189KB 43,5KB

PNG32PNG8 WEBPGIF

Porque los JPG no tienen transparencia... ¿o sí?

http://jim.studt.net/jpeg-alpha/http://blog.jackadam.net/2010/alpha-jpegs/https://www.webkit.org/blog/181/css-masks/

<CANVAS>

PNG Entrelazado

OPTIMIZADO

Algoritmo Adam7

http://en.wikipedia.org/wiki/Adam7_algorithm

“Truco” para diseñadores web

http://i-am-fat.org/PNGRotateTrick/

144KB 124KB

PNG24 PNG24

“Truco” para diseñadores web

http://i-am-fat.org/PNGRotateTrick/

CSStransform:rotate(270deg)

Perdida de calidad al ampliar

SVGPNG

Ampliable sin perder calidad

SVG

SVG: Archivos XML editables

SVG

http://inkscape.org/

RAW

Fotografía con datos “puros”

RAW

Ocupan mucho (alta edición)

PXNX3FPEF

RAW

Cada fabricante tiene el suyo

CRWNEF

DRFRAFORF

ProbablementeEl mejor optimizador

http://luci.criosweb.ro/riot/

Personalizable

¿Por qué?

JPG

Optimizar JPEG

JPG

Optimizar GIF/PNG

Reducción de colores (PNG24, 8)

PNG24PNG8 PNG32

Optimización del color

Reducir efecto en gradientes

Optimizadores externos

OptiPNG PNGOutAdvPNG

DeflOpt PNGquantPNGCrush

PNGrewrite Zopfli PNGnq

¿Es TAN importante la optimización de imágenes?

PNG24

49,8KB

RIOT

17,4KB

PNG8

17,4KB

PNG8

AdvPNG

PNG8

16,6KB

PNG8

16,6KB x 20.000 páginas vistas/día

332MB x 30 días

9,96GB al mes 29,88GB al mes

119,5GB al año 358,56GB al año

720K peticiones = 2,88$357GB transf. = 40,32$

43,2$

720K peticiones = 2,88$118GB transf. = 11,52$

14,40$

(Y esto sólo con el logotipo)

Imagina ahora el ahorro con el resto de imágenes

¡Quiero más sobre el tema!

http://www.emezeta.com/articulos/16-programas-para-pixel-arthttp://www.emezeta.com/articulos/32-editores-graficos-gratuitos

http://www.emezeta.com/articulos/la-guia-definitiva-para-optimizar-imagenes