El documento describe 7 formatos y tipos de imágenes comúnmente usados en la web, incluyendo JPG, PNG, SVG, GIF y sprites. También discute herramientas como Twitter Cards, Thinglink y animaciones SVG que permiten agregar contenido interactivo e imágenes animadas a sitios web y redes sociales.

1. Uso avanzado de
imágenes en la
web

2. 1. JPG
2. PNG
3. SVG
4. GIF
5. Sprites
6. Twitter Cards
7. Thinglink
Índice

3. 7 formatos y
tipos de
imágenes

4. Fotos
JPG

5. - Guardar para web
- Jpeg-Mini
- Smush it
- EWWW optimizer
Compresión

6. Ilustraciones
Transparencias
PNG

7. - Paleta de colores
a. PNG-24
b. PNG-8
Compresión

8. Vectorial
Escalable – responsive
Todas las resoluciones
SVG

9. Código Web
Ventajas
Desventajas
Cómo es un SVG

10. Código Web
Ventajas y Desventajas
SVG animado

11. • Tomate animado
• sistrix.es/
• sustainability.bam.co.uk/
• makeyourmoneymatter.org/
• fluger.com/
• snapsvg.io/
• Adobe Edge Animation
SVG animado

12. Animado
Imágenes + tiempo
GIF

13. - Youtube
- imgur.com/vidgif
- imgflip.com/gifgenerator
- Buscador: tumblr
Herramienta

14. Ilustraciones

15. Infografías animadas

17. Qué redes sociales
- Twitter
- Google+
- Tumblr
- ¿Facebook próximo?

18. Conjuntos de imágenes
Png y Css
Menos conexiones
spritepad.wearekiss.com/
Sprites

19. Posts
Páginas
Twitter Cards

20. Herramienta
- JM Twitter Card
- Tweets individuales

21. Clicables con contenido
Imágenes del futuro
ThingLink

22. ¿Qué permite?
- Youtube
- Facebook
- Twitter
- Soundcloud
- Wikipedia
- Amazon
- Imágenes
- Mapas

23. Ejemplos

24. Ejemplos

25. Ejemplos

26. ¡Muchas gracias!
Bruno Vázquez-Dodero