Reajuste de imágenes para página web

¿Ya tienes tu sitio web pero te falta subir contenido multimedia? Considera leer esta entrada antes de hacerlo, ya que debes tomar en cuenta un aspecto importante: el tamaño. Hoy te enseñaremos brevemente cómo hacer el reajuste de imágenes para página web.

¿Necesito hacerlo?

Para comenzar, este reajuste se refiere a colocar la imagen en su tamaño y proporciones correctas para tu página web. Tal vez si tu sitio tiene poco contenido multimedia, se podría obviar este tema; sin embargo, si tienes una página web en la que se mostrarán muchas imágenes (una tienda virtual con su lista de productos o un blog), es muy útil tomarlo en cuenta ya que podría afectar el tiempo de carga del sitio web además de la buena visualización de las imágenes.

Pues bien, una vez evaluada la necesidad de reajuste simple de imágenes para página web. Podemos proceder a hacerlo, te dejamos un ejemplo.

Manos a la obra

Tomemos de ejemplo esta página con un banner en su página de inicio; a continuación, en sus diferentes vistas (se puede notar que el ancho del banner es igual al ancho de la pantalla):

Banner en tamaño desktop

Asumiendo que el sitio web que tenemos es administrable y queremos modificar esa imagen por otra que acabamos de tomar. Es muy probable que esa imagen sea muy grande para tu página web:

En efecto, el tamaño de esta imagen es de 5184px de ancho por 2912px de alto y pesa 4.1MB. Analizando el lugar donde se pondrá, el ancho máximo que tendrá es el ancho de la pantalla de donde se vea (porque el banner abarca todo el ancho).

Los aproximados de los tamaños que se necesitan para tu página:

• Banner: es suficiente un ancho de 2000px.
• Imágenes de productos de tienda virtual: considerar un tamaño 1200×1200.
• Imágenes de blog: considerar un ancho de 1700px.

Tener en cuenta que estos tamaños son referenciales, dependerán de cómo sea el diseño de tu web; sin embargo, si no sabes cómo comenzar, te puede servir de guía.

Entonces, necesitamos redimensionar la nueva imagen del banner para que tenga un ancho de 2000px; para esto, se pueden usar varios programas como Photoshop o Lightroom; sin embargo, podemos valernos de aplicaciones web que ofrecen herramientas útiles para nuestro fin. En este caso, usaremos Befunky, entramos a este link.

Menú de herramientas

El menú de herramientas tiene todo lo esencial para nuestro reajuste, entre ellos: Crop (Recortar), Resize (Redimensionar), Exposure(Exposición).

Insertamos la imagen en el editor

Entramos a Open->Computer y seleccionamos nuestro archivo

De ser necesario, recortamos la imagen (Crop)

Además nos puede servir para hacer recortes cuadrados (Square 1×1), mantener las proporciones, entre otros.

Entramos a Crop

Ahora sí, redimensionamos a un ancho de 2000px

Ponemos el ancho que deseamos y presionamos la tecla Tab, de esta forma mantiene sus proporciones, finalizamos dándole click en el check.

Entramos a Resize

Hacemos unos ajustes de exposición y/o color y guardamos

Entramos a Save->Computer

Listo, veamos las especificaciones de nuestra nueva imagen:

Esta nueva imagen pesa 971.3KB lo cual es mucho más ligero que 4.1MB de la imagen inicial.

Comparación de foto antes y luego del reajuste

Solo queda subir la imagen a nuestra página web, a continuación el resultado:

Esperamos que haya quedado claro el reajuste de imágenes para página web ¿Necesitas que te ayudemos a mejorar tu web, manejar tus redes sociales o una sesión de fotos para tus productos o servicios? No dudes en contactarnos, entra acá