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

1. Optimización
deImágenes
porJ.RománH.
@Manz

3. Usodeimágenes
¿Porquéesimportante?

5. Desarrolladoresdeaplicaciones
Tamañofinaldelaaplicación

6. Ejemplopráctico
JuegoAndroid“SavetheWorld”

7. Imágenes antes deoptimizar
289KB 305KB

8. Imágenes después deoptimizar
80KB 91KB

9. Reduccióntotalde56%delaapp
-56%

10. Diseñadoresweb
Velocidaddecargadepágina

11. 83%
31%
82%
85%
85%
33%
14%
62%
34%
82%
PETICIONES TAMAÑO

12. Hayqueencontrarunequilibrio

13. Formatosdeimagen
¿Cuáleselmásadecuado?

14. Formatosprincipales
Haycientosdeformatos
JPG GIF PNG
CON
PÉRDIDAS
SIN
PÉRDIDAS
SIN
PÉRDIDAS

15. -Texturas
-Detalles
JPG

16. JPG
Calidaddeimagen:91%

17. JPG
Calidaddeimagen:10%

18. JPG
Elecciónsubjetiva

19. JPG
JPEG“Baseline”

20. JPG
JPEGProgresivo
OPTIMIZADO

21. JPG
Metadatos

22. MiniaturasEXIF
«Nuncadejesquelarealidadte
arruineunabuenafoto»

23. MiniaturasEXIF

24. JPG
http://www.irfanview.com/

25. JPG
EliminarEXIF

26. JPG
EliminarEXIF(jhead)

27. JPG
OptimizarJPEG(jpegtran)

28. http://www.getpaint.net/

29. http://www.gimp.org/

30. Elfuturo
(loqueviene)

31. 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

32. JPG

33. Procesospor“lotes”
(automatizar)

34. http://caesium.sourceforge.net/

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

36. http://www.irfanview.com/

37. OptimizaciónJPEGpor“lotes”
9,08GB
5,06GBOPTIMIZADAS

38. -Imágenespequeñas
-Animaciones
-Máx.256colores
GIF

39. -Píxelsdecolor“transparente”
GIF
Estoyaquí

40. OptimizarGIF(gifsicle)
GIF

41. GIFAlternativas
APNG
MÁSEFICIENTE
COMPATIBLEPNG
MNG
MENOS
EXTENDIDO
http://www.libpng.org/pub/mng/
https://wiki.mozilla.org/APNG_Specification
(MUYDESCONOCIDAS)

42. -Imágenesconcolores“lisos”
-Bocetos,diseños,screenshots
PNG

43. 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

44. TiposdePNG
PNG24PNG8
Truecolor256colores
PNG32
Truecolor
Canalalfa
+

45. “Mapa”indexadodecolores
PNG8

46. PNGIndexadoa256colores
256256
PNG8
60KB

47. PNGIndexadoa128colores
128128
PNG8
50KB

48. PNGIndexadoa64colores
6464
PNG8
41KB

49. PNGIndexadoa32colores
3232
PNG8
32KB

50. PNGIndexadoa16colores
1616
PNG8
25KB

51. PNGIndexadoa8colores
88
PNG8
20KB

52. OptimizarPNG(AdvPNG)
PNG8

53. OptimizarPNG(OptiPNG)
PNG8

54. OptimizarPNG(PNGOut)
PNG8

55. http://bit.ly/rHSWQG

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

57. http://pnggauntlet.com/
PNGOut DeflOptOptiPNG

58. http://trimage.org/
PNGCrush AdvPNGOptiPNG
jpegoptim

59. -Colorverdadero
-Ocupa(MÁS)queunJPEG
-Notieneartefactos
PNG24

60. Canalalfa(transparencialreal)
PNG32

61. PNG32
PNG32
Canalalfa(transparencialreal)
PNG32

62. Formatoscontransparencias
66,2KB 56,1KB 189KB 43,5KB
PNG32PNG8 WEBPGIF

63. 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>

64. PNGEntrelazado
OPTIMIZADO

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

66. “Truco”paradiseñadoresweb
http://i-am-fat.org/PNGRotateTrick/
144KB 124KB
PNG24 PNG24

67. “Truco”paradiseñadoresweb
http://i-am-fat.org/PNGRotateTrick/
CSS
transform:rotate(270deg)

68. Perdidadecalidadalampliar
SVGPNG

69. Ampliablesinperdercalidad
SVG

70. SVG:ArchivosXMLeditables
SVG

71. http://inkscape.org/

72. RAW
Fotografíacondatos“puros”

73. RAW
Ocupanmucho(altaedición)

74. PXNX3FPEF
RAW
Cadafabricantetieneelsuyo
CRWNEF
DRFRAFORF

75. Probablemente
Elmejoroptimizador

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

77. ¿Porqué?

78. JPG
OptimizarJPEG

79. JPG
OptimizarGIF/PNG

80. Reduccióndecolores(PNG24,8)
PNG24PNG8 PNG32

81. Optimizacióndelcolor
Reducirefecto
engradientes

82. Optimizadoresexternos
OptiPNG PNGOutAdvPNG
DeflOpt PNGquantPNGCrush
PNGrewrite ZopfliPNGnq

83. ¿Es TAN importantela
optimizacióndeimágenes?

84. PNG24
49,8KB
RIOT
17,4KB
PNG8

85. 17,4KB
PNG8
AdvPNG
PNG8
16,6KB

86. PNG8
16,6KB x20.000páginasvistas/día
332MB x30días
9,96GB almes 29,88GB almes

87. 119,5GB alaño 358,56GB alaño
720Kpeticiones= 2,88$
357GBtransf. = 40,32$
43,2$
720Kpeticiones= 2,88$
118GBtransf. = 11,52$
14,40$

88. (Yestosóloconel logotipo)
Imaginaahoraelahorrocon
el restodeimágenes

89. ¡Quieromássobreeltema!

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

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