Tipo y uso de imágenes en la web 

Uno de las principales decisiones a la hora de incluir gráficos en tu web será elegir el formato correcto para cada tipo de imagen de manera que logres una correcta relación entre la calidad visual de la misma y su peso en Kb.

Cuando hablamos de formatos de imagen en la web, tenemos que limitarnos a 3, ya que son los únicos soportados por los navegadores de internet.

GIF (Graphic Image File Format).

Sus características son:

• Número de colores: de 2 a 256 de una paleta de 24 bits.
• Formato de compresión sin pérdida basado en el algoritmo LZW.
• Carga progresiva en el navegador.
• Máscara de trasparencia de 1 bit.
• Permite la animación simple.

Es el formato más adecuado para aquellas imágenes sencillas, de formas simples y en las que no existe un elevado número de colores.

JPEG (Joint Photographic Experts Group).

Fue diseñado para la compresión de imágenes fotográficas, basándose en el hecho de que el ojo humano no es perfecto y no es capaz de captar toda la información que se puede almacenar el una imagen de 24 bits.
El formato JPEG intenta eliminar la información que el ojo humano no es capaz de distinguir, por eso se dice que posee un formato de compresión con pérdida, porque elimina información.

Las características de este formato son:

• Número de colores: 24 bits color o 8 bits B/N
• Elevado grado de posibilidad de compresión.
• Formato de compresión con pérdida.
• No permite trasparencia, ni canal alfa.
• No permite la animación.

Por regla general, es el más indicado para aquellas imágenes que son fotografias.
PNG (Portable Network Graphics).
Proporciona un formato compresión de imágenes sin pérdida.

Las características de este formato son:

• Color indexado hasta 256 colores y TrueColor hasta 48 bits por pixel.
• Mayor compresión que el formato GIF (+10%)
• Compresión sin pérdida.
• Canal alfa. (Transparencia variable)
• No permite animación.

El más adecuado para imágenes de elementos renderizados, ya que se logran unos degrarados muy suaves y una buena definición de las lineas.


A continuación vamos a ver algunas pruebas para que puedas ver como afecta a cada tipo de imagen el formato de exportación elegido tanto en calidad de la imágen como en peso: 

El caso de una fotografía digital.
JPG	GIF	PNG
Jpg con 20% de compresión. 11Kb	Gif con 256 colores. 22 Kb	Png 24 bits. 68 Kb
Vemos que para obtener una calidad similar los tamaños de la imágenes son muy diferentes, en este caso, lo más adecuado será optar por el formato JPG.

El caso de una imagen simple
JPG	GIF	PNG
Jpg con 20% de compresión. 13Kb	Gif con 256 colores. 5 Kb	Png 24 bits. 8 Kb
En el caso de una imágen simple (con pocos coleres) vemos que el formato más adecuado es el .gif, ya que aunque la calidad de la imágen sea idéntica al png, el peso de la imágen es considerablemente inferior.

El caso de una imagen renderizada
JPG	GIF	PNG
Jpg con 20% de compresión. 6Kb	Gif con 256 colores. 13 Kb	Png 24 bits. 41 Kb
El formato png es el que más calidad nos ofrece, sin embargo, la opción Jpg parece la más adecuada por su relación calidad peso, será una decisión que debermos tomar sobre todo en función de la importancia de la imágen o el detalle que sea necesario mostrar. Para ver mejor la diferencia en la calidad de las imágenes a continuación os muestro un detalle de ampliación realizada sobre las imágenes anteriores.

JPG	GIF	PNG
Jpg con 20% de compresión. 4 Kb	Gif con 256 colores. 10 Kb	Png 24 bits. 27 Kb
En la ampliación, podemos ver como el formato PNG mantiene mucha más calidad que el resto, esto sucecerá siempre que trabajemos con imágenes con degradados muy suaves y líneas muy bien definidas.

Fuente: http://www.guiawebmaster.com

¿Por qué es importante optimizar las imágenes?

Las razones son muchas pero nos quedamos con las tres más importantes:

• SEO:  uno de los factores que contribuye al posicionamiento es la velocidad de la carga de la página o dicho de otra manera, una página cuya carga en el navegador sea lenta, tendrá menos posibilidades de posicionar correctamente. Las imágenes pesadas (muchos KB o MB) hacen que la velocidad de carga de una página se vea ralentizada.

• Conversión: Una página cuya estructura y la combinación de imágenes y textos sea organizada, tendrá más posibilidades de atraer, retener y "convertir" en clientes a las visitas.

• Estética: las imágenes  de pésima calidad hacen de todo menos transferir una imagen seria y profesional de nuestro negocio.

Calidad de las imágenes

¿Puedes ver la diferencia entre estas dos imágenes de abajo? A simple vista no hay ninguna diferencia, pero sin embargo una está optimizada para la web y la otra no. ¿Quieres saber cuál es la diferencia?

RESOLUCIÓN

ppp significa píxeles por pulgadas (también puedes verlo en inglés como dpi -dot per inch-o ppi -pixels per inch). Cuanto mayor sea el número de pp, mayor será la calidad, pero eso servirá para la impresión de una imagen. Por ejemplo, para una página web, 72 pp será suficiente; mientras que para un imagen de un periódico se necesita al menos 300 pp.

Cómo exportar una imagen en Photoshop

Se usa la opción: Guardar para web, y en ese momento se selecciona el formato y según el archivo, muestra las posibilidades de compresión de cada uno. Ejemplo:

1- primero se selecciona el formato. 

2- luego se definen los ajustes de compresión. 

3- se puede modificar el tamaño del archivo final. 

4- indica el peso del archivo optimizado

Fuente: 

http://www.laurachuburu.com.ar


Tamaños de pantalla
Medida de un sitio web es de 940 a 1000 pixeles de ancho para el área de contenido de la página web.

En resumen quedaría así:

Dispositivo	Resolución
Versión de escritorio (base)	940 a 1000 px
Versión para tabletas	940 a 780 px
Versión para teléfonos	780 px