Transcript Optimizacion de imágenes

+
Optimización de imágenes
para la Web
Direcció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-infographics1764.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_09
1409.html

http://www.nytimes.com/2012/03/01/technology/impatient-webusers-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ón
Photoshop
+
Proceso de optimización
Gimp
+
Medidas y peso de imágenes

Photoshop

925 x 320 px
233x320 px
52.9kb
26.3Kb
Gimp
925 x 320 px
26.5kb
233x320 px
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 Web
Dirección General de Tecnología de Información