¿Cómo recortar una imagen sin perder la calidad?

Reducir el tamaño de la imagen en photoshop sin perder calidad

Los usuarios esperan que las imágenes tengan un tamaño adecuado y sean de alta calidad. Son importantes para que tu sitio web o marca parezca profesional y para establecer la confianza con los usuarios. Imagina dos sitios de comercio electrónico que vendan el mismo par de zapatos: uno tiene capturas de pantalla del producto borrosas y distorsionadas, y el otro las tiene muy claras. ¿En cuál es más probable que compre? Las imágenes también son importantes para transmitir información importante al usuario. Un tutorial sobre CSS con imágenes de ancho completo es más eficaz y preferible que un tutorial con imágenes en miniatura.

Además de afectar a la experiencia del usuario de estas maneras, las imágenes que no tienen el tamaño adecuado afectan al rendimiento del sitio web. Las imágenes sobredimensionadas y de alta resolución pueden tener un buen aspecto en la parte frontal, pero el tamaño de sus archivos es grande. Esto significa que los navegadores tardarán más en cargarlas, lo que aumentará el tiempo de carga total de su sitio web.

A menudo, este tiempo de carga adicional es innecesario. Digamos que tienes una imagen de 2023 x 2023 píxeles pero el contenedor en el que va es de sólo 200 x 200 píxeles. En ese caso, el navegador sigue cargando cada píxel aunque esté limitado a un área de visualización mucho más pequeña. Eso significa que el navegador tiene que cargar diez veces más de lo necesario.

Cómo aumentar el tamaño de una imagen sin perder calidad en photoshop

Para la mayoría de los diseñadores y desarrolladores web, la herramienta de imagen a la que recurren es Adobe Photoshop.    Pero hoy en día hay mucha gente que dirige blogs o colabora en ellos que no está familiarizada con Photoshop y no quiere dedicar el tiempo necesario para aprender este potente pero difícil programa.    Además, Adobe Photoshop no es barato; a más de 20 dólares al mes, es excesivo para muchas tareas habituales de los blogs.

Por esta razón, aquí hay un breve y rápido tutorial sobre el uso de Vista Previa (gratuito y preinstalado en los Mac) para recortar y redimensionar imágenes.    Para los usuarios de Windows y Linux, haré un futuro tutorial sobre cómo hacer esto usando GIMP (gratuito y disponible en ambas plataformas).

En este ejemplo, tomaré una imagen grande y la haré de 250px por 150px y ajustaré el color y el tamaño y tipo de archivo.    Empezaré con una captura de pantalla en su formato png por defecto.    Para nuestro ejemplo, vamos a suponer que voy a escribir un artículo sobre el sitio web de la Patagonia, así que he tomado una captura de pantalla de su página de inicio.

3.    Selecciona las dimensiones de la imagen usando píxeles como medida.    La vista previa se escalará proporcionalmente, así que elige la altura y la anchura en consecuencia.    Si la relación de aspecto de tu imagen inicial es diferente a la de tu objetivo (por ejemplo, si estás empezando con 100 x 200 cuando necesitas terminar en 50 x 50) tendrás que ir con la altura o la anchura deseada y luego utilizar la función de recorte para alcanzar un tamaño objetivo sin distorsionar las proporciones. Aquí voy a elegir el ancho de 250.    Pero todavía tengo que recortar para ajustar la altura.

Recortar la imagen

Es un problema común que usted tenga una imagen demasiado grande para un propósito particular (incrustar en una página web, publicar en algún lugar en línea, o incluir en un correo electrónico, por ejemplo). En este caso, a menudo querrá reducir la imagen a un tamaño más pequeño y adecuado para su uso.

También observará una pequeña cadena justo a la derecha de los cuadros de entrada de la Anchura y la Altura. Este icono muestra que los valores de Anchura y Altura están bloqueados entre sí, lo que significa que el cambio de un valor hará que el otro cambie para mantener la misma relación de aspecto (sin compresión o estiramiento extraño en la imagen).

Por ejemplo, si sabe que quiere que su imagen tenga un nuevo ancho de 600px, puede introducir ese valor en la entrada Ancho, y el Alto cambiará automáticamente para mantener la relación de aspecto de la imagen:

Un uso común para esto podría ser si usted quisiera especificar un nuevo tamaño como un porcentaje del anterior. En este caso podría cambiar a “porcentaje”, y luego introducir 50 en cualquiera de los campos para escalar la imagen a la mitad.

Photoshop redimensiona la imagen sin perder calidad

Recortar imágenes es, con mucho, uno de los usos más comunes y cotidianos de Photoshop. Es tan común que Photoshop viene con una herramienta diseñada específicamente para recortar fotos, convenientemente llamada la Herramienta de Recorte. Una de las grandes ventajas de la herramienta de recorte es que puedes recortar fácilmente tus fotos a los tamaños más comunes, como 4×6, 5×7 u 8×10, simplemente introduciendo los valores de anchura y altura en la barra de opciones antes de arrastrar el borde de recorte, o seleccionando un tamaño de recorte preestablecido en el selector de ajustes.

Eso puede ser genial, pero ¿qué pasa si no quieres cambiar la relación de aspecto de la foto? ¿Y si quieres recortar la imagen manteniendo la misma proporción de anchura y altura que el original? ¿Y si no estás seguro de cuál es la relación de aspecto original? Podrías abrir el cuadro de diálogo Tamaño de la imagen para averiguar la anchura y la altura de la imagen y luego hacer el cálculo, pero hay una manera aún más fácil gracias a un comando poco utilizado pero muy útil en Photoshop llamado Transformar selección, que es lo que vamos a ver en este tutorial.