Optimización
deImágenes
porJ.RománH.
@Manz
Usodeimágenes
¿Porquéesimportante?
Desarrolladoresdeaplicaciones
Tamañofinaldelaaplicación
Ejemplopráctico
JuegoAndroid“SavetheWorld”
Imágenes antes deoptimizar
289KB 305KB
Imágenes después deoptimizar
80KB 91KB
Reduccióntotalde56%delaapp
-56%
Diseñadoresweb
Velocidaddecargadepágina
83%
31%
82%
85%
85%
33%
14%
62%
34%
82%
PETICIONES TAMAÑO
Hayqueencontrarunequilibrio
Formatosdeimagen
¿Cuáleselmásadecuado?
Formatosprincipales
Haycientosdeformatos
JPG GIF PNG
CON
PÉRDIDAS
SIN
PÉRDIDAS
SIN
PÉRDIDAS
-Texturas
-Detalles
JPG
JPG
Calidaddeimagen:91%
JPG
Calidaddeimagen:10%
JPG
Elecciónsubjetiva
JPG
JPEG“Baseline”
JPG
JPEGProgresivo
OPTIMIZADO
JPG
Metadatos
MiniaturasEXIF
«Nuncadejesquelarealidadte
arruineunabuenafoto»
MiniaturasEXIF
JPG
http://www.irfanview.com/
JPG
EliminarEXIF
JPG
EliminarEXIF(jhead)
JPG
OptimizarJPEG(jpegtran)
http://www.getpaint.net/
http://www.gimp.org/
Elfuturo
(loqueviene)
JPGAlternativas
WEBP
25-34%
MÁSPEQUEÑO
JPG2000
20%
MÁSPEQUEÑO
https://developers.google.com/speed/webp/
http://www.jpeg.or...
JPG
Procesospor“lotes”
(automatizar)
http://caesium.sourceforge.net/
http://www.xnview.com/en/xnconvert/
http://www.irfanview.com/
OptimizaciónJPEGpor“lotes”
9,08GB
5,06GBOPTIMIZADAS
-Imágenespequeñas
-Animaciones
-Máx.256colores
GIF
-Píxelsdecolor“transparente”
GIF
Estoyaquí
OptimizarGIF(gifsicle)
GIF
GIFAlternativas
APNG
MÁSEFICIENTE
COMPATIBLEPNG
MNG
MENOS
EXTENDIDO
http://www.libpng.org/pub/mng/
https://wiki.mozilla.or...
-Imágenesconcolores“lisos”
-Bocetos,diseños,screenshots
PNG
Gradodecompresión
PNG
0 1 2 3 4 5 6 7 8 9
202KB
66KB
64KB
63KB
62KB
61KB
61KB
61KB
60KB
60KB
Sincompresión Pordefecto
TiposdePNG
PNG24PNG8
Truecolor256colores
PNG32
Truecolor
Canalalfa
+
“Mapa”indexadodecolores
PNG8
PNGIndexadoa256colores
256256
PNG8
60KB
PNGIndexadoa128colores
128128
PNG8
50KB
PNGIndexadoa64colores
6464
PNG8
41KB
PNGIndexadoa32colores
3232
PNG8
32KB
PNGIndexadoa16colores
1616
PNG8
25KB
PNGIndexadoa8colores
88
PNG8
20KB
OptimizarPNG(AdvPNG)
PNG8
OptimizarPNG(OptiPNG)
PNG8
OptimizarPNG(PNGOut)
PNG8
http://bit.ly/rHSWQG
https://code.google.com/p/grafx2/
http://pnggauntlet.com/
PNGOut DeflOptOptiPNG
http://trimage.org/
PNGCrush AdvPNGOptiPNG
jpegoptim
-Colorverdadero
-Ocupa(MÁS)queunJPEG
-Notieneartefactos
PNG24
Canalalfa(transparencialreal)
PNG32
PNG32
PNG32
Canalalfa(transparencialreal)
PNG32
Formatoscontransparencias
66,2KB 56,1KB 189KB 43,5KB
PNG32PNG8 WEBPGIF
PorquelosJPGnotienen
transparencia...¿osí?
http://jim.studt.net/jpeg-alpha/
http://blog.jackadam.net/2010/alpha-jpegs/
htt...
PNGEntrelazado
OPTIMIZADO
AlgoritmoAdam7
http://en.wikipedia.org/wiki/Adam7_algorithm
“Truco”paradiseñadoresweb
http://i-am-fat.org/PNGRotateTrick/
144KB 124KB
PNG24 PNG24
“Truco”paradiseñadoresweb
http://i-am-fat.org/PNGRotateTrick/
CSS
transform:rotate(270deg)
Perdidadecalidadalampliar
SVGPNG
Ampliablesinperdercalidad
SVG
SVG:ArchivosXMLeditables
SVG
http://inkscape.org/
RAW
Fotografíacondatos“puros”
RAW
Ocupanmucho(altaedición)
PXNX3FPEF
RAW
Cadafabricantetieneelsuyo
CRWNEF
DRFRAFORF
Probablemente
Elmejoroptimizador
http://luci.criosweb.ro/riot/
Personalizable
¿Porqué?
JPG
OptimizarJPEG
JPG
OptimizarGIF/PNG
Reduccióndecolores(PNG24,8)
PNG24PNG8 PNG32
Optimizacióndelcolor
Reducirefecto
engradientes
Optimizadoresexternos
OptiPNG PNGOutAdvPNG
DeflOpt PNGquantPNGCrush
PNGrewrite ZopfliPNGnq
¿Es TAN importantela
optimizacióndeimágenes?
PNG24
49,8KB
RIOT
17,4KB
PNG8
17,4KB
PNG8
AdvPNG
PNG8
16,6KB
PNG8
16,6KB x20.000páginasvistas/día
332MB x30días
9,96GB almes 29,88GB almes
119,5GB alaño 358,56GB alaño
720Kpeticiones= 2,88$
357GBtransf. = 40,32$
43,2$
720Kpeticiones= 2,88$
118GBtransf. = 11,52$...
(Yestosóloconel logotipo)
Imaginaahoraelahorrocon
el restodeimágenes
¡Quieromássobreeltema!
http://www.emezeta.com/articulos/16-programas-para-pixel-art
http://www.emezeta.com/articulos/32-editores-graficos-gratuit...
http://www.emezeta.com/articulos/la-guia-definitiva-para-optimizar-imagenes
Optimización de imágenes (mejor calidad y menor tamaño)
Optimización de imágenes (mejor calidad y menor tamaño)
Optimización de imágenes (mejor calidad y menor tamaño)
Upcoming SlideShare
Loading in …5
×

Optimización de imágenes (mejor calidad y menor tamaño)

1,113 views

Published on

Presentación de la conferencia "Optimización de imágenes" impartida en la Tenerife LAN Party 2013 y Curso Bloggers.

Más información aquí:
http://www.emezeta.com/articulos/la-guia-definitiva-para-optimizar-imagenes
http://www.emezeta.com/articulos/productividad-editar-imagenes-con-irfanview
http://www.emezeta.com/articulos/12-aplicaciones-para-optimizar-imagenes
http://www.emezeta.com/articulos/formatos-de-imagen-guia-de-optimizacion
http://www.emezeta.com/articulos/16-programas-para-pixel-art
http://www.emezeta.com/articulos/32-editores-graficos-gratuitos

Published in: Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,113
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Optimización de imágenes (mejor calidad y menor tamaño)

  1. 1. Optimización deImágenes porJ.RománH. @Manz
  2. 2. Usodeimágenes ¿Porquéesimportante?
  3. 3. Desarrolladoresdeaplicaciones Tamañofinaldelaaplicación
  4. 4. Ejemplopráctico JuegoAndroid“SavetheWorld”
  5. 5. Imágenes antes deoptimizar 289KB 305KB
  6. 6. Imágenes después deoptimizar 80KB 91KB
  7. 7. Reduccióntotalde56%delaapp -56%
  8. 8. Diseñadoresweb Velocidaddecargadepágina
  9. 9. 83% 31% 82% 85% 85% 33% 14% 62% 34% 82% PETICIONES TAMAÑO
  10. 10. Hayqueencontrarunequilibrio
  11. 11. Formatosdeimagen ¿Cuáleselmásadecuado?
  12. 12. Formatosprincipales Haycientosdeformatos JPG GIF PNG CON PÉRDIDAS SIN PÉRDIDAS SIN PÉRDIDAS
  13. 13. -Texturas -Detalles JPG
  14. 14. JPG Calidaddeimagen:91%
  15. 15. JPG Calidaddeimagen:10%
  16. 16. JPG Elecciónsubjetiva
  17. 17. JPG JPEG“Baseline”
  18. 18. JPG JPEGProgresivo OPTIMIZADO
  19. 19. JPG Metadatos
  20. 20. MiniaturasEXIF «Nuncadejesquelarealidadte arruineunabuenafoto»
  21. 21. MiniaturasEXIF
  22. 22. JPG http://www.irfanview.com/
  23. 23. JPG EliminarEXIF
  24. 24. JPG EliminarEXIF(jhead)
  25. 25. JPG OptimizarJPEG(jpegtran)
  26. 26. http://www.getpaint.net/
  27. 27. http://www.gimp.org/
  28. 28. Elfuturo (loqueviene)
  29. 29. JPGAlternativas WEBP 25-34% MÁSPEQUEÑO JPG2000 20% MÁSPEQUEÑ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ÁSPEQUEÑO JPGXR 25-50% MÁSPEQUEÑO +CANALALFA
  30. 30. JPG
  31. 31. Procesospor“lotes” (automatizar)
  32. 32. http://caesium.sourceforge.net/
  33. 33. http://www.xnview.com/en/xnconvert/
  34. 34. http://www.irfanview.com/
  35. 35. OptimizaciónJPEGpor“lotes” 9,08GB 5,06GBOPTIMIZADAS
  36. 36. -Imágenespequeñas -Animaciones -Máx.256colores GIF
  37. 37. -Píxelsdecolor“transparente” GIF Estoyaquí
  38. 38. OptimizarGIF(gifsicle) GIF
  39. 39. GIFAlternativas APNG MÁSEFICIENTE COMPATIBLEPNG MNG MENOS EXTENDIDO http://www.libpng.org/pub/mng/ https://wiki.mozilla.org/APNG_Specification (MUYDESCONOCIDAS)
  40. 40. -Imágenesconcolores“lisos” -Bocetos,diseños,screenshots PNG
  41. 41. Gradodecompresión PNG 0 1 2 3 4 5 6 7 8 9 202KB 66KB 64KB 63KB 62KB 61KB 61KB 61KB 60KB 60KB Sincompresión Pordefecto
  42. 42. TiposdePNG PNG24PNG8 Truecolor256colores PNG32 Truecolor Canalalfa +
  43. 43. “Mapa”indexadodecolores PNG8
  44. 44. PNGIndexadoa256colores 256256 PNG8 60KB
  45. 45. PNGIndexadoa128colores 128128 PNG8 50KB
  46. 46. PNGIndexadoa64colores 6464 PNG8 41KB
  47. 47. PNGIndexadoa32colores 3232 PNG8 32KB
  48. 48. PNGIndexadoa16colores 1616 PNG8 25KB
  49. 49. PNGIndexadoa8colores 88 PNG8 20KB
  50. 50. OptimizarPNG(AdvPNG) PNG8
  51. 51. OptimizarPNG(OptiPNG) PNG8
  52. 52. OptimizarPNG(PNGOut) PNG8
  53. 53. http://bit.ly/rHSWQG
  54. 54. https://code.google.com/p/grafx2/
  55. 55. http://pnggauntlet.com/ PNGOut DeflOptOptiPNG
  56. 56. http://trimage.org/ PNGCrush AdvPNGOptiPNG jpegoptim
  57. 57. -Colorverdadero -Ocupa(MÁS)queunJPEG -Notieneartefactos PNG24
  58. 58. Canalalfa(transparencialreal) PNG32
  59. 59. PNG32 PNG32 Canalalfa(transparencialreal) PNG32
  60. 60. Formatoscontransparencias 66,2KB 56,1KB 189KB 43,5KB PNG32PNG8 WEBPGIF
  61. 61. PorquelosJPGnotienen transparencia...¿osí? http://jim.studt.net/jpeg-alpha/ http://blog.jackadam.net/2010/alpha-jpegs/ https://www.webkit.org/blog/181/css-masks/ <CANVAS>
  62. 62. PNGEntrelazado OPTIMIZADO
  63. 63. AlgoritmoAdam7 http://en.wikipedia.org/wiki/Adam7_algorithm
  64. 64. “Truco”paradiseñadoresweb http://i-am-fat.org/PNGRotateTrick/ 144KB 124KB PNG24 PNG24
  65. 65. “Truco”paradiseñadoresweb http://i-am-fat.org/PNGRotateTrick/ CSS transform:rotate(270deg)
  66. 66. Perdidadecalidadalampliar SVGPNG
  67. 67. Ampliablesinperdercalidad SVG
  68. 68. SVG:ArchivosXMLeditables SVG
  69. 69. http://inkscape.org/
  70. 70. RAW Fotografíacondatos“puros”
  71. 71. RAW Ocupanmucho(altaedición)
  72. 72. PXNX3FPEF RAW Cadafabricantetieneelsuyo CRWNEF DRFRAFORF
  73. 73. Probablemente Elmejoroptimizador
  74. 74. http://luci.criosweb.ro/riot/ Personalizable
  75. 75. ¿Porqué?
  76. 76. JPG OptimizarJPEG
  77. 77. JPG OptimizarGIF/PNG
  78. 78. Reduccióndecolores(PNG24,8) PNG24PNG8 PNG32
  79. 79. Optimizacióndelcolor Reducirefecto engradientes
  80. 80. Optimizadoresexternos OptiPNG PNGOutAdvPNG DeflOpt PNGquantPNGCrush PNGrewrite ZopfliPNGnq
  81. 81. ¿Es TAN importantela optimizacióndeimágenes?
  82. 82. PNG24 49,8KB RIOT 17,4KB PNG8
  83. 83. 17,4KB PNG8 AdvPNG PNG8 16,6KB
  84. 84. PNG8 16,6KB x20.000páginasvistas/día 332MB x30días 9,96GB almes 29,88GB almes
  85. 85. 119,5GB alaño 358,56GB alaño 720Kpeticiones= 2,88$ 357GBtransf. = 40,32$ 43,2$ 720Kpeticiones= 2,88$ 118GBtransf. = 11,52$ 14,40$
  86. 86. (Yestosóloconel logotipo) Imaginaahoraelahorrocon el restodeimágenes
  87. 87. ¡Quieromássobreeltema!
  88. 88. http://www.emezeta.com/articulos/16-programas-para-pixel-art http://www.emezeta.com/articulos/32-editores-graficos-gratuitos
  89. 89. http://www.emezeta.com/articulos/la-guia-definitiva-para-optimizar-imagenes

×