Tamaño de las imagenes y calidad

¿Qué tamaño deben tener las imágenes para tener buena calidad?

El error que solemos tener casi siempre es que cuando hablamos del tamaño de las imágenes y la calidad de las mismas siempre pensamos en la calidad de la fotografía, pero solemos caer en un error muy normal.

Para mostrar imágenes en una página web no es necesario que tengan tanta definición como la que necesitamos tener en una fotografía.

¿Qué factores influyen en que tenga mucho peso una imagen?

Existen dos factores por los que una imagen puede tener demasiado peso:

1. la resolución de la imagen
2. el tamaño máximo de la imagen

¿Qué resolución es la adecuada para una página WEB?

Resolución adecuada para una imagen de una página web:
El tamaño adecuado de píxeles por pulgada o ppp es de 72 a 96, con esta resolución tendremos una imagen con buenos colores, y muy optimizada para una página web que tenga fotos.

Que tenga un tamaño de resolución más elevado no es necesario. Con este tamaño puede tener una perfecta imagen, y tendrá bastante menos peso la foto.

Para hacernos una idea 300 ppp sería una resolución adecuada para un proyecto de diseño gráfico, pero para una web no es necesario tener tanta resolución de imagen.

¿Qué tamaño es el adecuado para una página WEB?

Tamaño adecuado para una imagen de una página web:

Cuando hablamos del tamaño, nos estamos refiriendo a la superficie que va a ocupar la imagen en la página, o dicho de otra forma el ancho y el alto de dicha imagen.

Por lo normal este tamaño se suele representar como ancho por alto por ejemplo una foto que tenga 700 de ancho por 200 de alto se escribiría de la siguiente forma:
700×200

¿Por qué existe un tamaño máximo para poner en una página WEB?

Todas las plantillas de las páginas web suelen tener una medida máxima de ancho de columna por lo que poner una imagen que ocupe más ancho del tamaño máximo de columna va a hacer que tengamos un mayor peso del necesario.

Trucos para tener el tamaño adecuado

Trucos para tener el tamaño adecuado de cada foto

Truco 1: Adaptar los Tamaños de las imágenes

Lo primero que hay que hacer es medir el ancho máximo que puede llegar a tener la columna. Este valor es muy importante porque ninguna imagen va a sobrepasar este tamaño al mostrarse en la página.

Herramienta para medir la imagen

Para hacer esto utilizo una herramienta muy buena que se llama Page Ruler, es una extensión de Google Chrome que se puede adaptar al navegador de la siguiente forma:

Ir a la esquina superior derecha pinchar sobre los 3 puntos luego seleccionar Más herramientas =>  Extensiones, ir abajo a la izquierda y hacer clic sobre Obtener más extensiones. Buscar la extensión Page ruler en la parte de arriba a la izquierda y luego dar al botón añadir a Chrome.

También puedes acceder desde aquí Page Ruler e instalarlo.

El uso es muy sencillo, en la parte de arriba del navegador, sale un icono parecido a una regla. Simplemente al pulsarlo, seleccionas con el ratón el área que necesitas medir y en la parte de arriba te dice las medidas.

Una vez tienes el dato del tamaño de ancho de tu columna, ninguna imagen va a sobrepasar este tamaño. Es por esto que todas las imágenes que sobrepasen este tamaño el servidor intentará adaptarlas para que se puedan mostrar.

Una vez tengo este valor, voy a poner los valores predefinidos de WordPress ajustados a este valor y para ello me voy a la configuración:

Settings => Media

Y es ahí donde se modifica el tamaño predefinido máximo. Modifico y pongo de ancho máximo 650 y de alto 450.

Una vez tengamos esto todas las fotos cuando se suben ninguna intentará mostrar un tamaño superior a este valor.

Truco 2: Modificar los tamaños y resolución antes de subirlo

Es muy aconsejable (casi obligatorio), que todas las fotos antes de subirlas al servidor se modifique el tamaño y la resolución.

De esta forma no lo tendrá que modificar el servidor cada vez que tenga que mostrar las fotos. Y tampoco se degradará la imagen con algún cambio que intente hacer el servidor al intentar mostrar la imagen.

Para hacer esto se puede hacer de dos formas:

1. forma online,
2. desde tu PC con algún software de tratamiento de imágenes.

y una vez que hemos modificado la imagen, se sube al servidor.

se reduce en algunos casos hasta el 80% de su peso original.

Quitando de esta forma procesamiento al servidor y esto derivará en tener más fluidez de navegación y que la carga de la web sea más rápida.
fuente: http://www.imh.eus/es/comunicacion/dokumentazio-irekia/manuales/curso-de-tratamiento-de-imagenes-con-gimp/formatos-de-imagenes/tamano-y-calidad-de-las-imagenes