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

Slide 1

Slide 1 text

Optimización de Imágenes por J. Román H. @Manz

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Desarrolladores de aplicaciones Tamaño final de la aplicación

Slide 6

Slide 6 text

Ejemplo práctico Juego Android “Save the World”

Slide 7

Slide 7 text

Imágenes antes de optimizar 289KB 305KB

Slide 8

Slide 8 text

Imágenes después de optimizar 80KB 91KB

Slide 9

Slide 9 text

Reducción total de 56% de la app -56%

Slide 10

Slide 10 text

Diseñadores web Velocidad de carga de página

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Hay que encontrar un equilibrio

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Formatos principales Hay cientos de formatos JPG GIF PNG CON PÉRDIDAS SIN PÉRDIDAS SIN PÉRDIDAS

Slide 15

Slide 15 text

- Texturas - Detalles JPG

Slide 16

Slide 16 text

JPG Calidad de imagen: 91%

Slide 17

Slide 17 text

JPG Calidad de imagen: 10%

Slide 18

Slide 18 text

JPG Elección subjetiva

Slide 19

Slide 19 text

JPG JPEG “Baseline”

Slide 20

Slide 20 text

JPG JPEG Progresivo OPTIMIZADO

Slide 21

Slide 21 text

JPG Metadatos

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Miniaturas EXIF

Slide 24

Slide 24 text

JPG http://www.irfanview.com/

Slide 25

Slide 25 text

JPG Eliminar EXIF

Slide 26

Slide 26 text

JPG Eliminar EXIF (jhead)

Slide 27

Slide 27 text

JPG Optimizar JPEG (jpegtran)

Slide 28

Slide 28 text

http://www.getpaint.net/

Slide 29

Slide 29 text

http://www.gimp.org/

Slide 30

Slide 30 text

El futuro (lo que viene)

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

JPG

Slide 33

Slide 33 text

Procesos por “lotes” (automatizar)

Slide 34

Slide 34 text

http://caesium.sourceforge.net/

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

http://www.irfanview.com/

Slide 37

Slide 37 text

Optimización JPEG por “lotes” 9,08GB 5,06GB OPTIMIZADAS

Slide 38

Slide 38 text

- Imágenes pequeñas - Animaciones - Máx. 256 colores GIF

Slide 39

Slide 39 text

- Píxels de color “transparente” GIF Estoy aquí

Slide 40

Slide 40 text

Optimizar GIF (gifsicle) GIF

Slide 41

Slide 41 text

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)

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Tipos de PNG PNG24 PNG8 True color 256 colores PNG32 True color Canal alfa +

Slide 45

Slide 45 text

“Mapa” indexado de colores PNG8

Slide 46

Slide 46 text

PNG Indexado a 256 colores 256 256 PNG8 60KB

Slide 47

Slide 47 text

PNG Indexado a 128 colores 128 128 PNG8 50KB

Slide 48

Slide 48 text

PNG Indexado a 64 colores 64 64 PNG8 41KB

Slide 49

Slide 49 text

PNG Indexado a 32 colores 32 32 PNG8 32KB

Slide 50

Slide 50 text

PNG Indexado a 16 colores 16 16 PNG8 25KB

Slide 51

Slide 51 text

PNG Indexado a 8 colores 8 8 PNG8 20KB

Slide 52

Slide 52 text

Optimizar PNG (AdvPNG) PNG8

Slide 53

Slide 53 text

Optimizar PNG (OptiPNG) PNG8

Slide 54

Slide 54 text

Optimizar PNG (PNGOut) PNG8

Slide 55

Slide 55 text

http://bit.ly/rHSWQG

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

http://pnggauntlet.com/ PNGOut DeflOpt OptiPNG

Slide 58

Slide 58 text

http://trimage.org/ PNGCrush AdvPNG OptiPNG jpegoptim

Slide 59

Slide 59 text

- Color verdadero - Ocupa (MÁS) que un JPEG - No tiene artefactos PNG24

Slide 60

Slide 60 text

Canal alfa (transparencial real) PNG32

Slide 61

Slide 61 text

PNG32 PNG32 Canal alfa (transparencial real) PNG32

Slide 62

Slide 62 text

Formatos con transparencias 66,2KB 56,1KB 189KB 43,5KB PNG32 PNG8 WEBP GIF

Slide 63

Slide 63 text

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/

Slide 64

Slide 64 text

PNG Entrelazado OPTIMIZADO

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

“Truco” para diseñadores web http://i-am-fat.org/PNGRotateTrick/ 144KB 124KB PNG24 PNG24

Slide 67

Slide 67 text

“Truco” para diseñadores web http://i-am-fat.org/PNGRotateTrick/ CSS transform:rotate(270deg)

Slide 68

Slide 68 text

Perdida de calidad al ampliar SVG PNG

Slide 69

Slide 69 text

Ampliable sin perder calidad SVG

Slide 70

Slide 70 text

SVG: Archivos XML editables SVG

Slide 71

Slide 71 text

http://inkscape.org/

Slide 72

Slide 72 text

RAW Fotografía con datos “puros”

Slide 73

Slide 73 text

RAW Ocupan mucho (alta edición)

Slide 74

Slide 74 text

PXN X3F PEF RAW Cada fabricante tiene el suyo CRW NEF DRF RAF ORF

Slide 75

Slide 75 text

Probablemente El mejor optimizador

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

¿Por qué?

Slide 78

Slide 78 text

JPG Optimizar JPEG

Slide 79

Slide 79 text

JPG Optimizar GIF/PNG

Slide 80

Slide 80 text

Reducción de colores (PNG24, 8) PNG24 PNG8 PNG32

Slide 81

Slide 81 text

Optimización del color Reducir efecto en gradientes

Slide 82

Slide 82 text

Optimizadores externos OptiPNG PNGOut AdvPNG DeflOpt PNGquant PNGCrush PNGrewrite Zopfli PNGnq

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

PNG24 49,8KB RIOT 17,4KB PNG8

Slide 85

Slide 85 text

17,4KB PNG8 AdvPNG PNG8 16,6KB

Slide 86

Slide 86 text

PNG8 16,6KB x 20.000 páginas vistas/día 332MB x 30 días 9,96GB al mes 29,88GB al mes

Slide 87

Slide 87 text

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$

Slide 88

Slide 88 text

(Y esto sólo con el logotipo) Imagina ahora el ahorro con el resto de imágenes

Slide 89

Slide 89 text

¡Quiero más sobre el tema!

Slide 90

Slide 90 text

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