+ Optimización de imágenes para la Web Dirección General de Tecnología de Información.

Presentación del tema: "+ Optimización de imágenes para la Web Dirección General de Tecnología de Información."— Transcripción de la presentación:

1 + Optimización de imágenes para la Web Dirección General de Tecnología de Información

2 + Introducción

3 + Creación de una jerarquía visual clara “Lo más importante es lo más prominente” División en zonas claramente delimitadas Se aprovechan las convenciones de lectura La Web es visual, 40% de las personas que navegan en Internet, responden mejor a la información visual que al texto http://www.webmarketinggroup.co.uk/Blog/why-every-seo-strategy-needs-infographics- 1764.aspx http://www.webmarketinggroup.co.uk/Blog/why-every-seo-strategy-needs-infographics- 1764.aspx

4 + ¿Por qué optimizar mis imágenes?

5 + ¿Cuánto tiempo espera el usuario a que cargue la página antes de abandonarla? = 2 segundos http://www.akamai.com/html/about/press/releases/2009/press_09 1409.html http://www.akamai.com/html/about/press/releases/2009/press_09 1409.html http://www.nytimes.com/2012/03/01/technology/impatient-web- users-flee-slow-loading-sites.html http://www.nytimes.com/2012/03/01/technology/impatient-web- users-flee-slow-loading-sites.html Se contribuye a la usabilidad del sitio y se maximiza la experiencia de uso de las personas Se apoya el ahorro de ancho de banda

6 + ¿Qué impacto tiene en mis usuarios la optimización de imágenes de mi sitio?

7 + Sitios Web lentos generan una percepción de credibilidad baja en los usuarios Aplicaciones lentas generan frustración en las personas Sitios Web rápidos tienen una tasa alta de conversión por parte de usuarios Sitios Web rápidos generan una percepción de calidad, despiertan mayor interés y atracción por parte de los usuarios http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

8 + ¿Cómo puedo optimizar mis imágenes?

9 + Utilizando programas como Adobe Photoshop o GIMP Utilizando herramientas en línea como http://www.splashup.com/splashup/ http://pixlr.com/editor/?loc=es http://www.splashup.com/splashup/ http://pixlr.com/editor/?loc=es Configuración de imágenes recomendada 72 dpi, óptimo para Web Calidad a 60% (revisar la pérdida de calidad) Utilizar formatos adecuados de imagen lossless vs lossy(.jpg,.png,.gif) Se recomienda el guardado progresivo de imágenes para la Web

10 + Portal UV

11 + Proceso de optimización Photoshop

12 + Proceso de optimización Gimp

13 + Medidas y peso de imágenes Photoshop 925 x 320 px 233x320 px 52.9kb 26.3Kb Gimp 925 x 320 px 233x320 px 26.5kb 14.3Kb

14 + Recomendaciones No bajar imágenes o fotografías de Internet Tomar fotografías con cámaras de buena resolución Observar que la foto o imagen este enfocada, con buena luz y a cuadro Verificar que la imagen no tenga alguna marca registrada Que la imagen logre el objetivo deseado cuidando la composición

15 + Optimización de imágenes para la Web Dirección General de Tecnología de Información