{"id":11403,"date":"2021-03-25T20:00:07","date_gmt":"2021-03-25T18:00:07","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=11403"},"modified":"2021-03-25T20:00:07","modified_gmt":"2021-03-25T18:00:07","slug":"ajustar-tamano-imagenes-web","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2021\/03\/ajustar-tamano-imagenes-web\/","title":{"rendered":"Ajustar el tama\u00f1o de las im\u00e1genes para Web"},"content":{"rendered":"

Un error muy habitual<\/strong>, de las personas que est\u00e1n empezando en el mundo del dise\u00f1o Web, consiste en ir colocando las im\u00e1genes finales mientras van desarrollando el dise\u00f1o de su sitio Web<\/strong>. Por lo general, lo correcto consiste en primero realizar completamente el dise\u00f1o de nuestro sitio Web, y una vez finalizado, ya podemos preparar correctamente\u00a0el tama\u00f1o de las im\u00e1genes que vamos a usar<\/strong>.<\/p>\n

El principal motivo para trabajar de este modo es que, hasta que el dise\u00f1o del sitio Web no est\u00e1 terminado, resulta dif\u00edcil saber exactamente el tama\u00f1o que va a necesitar cada imagen en dicho dise\u00f1o<\/strong>.<\/p>\n

Pero, una vez hemos averiguados los tama\u00f1os de imagen necesitamos, \u00bfC\u00f3mo ajustamos las im\u00e1genes para que tengan el tama\u00f1o adecuado?<\/strong><\/p>\n

Obviamente, para obtener el mejor resultado, lo mejor ser\u00eda aprender a retocar im\u00e1genes con Photoshop<\/a>. Pero para los ajustes b\u00e1sicos de tama\u00f1o, casi cualquier programa de retoque de im\u00e1genes nos sirve. Incluso existen algunas herramientas online que podemos usar.<\/p>\n

En este art\u00edculo, voy a ilustrar como hacer los ajustes b\u00e1sicos para el tama\u00f1o de las im\u00e1genes usando una herramienta online gratuita llamada\u00a0pixlr<\/a>. Sin embargo, lo que vamos a aprender en este art\u00edculo sirve para cualquier software que nos permita editar im\u00e1genes, Photoshop incluido, claro. La \u00fanica diferencia, es que tendremos que buscar donde tiene cada programa la herramienta deseada.<\/p>\n

Antes de empezar, vamos a repasar algunas 3 reglas de oro que debemos de seguir:<\/strong><\/p>\n

1 – Nunca ampliar una imagen<\/h2>\n

Por ejemplo, si en nuestro dise\u00f1o tenemos una zona para los productos, con un espacio para la imagen de 300 pixeles de ancho por 300 pixeles de alto, nunca deber\u00edamos de intentar colocar en dicho espacio una imagen con un tama\u00f1o inferior<\/strong>. Ampliar una imagen siempre implica perdida de calidad.<\/strong><\/p>\n

Lo ideal es partir de una imagen sensiblemente mayor y reducirla al tama\u00f1o deseado. Si la imagen es ligeramente m\u00e1s grande y reducimos su tama\u00f1o, tambi\u00e9n se producir\u00e1 cierta perdida de calidad, pero no es algo tan evidente como cuando se amplia una imagen.<\/p>\n

2 – Respetar la relaci\u00f3n de aspecto<\/h2>\n

La relaci\u00f3n de aspecto es la relaci\u00f3n que hay entre el ancho y el alto de la imagen.<\/strong><\/p>\n

En el ejemplo anterior, si tenemos una fotograf\u00eda de un producto con un tama\u00f1o de 4000 pixeles de ancho por 3000 pixeles de alto, y queremos ajustar su tama\u00f1o 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\u00f3n de aspecto es diferente.<\/p>\n

Si simplemente redimensionamos la fotograf\u00eda de 4000 x 3000 (ancho x alto) a un tama\u00f1o de 300 x 300, veremos que el resultado es una imagen distorsionada. Concretamente, la imagen se ver\u00e1 como estirada verticalmente (o aplastada horizontalmente).<\/p>\n

Es por ello, por lo que para obtener un buen resultado, no solo debemos de redimensionar la fotograf\u00eda<\/strong> del producto, necesitamos recortarla para lograr la misma relaci\u00f3n de aspecto<\/strong> que nuestro hueco de 300 x 300 pixeles.<\/p>\n

3 – Usar el formato de imagen adecuado<\/h2>\n

Finalmente, otra regla de oro es usar el formato de imagen adecuado para cada caso.<\/p>\n

Para fotograf\u00edas, si no necesitamos transparencia, lo mejor es usar el cl\u00e1sico formato JPG<\/strong> (o alg\u00fan formato m\u00e1s nuevo como WebP<\/a>)<\/p>\n

Por el contrario, si necesitamos usar transparencias<\/strong>, o cualquier otro tipo de imagen que no sea una fotograf\u00eda (o similar), como pueda ser el caso de un logo<\/strong>, una infograf\u00eda<\/strong>, etc, lo recomendable suele ser emplear el formato PNG<\/strong>.<\/p>\n

Redimensionar manteniendo la relaci\u00f3n de aspecto<\/h2>\n

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\u00e1s grande que el hueco que queremos cubrir<\/strong>.<\/p>\n

Cualquier programa de retoque de im\u00e1genes, el Paint de Windows incluido, nos permite redimensionar una imagen manteniendo su relaci\u00f3n de aspecto (o proporciones).<\/p>\n

Por ejemplo, en el caso ya comentado de la fotograf\u00eda de un producto con una resoluci\u00f3n 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.<\/p>\n