El tamaño importa en el diseño web

Hoy os vamos a hablar de la importancia de tener imágenes optimizadas en nuestro diseño web.

Es un punto muy importante a la hora de definir el diseño de una página web, ya que de este se derivaran cosas tan importantes como el tiempo de carga y la posible penalización que directamente o indirectamente obtendremos de nuestros clientes, los usuarios y el mismísimo google.

Así que si estas pensando en llamarnos para que te hagamos una página web te voy a mostrar algunos trucos que debes seguir para conseguir maximizar la relación entre imagen-calidad-peso.

1. Aprender a optimizar las imágenes sin tener perdida de calidad en nuestro diseño web

Este es el punto mínimo al cual debemos atender, aunque no hagamos nada más de la lista es el punto indispensable, se trata de usar uno de estos dos programas el ImageOptim para OS X o el FileOptimizer para Windows y Linux para automatizar la optimización de imágenes.

Esta opción no requiere nada más que hagáis un drag and drop de vuestras imágenes dentro de la aplicación mientras os tomáis un buen cola cao.

Es un proceso rapidísimo que no requiere ningún esfuerzo, y el resultado serán imágenes optimizadas.

2. Tamaño correcto

El uso de imágenes con dimensiones equivocadas es un error común entre los usuarios, pero el resultado es fatal.

Muchas veces creemos que al ver la imagen en pantalla con una buena medida ya esta todo correcto, lo cierto es que es posible que el navegador este cargando una imagen de dimensiones superiores, con su respectivo peso, pero mostrando una más pequeña.

Así pues las dimensiones de la imagen deben ser exactamente las mismas que el tamaño del lugar que van a ocupar, ni más ni menos.

3. Guardar para web

Esta es una opción que los expertos en diseño web ya conoceréis y supone ahorrarse bastante tiempo si se incorpora de forma correcta de nuestro work flow.

Simplemente se trata de guardar las imágenes que estamos trabajando para nuestro diseño web en formato web, o sea, optimizadas.

Aquí tenéis una comparativa de derecha a izquierda tenemos un guardado para web del 100, 70, 50 y 20 %, dependiendo del tamaño original de la imagen será apreciable.

Hay un montón de teorías sobre tanto por ciento de calidad, pero lo mejor es que uséis vuestra intuición, probad, guardad, haced zoom, comparad…lo que haga falta. Es una buena manera de entrenar vuestra visión y obtener un resultado perfecto.

4. Necesito esas imágenes en mi diseño web?

Es una buena pregunta que junto con otras más conforman el análisis del proyecto web, un buen diseño web parte de un análisis de necesidades, así no es una cuestión de más imágenes mejor, hay que tener en cuenta su necesidad real.

5. Usar un formato adecuado

Hay distintos formatos de imagen y cada uno, tiene sus particularidades, puntos fuertes y puntos débiles.

Es bueno conocerlos para poder aplicar cada uno en su manera correcta.

Si te ha quedado cualquier duda llámanos al estudio que tenemos en Barcelona y te ayudaremos en todo lo necesario.

¿Quieres empezar un proyecto?

Trabaja con nosotros

Mantente inspirado con nuestra newsletter