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

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

Transcript

1. Optimización de Imágenes por J. Román H. @Manz
3. Uso de imágenes ¿Por qué es importante?
5. Desarrolladores de aplicaciones Tamaño final de la aplicación
6. Ejemplo práctico Juego Android “Save the World”
7. Imágenes antes de optimizar 289KB 305KB
8. Imágenes después de optimizar 80KB 91KB
9. Reducción total de 56% de la app -56%
10. Diseñadores web Velocidad de carga de página
11. 83% 31% 82% 85% 85% 33% 14% 62% 34% 82% PETICIONES TAMAÑO
12. Hay que encontrar un equilibrio
13. Formatos de imagen ¿Cuál es el más adecuado?
14. Formatos principales Hay cientos de formatos JPG GIF PNG CON PÉRDIDAS SIN PÉRDIDAS SIN PÉRDIDAS
15. - Texturas - Detalles JPG
16. JPG Calidad de imagen: 91%
17. JPG Calidad de imagen: 10%
18. JPG Elección subjetiva
19. JPG JPEG “Baseline”
20. JPG JPEG Progresivo OPTIMIZADO
21. JPG Metadatos
22. Miniaturas EXIF «Nunca dejes que la realidad te arruine una buena foto»
23. Miniaturas EXIF
24. JPG http://www.irfanview.com/
25. JPG Eliminar EXIF
26. JPG Eliminar EXIF (jhead)
27. JPG Optimizar JPEG (jpegtran)
28. http://www.getpaint.net/
29. http://www.gimp.org/
30. El futuro (lo que viene)
31. JPG Alternativas 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
32. JPG
33. Procesos por “lotes” (automatizar)
34. http://caesium.sourceforge.net/
35. http://www.xnview.com/en/xnconvert/
36. http://www.irfanview.com/
37. Optimización JPEG por “lotes” 9,08GB 5,06GB OPTIMIZADAS
38. - Imágenes pequeñas - Animaciones - Máx. 256 colores GIF
39. - Píxels de color “transparente” GIF Estoy aquí
40. Optimizar GIF (gifsicle) GIF
41. GIF Alternativas APNG MÁS EFICIENTE COMPATIBLE PNG MNG MENOS EXTENDIDO http://www.libpng.org/pub/mng/ https://wiki.mozilla.org/APNG_Specification (MUY DESCONOCIDAS)
42. - Imágenes con colores “lisos” - Bocetos, diseños, screenshots PNG
43. Grado de compresión PNG 0 1 2 3 4 5 6 7 8 9 202KB 66KB 64KB 63KB 62KB 61KB 61KB 61KB 60KB 60KB Sin compresión Por defecto
44. Tipos de PNG PNG24 PNG8 True color 256 colores PNG32 True color Canal alfa +
45. “Mapa” indexado de colores PNG8
46. PNG Indexado a 256 colores 256 256 PNG8 60KB
47. PNG Indexado a 128 colores 128 128 PNG8 50KB
48. PNG Indexado a 64 colores 64 64 PNG8 41KB
49. PNG Indexado a 32 colores 32 32 PNG8 32KB
50. PNG Indexado a 16 colores 16 16 PNG8 25KB
51. PNG Indexado a 8 colores 8 8 PNG8 20KB
52. Optimizar PNG (AdvPNG) PNG8
53. Optimizar PNG (OptiPNG) PNG8
54. Optimizar PNG (PNGOut) PNG8
55. http://bit.ly/rHSWQG
56. https://code.google.com/p/grafx2/
57. http://pnggauntlet.com/ PNGOut DeflOpt OptiPNG
58. http://trimage.org/ PNGCrush AdvPNG OptiPNG jpegoptim
59. - Color verdadero - Ocupa (MÁS) que un JPEG - No tiene artefactos PNG24
60. Canal alfa (transparencial real) PNG32
61. PNG32 PNG32 Canal alfa (transparencial real) PNG32
62. Formatos con transparencias 66,2KB 56,1KB 189KB 43,5KB PNG32 PNG8 WEBP GIF
63. 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>
64. PNG Entrelazado OPTIMIZADO
65. Algoritmo Adam7 http://en.wikipedia.org/wiki/Adam7_algorithm
66. “Truco” para diseñadores web http://i-am-fat.org/PNGRotateTrick/ 144KB 124KB PNG24 PNG24
67. “Truco” para diseñadores web http://i-am-fat.org/PNGRotateTrick/ CSS transform:rotate(270deg)
68. Perdida de calidad al ampliar SVG PNG
69. Ampliable sin perder calidad SVG
70. SVG: Archivos XML editables SVG
71. http://inkscape.org/
72. RAW Fotografía con datos “puros”
73. RAW Ocupan mucho (alta edición)
74. PXN X3F PEF RAW Cada fabricante tiene el suyo CRW NEF DRF RAF ORF
75. Probablemente El mejor optimizador
76. http://luci.criosweb.ro/riot/ Personalizable
77. ¿Por qué?
78. JPG Optimizar JPEG
79. JPG Optimizar GIF/PNG
80. Reducción de colores (PNG24, 8) PNG24 PNG8 PNG32
81. Optimización del color Reducir efecto en gradientes
82. Optimizadores externos OptiPNG PNGOut AdvPNG DeflOpt PNGquant PNGCrush PNGrewrite Zopfli PNGnq
83. ¿Es TAN importante la optimización de imágenes?
84. PNG24 49,8KB RIOT 17,4KB PNG8
85. 17,4KB PNG8 AdvPNG PNG8 16,6KB
86. PNG8 16,6KB x 20.000 páginas vistas/día 332MB x 30 días 9,96GB al mes 29,88GB al mes
87. 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$
88. (Y esto sólo con el logotipo) Imagina ahora el ahorro con el resto de imágenes
89. ¡Quiero más sobre el tema!
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