Ajustar el tamaño de las imágenes para Web

Un error muy habitual, de las personas que están empezando en el mundo del diseño Web, consiste en ir colocando las imágenes finales mientras van desarrollando el diseño de su sitio Web. Por lo general, lo correcto consiste en primero realizar completamente el diseño de nuestro sitio Web, y una vez finalizado, ya podemos preparar correctamente el tamaño de las imágenes que vamos a usar.

El principal motivo para trabajar de este modo es que, hasta que el diseño del sitio Web no está terminado, resulta difícil saber exactamente el tamaño que va a necesitar cada imagen en dicho diseño.

Pero, una vez hemos averiguados los tamaños de imagen necesitamos, ¿Cómo ajustamos las imágenes para que tengan el tamaño adecuado?

Obviamente, para obtener el mejor resultado, lo mejor sería aprender a retocar imágenes con Photoshop. Pero para los ajustes básicos de tamaño, casi cualquier programa de retoque de imágenes nos sirve. Incluso existen algunas herramientas online que podemos usar.

En este artículo, voy a ilustrar como hacer los ajustes básicos para el tamaño de las imágenes usando una herramienta online gratuita llamada pixlr. Sin embargo, lo que vamos a aprender en este artículo sirve para cualquier software que nos permita editar imágenes, Photoshop incluido, claro. La única diferencia, es que tendremos que buscar donde tiene cada programa la herramienta deseada.

Antes de empezar, vamos a repasar algunas 3 reglas de oro que debemos de seguir:

1 – Nunca ampliar una imagen

Por ejemplo, si en nuestro diseño tenemos una zona para los productos, con un espacio para la imagen de 300 pixeles de ancho por 300 pixeles de alto, nunca deberíamos de intentar colocar en dicho espacio una imagen con un tamaño inferior. Ampliar una imagen siempre implica perdida de calidad.

Lo ideal es partir de una imagen sensiblemente mayor y reducirla al tamaño deseado. Si la imagen es ligeramente más grande y reducimos su tamaño, también se producirá cierta perdida de calidad, pero no es algo tan evidente como cuando se amplia una imagen.

2 – Respetar la relación de aspecto

La relación de aspecto es la relación que hay entre el ancho y el alto de la imagen.

En el ejemplo anterior, si tenemos una fotografía de un producto con un tamaño de 4000 pixeles de ancho por 3000 pixeles de alto, y queremos ajustar su tamaño para que quepa en nuestra zona de 300 pixeles de ancho por 300 pixeles de alto, tenemos el problema de que en cada caso, la relación de aspecto es diferente.

Si simplemente redimensionamos la fotografía de 4000 x 3000 (ancho x alto) a un tamaño de 300 x 300, veremos que el resultado es una imagen distorsionada. Concretamente, la imagen se verá como estirada verticalmente (o aplastada horizontalmente).

Es por ello, por lo que para obtener un buen resultado, no solo debemos de redimensionar la fotografía del producto, necesitamos recortarla para lograr la misma relación de aspecto que nuestro hueco de 300 x 300 pixeles.

3 – Usar el formato de imagen adecuado

Finalmente, otra regla de oro es usar el formato de imagen adecuado para cada caso.

Para fotografías, si no necesitamos transparencia, lo mejor es usar el clásico formato JPG (o algún formato más nuevo como WebP)

Por el contrario, si necesitamos usar transparencias, o cualquier otro tipo de imagen que no sea una fotografía (o similar), como pueda ser el caso de un logo, una infografía, etc, lo recomendable suele ser emplear el formato PNG.

Redimensionar manteniendo la relación de aspecto

Lo primero que recomiendo es redimensionar la imagen, de forma que obtengamos siempre una imagen que tenga el alto o ancho definitivo, pero que siga siendo más grande que el hueco que queremos cubrir.

Cualquier programa de retoque de imágenes, el Paint de Windows incluido, nos permite redimensionar una imagen manteniendo su relación de aspecto (o proporciones).

Por ejemplo, en el caso ya comentado de la fotografía de un producto con una resolución de 4000 x 3000 pixeles, que queremos colocar en una zona de 300 x 300 pixeles; tenemos dos opciones para redimensionar la imagen sin deformarla.

• Redimensionarla a un tamaño de 400 x 300.
• Redimensionarla a un tamaño de 300 x 225.

En este ejemplo, si pedimos a nuestro software que queremos redimensionar la imagen a un ancho de 300 pixeles manteniendo la relación de aspecto (es decir, las proporciones), el programa nos indicará que el alto debe de ser 225. Si por el contrario indicamos un alto de 300 pixeles, el programa nos indicará un ancho de 400 pixeles.

De estas dos opciones, la que nos interesa es la que nos proporciona una imagen mas grande que el hueco que queremos cubrir. Es decir, tenemos que redimensionar a un tamaño de 400 x 300 pixeles.

Recortar la parte sobrante

Una vez redimensionada la imagen de nuestro ejemplo a un tamaño de 400 x 300 pixeles, es evidente que necesitamos recortar 100 pixeles de ancho para obtener una imagen sin distorsiones que quepa perfectamente en nuestro hueco de 300 x 300 pixeles.

No siempre es posible realizar este recorte sin obtener el resultado deseado. En estos casos, podemos intentar realizar primero el recorte y después el escalado de la imagen. Aunque a veces ni de este modo logramos obtener la imagen tal y como deseamos. En estos casos no queda otra que realizar algún tipo de edición de imagen más creativa (cosa que excede la intención de este artículo) o volver a realizar la fotografía del producto teniendo en cuenta la relación de aspecto de la zona donde va a ser visualizado el producto.

La importancia del tamaño de las imágenes

En conclusión. En Web, gestionar correctamente el tamaño de las imágenes es fundamental. Es un aspecto que muchas veces pasa desapercibido para las personas que se inician en el mundo Web y foco de muchos errores habituales cuando se empieza. Provocando que nuestras primeras páginas Web no luzcan todo lo que podrían si cuidamos un poco este aspecto.