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

Tamaño: px

Comenzar la demostración a partir de la página:

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

Nicolás Juárez Vázquez
hace 7 años
Vistas:

1 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

2 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)

3 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.

5 de que depende... la calidad de visualización: cantidad de pixeles (resolución) cantidad de colores modo de color: RGB o color verdadero ( 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

6 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)

7 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

8 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.)

9 para imágenes en color de origen vectorial: pocos colores planos sólidos como logos, mapas, planos=color indexado

10 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

11 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.

12 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

13 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.

14 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.

Documentos relacionados

JAIRO PÉREZ ALONSO 4º GRADO TEORÍA DE LA IMAGEN

JAIRO PÉREZ ALONSO 4º GRADO TEORÍA DE LA IMAGEN 1 RESOLUCIÓN DE COLOR La resolución es la cantidad de nitidez que muestra la imagen y alude al número de puntos, líneas o píxeles en cada pulgada cuadrada.