optimización de imágenes para internet: web, email, blogs

optimización de imágenes para internet:
web, email, blogs
¿qué es optimizar una imagen?
encontrar la mejor relación entre
-calidad de visualización
-peso de la imagen
-espera del usuario
¿cómo optimizar?
-tamaño en pixeles
-peso en kb
-nivel de compresión del formato elegido
-recursos para distraer, justificar y/o atenuar la espera
optimización de imágenes para internet:
web, email, blogs
de que depende ...
la calidad de visualización:
cantidad de pixeles (resolución)
cantidad de colores (modo de color:RGB, escala de grises, indexado)
formato de almacenamiento (con o sin pérdida de información)
¿cual es la cantidad de pixeles correcta (o resolución*)
para internet?
soporte=pantalla
resolución de pantalla= 72 a 96 dpi
800x600 / 1024x768 / 1280x1024
en la pantalla importan los PIXELES totales y el valor de
referencia es la resolución de pantalla que usan los destinatarios
de mi imagen (no deberían ser mayores a ésta menos la interfase
del programa: navegador o correo electrónico)
optimización de imágenes para internet:
web, email, blogs
resoluciones más usadas por los usuarios de internet promedio
800x600 / 1024x768 / 1280x1024*
resolución de pantalla - la interfase del programa
= espacio útil de pantalla
800x600 – navegador= 760x420 px
1024x768 – navegador= 955x600 px
800x600 - correo electrónico (variable)=aprox. 450x350 px
1024x768 – correo electrónico=aprox. 600x550 px
como criterio, cuando tenemos dudas, es preferible
usar el tamaño más chico, porque es el más
compatible y será el más liviano en Kb para descargar.
optimización de imágenes para internet:
web, email, blogs
de que depende ...
la calidad de visualización:
cantidad de pixeles (resolución)
cantidad de colores
modo de color:
RGB o color verdadero (16700000 colores)
3 canales de 8 bits (R,G,B)
escala de grises: para imágenes en blanco y negro
256 valores de grises
color indexado: 8 bits de profundidad de color
hasta 256 colores (para web suele usarse la paleta
WebSafe de 240 colores)
No se usa CMYK
optimización de imágenes para internet:
web, email, blogs
¿cual usar?
a mayor profundidad de color=mas tonos, mayor realismo
y mayor peso del archivo
RGB=fotos o imágenes con muchos matices
escala de grises= imágenes monoscromáticas de todo tipo
color indexado= imágenes en pocos colores planos y planos
(mapas, planos, logos, tipografía)
optimización de imágenes para internet:
web, email, blogs
¿cual usar?
a mayor profundidad de color=mas tonos, mayor realismo
y mayor peso del archivo
RGB=fotos o imágenes con muchos matices
rgb
color indexado
optimización de imágenes para internet:
web, email, blogs
para imágenes monocromáticas: escala de grises (si es blanco
y
negro) de todo tipo: de tono continuo (fotografías o imágenes
con muchos matices) o imágenes gráficas (logos, dibujos de
línea, etc.)
optimización de imágenes para internet:
web, email, blogs
para imágenes en color de origen vectorial: pocos colores
planos sólidos como logos, mapas, planos=color indexado
optimización de imágenes para internet:
web, email, blogs
¿qué formato de archivo usar?
para internet sólo podemos usar 3 formatos:
PNG
JPG
GIF
todos los demás (TIF; PSD; XCF;etc.) NO funcionan
¿cual elegir cuando grabamos una imagen?
depende del contenido de la imagen:
imágenes de tono continuo: JPG
imágenes en color de origen vectorial: PNG o GIF
Imágenes monocromáticas: ver en cada caso. Si contiene
gráficos o tipografía: PNG o GIF
optimización de imágenes para internet:
web, email, blogs
¿por qué?
PNG: soporta RGB y color indexado/escala de grises +
transparencias de 1 y 8 bits respectivamente
Es un formato de compresión sin pérdida de información
por lo que en RGB genera archivos pesados, pero de alta calidad.
JPG: soporta sólo RGB. NO soporta transparencias.
Es un formato de compresión con pérdida de información,
por lo que genera archivos muy pequeños.
GIF: NO soporta RGB, sólo color indexado/escala de grises.
Soporta transparencias de 1 bit, poco útiles en general.
Permite animaciones cuadro a cuadro.
Es un formato que comprime sin pérdida de información, por lo que
dentro de sus limitaciones de color, tiene gran definición.
Es ligeramente más pesado que su equivalente en PNG8, y está
patentado, por lo que se recomienda no usarlo.
optimización de imágenes para internet:
web, email, blogs
optimizar era:
encontrar la mejor relación entre:
calidad de imagen
tamaño en pixeles
peso en KB
el peso en kb es todavía, crítico en internet.
Dos razones básicas:
- la velocidad de transmisión de la información de las redes
que deviene en ...
- la espera del usuario
optimización de imágenes para internet:
web, email, blogs
los tiempos de espera informáticos son críticos:
en un sistema local
1” máximo tiempo de espera de respuesta del OS o aplicación
en la red
10”
pasados esos tiempos, el usuario tiende a pensar que algo no
funciona bien, si ABSOLUTAMENTE nada sucedió.
Así, los OS y también los programas incorporan algunos indicadores
de actividad de manera que el usuario ESPERE, p.e. los cursores.
optimización de imágenes para internet:
web, email, blogs
recursos para distraer al usuario o indicarle que debe esperar:
usar JPG progresivo
usar PNG entrelazado
dividir la imagen en pequeños pedacitos (slicing o taselado)
mostrar miniaturas y luego ampliarlas o hacer zooms
si la calidad de la imagen es MUY importante, ofrecer una imagen
para visualizar y otra para descargar en alta resolución/calidad
anunciar claramente que lo que se está descargando demorará
X tiempo con una conexión X
nunca usar imágenes o películas flash para mostrar texto
usar recursos narrativos para entretener al usuario
mientras espera: fragmentar la información en bloques pequeños
o mostrar mientras cargan las imágenes, etc.