+

Optimización de imágenes para la WebDirección General de Tecnología de Información

+Introducción

+Introducción

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

+

¿Por qué optimizar mis imágenes?

+¿Por qué optimizar mis imágenes?

¿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_091409.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

+

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

+¿Qué impacto tiene en mis usuarios la optimización de imágenes de mi sitio? 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/

+

¿Cómo puedo optimizar mis imágenes?

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

Utilizando programas como Adobe Photoshop o GIMP

Utilizando herramientas en línea como 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

+Portal UV

+Proceso de optimizaciónPhotoshop

+Proceso de optimizaciónGimp

+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

+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

+

Optimización de imágenes para la WebDirección General de Tecnología de Información