Diapositivas usadas en la ponencia "Optimización de imágenes para la web" el 18 de Enero de 2019

1. Optimización de
imágenes para la
web
Carlos Alberto Sobrino Lusquiños
@soyunignorante
www.soyunignorante.es

2. Representación visual de
la apariencia de un
objeto
Imaginario
Real

3. Para compartir una imagen
necesitamos un soporte

4. ¿Cuándo está una imagen
optimizada?

5. PÍXEL

6. Un píxel se define como la menor
unidad homogénea en color que
forma parte de una imagen digital

7. Peter Halasz
http://commons.wikimedia.org/wiki/File:Pixel_geometry_01_Pengo.jpg
Subdividen cada píxel en tres
subpíxeles

8. La resolución de una imagen
digital es su tamaño en
número de píxeles dado en
ancho por alto

9. 4 8 12 16 20 24 28
4 8 12 16 20 24 28
0
100
200
300
400
500
600
700
0
100
200
300
400
500
600
700
Alto
píxeles
320x200
640x480
800x600
1024x768
1280x9602560x19205120x384010240x7680
0
10000000
20000000
30000000
40000000
50000000
60000000
70000000
80000000
90000000
Ancho
Alto
píxeles

10. Cuando
escalamos al doble
una imagen su tamaño
aumenta en cuatro

11. La densidad de píxel
Cuántos píxeles caben en una
pulgada DE PANTALLA

12. Google Nexus 10 300.24 PPI→
Apple iPhone 164,83 PPI→
HTC One 468.7 PPI→
800x600@14” 71,43 PPI→

13. DPI
solo es importante para
impresión

14. Profundidad de color

15. Tipos de imágenes
Mapa de bits Vectoriales

16. Mapa de bits
●
No hay que reconstruirla
●
Permite almacenar gran cantidad de detalle
●
Pierde calidad al redimensionarla
●
Su peso aumenta rápidamente con su tamaño

17. Vectorial
●
Se forma cada vez adaptada al tamaño
necesario
●
Permite escalarla indefinidamente
●
Algunos formatos aceptan scripts que les pueden
aportar propiedades interactivas
●
Sólo es válido para imágenes simples
●
Dependiendo de la aplicación pueden salir
resultados extraños
●
Podría contener scripts maliciosos

18. “Voy a nosédonde, y ya hago
noséqué, porque me pilla casi de
camino”

19. el mejor equilibrio posible entre el
objetivo que queremos y el coste
que tiene

20. ¿Sobre qué podemos actuar?

21. METADATOS
IPTC
XMP
Exif

22. Reducir la profundidad de color

23. Reducir el tamaño o resolución de
la imagen.
¿Quién va a ver tu imagen?
¿En qué dispositivo?

24. Una pantalla 4K
tiene en torno a
8 Megapíxeles
Una camara normalita
hace fotos de 16 Megapíxeles

25. Filtros de imagen
Operaciones
para optimizar
o
conseguir un efecto especial

26. Operaciones que
reducen el tamaño de la
información a guardar
predecir el color de un píxel a partir
de algunos píxeles a su alrededor

27. Indexar los colores

28. Engañar al ojo
Al ojo y al cerebro, se le puede engañar
haciéndole creer que ve algo que no está

29. Comprimir la imagen
aplicar algoritmos de compresión al archivo de imagen
Existen muchos algoritmos de compresión y todos tienen sus
ventajas y sus inconvenientes

30. Formatos más empleados en web
1987 1996¿1992?

31. “sin pérdida de calidad”
hasta 256 colores
Actualmente ha renacido para
llenarnos los móviles de
animaciones chorra

32. Existen varios
algoritmos JPEG
Realiza operaciones sobre la
imagen que acaba en una pérdida
de calidad irrecuperable

33. Cambio de espacio de color
Paso 1.
Crominancia y Luminancia

34. El SUBMUESTREO DEL COLOR
desprecia la información de
color de algunos píxeles

35. Paso 3:
Transformada discreta del coseno
(DCT)
Parecido al submuestreo
pero más refinado

36. Modos disponibles en JPEG

37. Las imágenes JPEG que cargan
de arriba abajo se llaman
Baseline

38. Los JPEG progresivos son de un
2% hasta un 10% más pequeñas
Podrás ver una versión pixeleada de poca
calidad mientras se carga.

39. JPEG es excelente para
Fotografías
Gradientes
Imágenes con muchas
variaciones en el color y en
las que la precisión en
formas, color no sean
importantes

40. Alternativa libre y mejorada para
el formato GIF
diseñado para la transferencia en
redes y visualización en pantallas

41. Un archivo PNG está
dividido en secciones
Un archivo PNG está
dividido en secciones
Un archivo PNG está
dividido en secciones
Críticas: Necesarias
Auxiliares: Permiten extras
y mejoras en el tiempo

42. Profundidad de color
desde 1bit hasta 32 bits
32bits = RGBA

43. PNG-8
VS
PNG-24

44. Compresión
DEFLATE
LZ77 Algoritmo de
Huffman

45. precisión en el color y limpieza en las formas
con niveles distintos de transparencia
¿Para qué es bueno PNG?
Imágenes para pantallas

46. JPG vs PNG
ARTEFACTOS en JPG

47. Hasta aquí...
Fotografías
Iconos y logos
Animaciones para
ser guay

48. alternativa a
JPEG para la
web con mejor
compresión

49. JPEG2000
Transformada de wavelet
Tiende a emborronar
Areas de interes
Patentes + escaso uso = poca difusión
Lossy & Lossyness

50. JPEG XR
Windows Media Photo o HD Photo
Mayor calidad en menor tamaño
Escasa difusión

51. Optimizar la imagen
Se trata de encontrar los valores que
consigan obtener el resultado que
realmente necesitamos de la mejor
forma posible

52. Optimizando JPEG con GIMP

54. Optimizando PNG con GIMP

56. Aplicaciones multiplataforma
Caesium Image Compressor
XnConvert
Trimage image compressor

57. Aplicaciones para Windows
PNGGauntlet
Aplicaciones para MacOS
ImageOptim

58. Aplicaciones Web
Optimizilla
Imagecompressor.com
Squoosh.app

59. Plugins para WordPress
Smush
EWWW Image Optimizer
ShortPixel Image Optimizer

60. Conclusiones finales:
1. Decide qué formato es el adecuado.
2. Ajusta los parámetros que necesitas.
3. Si no te fías, instala un plugin.
4. Mantén una copia del original.

61. Me han dicho algo de
un bar…
FIN