¿La mejor manera de guardar imágenes JPG para escalarlas en la web (Css) sin perder calidad en Photoshop?

Alguna idea de cómo guardar una imagen JPG (o cualquier formato de tamaño pequeño (KB) similar) con un tamaño de 300 px/300 px en Photoshop - escalarla hasta 600 px/600 px usando css en una página web, sin perder "Calidad" ? Trato de averiguar qué configuraciones funcionan bien... y cómo puedo guardar las imágenes en tamaños pequeños (KB)

1. Guardar JPG en Photoshop en 300x300px

ingrese la descripción de la imagen aquí

2. Ampliación con CSS a 600 x 600 px

ingrese la descripción de la imagen aquí

Respuestas (2)

No hay forma de ampliar una imagen sin perder calidad.

En ese caso, debe escalar su imagen hacia abajo .

Entonces, en lugar de guardarlo como 300x300, guárdelo como 600x600. Busque buenos métodos de optimización / compresión, tal vez use PNG en su lugar (porque a veces un PNG-8 comprimido puede ser más pequeño que un JPEG). Probablemente necesite usar una herramienta diferente para optimizar el archivo PNG (busque en la web "optimizador de imágenes PNG")

Mejor aún, lo guardaría con un tamaño entre 300 px y 600 px, por lo que es más pequeño que 600 y tiene mejor calidad que 300. Es posible que deba probar algunos tamaños diferentes para encontrar el equilibrio adecuado entre calidad y tamaño de archivo.

Gracias por su sugerencia. Tal vez guarde las imágenes en JPEG (600x600) y las optimice... PNG-8 se acerca al tamaño de JPEG pero se ve peor. Me di cuenta de que las imágenes más grandes que se reducen se ven muy bien en los dispositivos móviles...
Sí, principalmente porque los dispositivos móviles tienen pantallas de alta resolución, por lo que la reducción suele funcionar mejor también.

Más para complementar la respuesta de Luciano que contrarrestarla:

Otra cosa a tener en cuenta es la velocidad de conexión y el ancho de banda: no desea disparar una imagen masiva en la web si puede salirse con la suya. Una opción es tener dos versiones de la imagen, una actuando como una miniatura y la otra como la imagen de tamaño completo.

Aunque los archivos JPEG tienen compresión, es importante recordarlo: aunque parezca que solo estás duplicando el tamaño de la imagen, en realidad lo estás cuadruplicando. Por ejemplo, 600 x 600 = 360 000 píxeles, 300 x 300 = 90 000 píxeles (luego multiplique eso por 3 o 4 dependiendo de la cantidad de bytes por píxel).

El tamaño de un jpeg comprimido no depende tanto del número de píxeles como de la entropía de la imagen. La entropía tiende a crecer con el tamaño de la imagen, pero luego puede darse el lujo de comprimir más.
@joojaa: Cierto, pero el OP preguntaba por la compresión sin perder calidad. Afortunadamente, PS tiene un modo de vista previa para mostrar cómo se verá la imagen antes de la compresión real. Lo uso para medir la calidad de guardado final. El otro problema, por supuesto, es el detalle de la imagen; una imagen ocupada tiene muchas menos oportunidades de compresión sin verse afectada por artefactos (utilizando JPEG o una compresión con pérdida similar).
¿La mejor manera de guardar imágenes JPG para escalarlas en la web (Css) sin perder calidad en Photoshop?
RespuestasAquíPolítica de privacidad1y, 0v