Optimización de Imágenes por J. Román H. @Manz
Jun 12, 2015
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