Pérdida de calidad de imagen con reducción de tamaño

Estoy tratando de hacer que las imágenes en mi sitio web sean más pequeñas en sus dimensiones px, pero tengo problemas con la pérdida de calidad cuando cambio el tamaño en Photoshop (primero probé "Bicubic Sharper", luego todas las demás opciones de remuestreo, pero todas salió borroso).

Cuando dejo que el navegador haga la escala (al indicar el ancho más pequeño en mi CSS), salen perfectamente nítidos. ¿Cómo puede suceder eso? Sin embargo, me gustaría reducir mis imágenes originales. ¿Cómo puedo hacerlos más pequeños sin pérdida de calidad? (Tengo Photoshop e Illustrator, ambos CC 2015)

EDITAR YO:

La imagen tiene transparencia, por lo que no puedo guardarla como JPEG.

El sacapuntas bicúbico no ayudó.

Aquí están las imagenes:

Esta es una captura de pantalla de la imagen original escalada por el navegador/CSS :

ingrese la descripción de la imagen aquí

Esta es una captura de pantalla de la imagen más pequeña (que se muestra al 100% en el navegador) :

ingrese la descripción de la imagen aquí

Esta es la imagen original (no una captura de pantalla):

ingrese la descripción de la imagen aquí

Aquí está la imagen redimensionada en Photoshop con Bicubic Sharpener (como se muestra en la segunda captura de pantalla):

imagen redimensionada (no una captura de pantalla)

Editar II:

¡Gracias por sus respuestas! Lo estoy mirando desde mi computadora portátil, que tiene una pantalla táctil, pero no creo que se compare con las pantallas de iPhone... (Las especificaciones dicen 16:9 IPS FHD (1920x1080) si eso ayuda). Sin embargo, lo haría Me gusta que se vea bien en iPhones ya que estoy tratando de hacer que el sitio web responda.

Eso es lo que me llevó al problema en primer lugar. Estoy usando Bootstrap, y las imágenes receptivas se muestran automáticamente al 100 % para el tamaño de pantalla más grande posible, pero quiero que sean más pequeñas que eso (63 %). Pensé que hacerlos más pequeños sería una buena idea de todos modos, ya que un tamaño de archivo más pequeño también parece una buena idea.

Lo siento si las explicaciones de mis imágenes fueron confusas, probablemente sea porque estoy confundido... Intentaré explicarlo mejor:

Tanto la 2.ª como la 4.ª imagen muestran la misma imagen más pequeña, y la 2.ª la muestra en el sitio web.

El cuarto (que también me parece mal) se muestra al 100% de ancho en el navegador.

La primera imagen muestra la tercera imagen (tamaño original) escalada al 63 % en el navegador. Al menos eso era lo que pretendía.

@AndrewH Su explicación me parece correcta, excepto que no estaba tratando de escalarla más grande (al menos no a propósito). La segunda imagen (captura de pantalla) solo se muestra en la parte superior del fondo del sitio web, por lo que tiene un ancho diferente que incluye ese fondo. ¿O qué me estoy perdiendo?

FYI, CSS no hace un trabajo perfecto con esto, especialmente en ciertas proporciones. Cuando desarrolle, debe intentar evitar cambiar el ancho de una imagen de sus dimensiones originales siempre que sea posible.
Puede que no sea perfecto con CSS, pero es mucho mejor que lo que me está dando Photoshop. Y estoy tratando de evitarlo, es por eso que publiqué esta pregunta. Simplemente no sé cómo puedo hacer que la imagen original sea más pequeña sin perder tanta calidad.
¿Podemos ver un par de ejemplos de los originales, los buenos resultados (captura de pantalla de la imagen escalada usando CSS) y los malos resultados (escalado usando Photoshop)? Lo que usted llama "borroso" puede ser causado por muchos artefactos diferentes (desalineación de cuadrícula de píxeles, compresión JPG, etc.)
La imagen tiene transparencia, por lo que no puedo guardarla como JPEG. El sacapuntas bicúbico no ayudó. Aquí están las imágenes: Esta es una captura de pantalla de la imagen original escalada por el navegador/CSS: ! captura de pantalla a escala del navegador Esta es una captura de pantalla de la imagen más pequeña (que se muestra al 100% en el navegador): ! captura de pantalla ancho más pequeño Esta es la imagen original (no una captura de pantalla): ! imagen original (no una captura de pantalla) Y aquí está la imagen redimensionada en Photoshop con Bicubic Sharpener (como se muestra
Si estoy leyendo todo esto correctamente, parece que redujiste la imagen (cuarta imagen: 298 píxeles de ancho) pero tienes un código que ajusta el tamaño de la cuarta imagen al tamaño original (segunda imagen: 468 píxeles de ancho). Si redujiste la imagen (que se ve bien) y luego la escalaste más grande, entonces, por supuesto, habrá pixelación.
¡Hola! ¡Creo que falta tu cuarta foto! ¿Sería posible subirlo de la misma manera que lo hiciste con los demás? ¡Gracias!
¿Puede aclarar si "al 100 % en el navegador" significa "imagen de 100 px a 100 px de ancho" o "imagen de 100 px al 100 % del tamaño de la ventana del navegador"?
¡Gracias! Agregué la cuarta imagen nuevamente. Cuando digo 100 %, me refiero a que mi código CSS hace que la imagen aparezca al 100 % de ancho (es decir, tamaño completo, sin escalar) para un tamaño de pantalla específico. Evita que la imagen sea más grande que su tamaño original. Sin embargo, mi imagen original es más grande de lo que quiero que se vea, y en lugar de cambiar el 100 % en mi código, preferiría hacer la imagen original más pequeña, pero luego se ve terrible.

Respuestas (4)

En mi experiencia, debido al descarte de píxeles en el proceso de reducción del tamaño de una imagen, si estoy haciendo la imagen muy pequeña, obtengo mejores resultados al desenfocar la imagen ligeramente antes de reducirla.

Escribí un tutorial sobre cómo crear "pequeños iconos de fotos" hace unos 16 años. Hace mucho tiempo que desapareció, pero gracias al milagro del archivo web todavía puede verlo aquí . Los íconos que produje eran GIF de 256 colores y serían considerablemente más suaves, y probablemente más pequeños en tamaño de archivo, si se guardaran como archivos PNG, que ahora son compatibles universalmente.

Si entiendo correctamente, las capturas de pantalla 2 y 4 se crean utilizando el mismo archivo fuente.

Si eso es correcto, notará que cuando la imagen se usa en la página (2º) es más grande que sus dimensiones reales (4º). Por eso se ve borroso. El navegador está creando píxeles que no existen para poder representar una imagen más pequeña en dimensiones ligeramente más grandes.

Descargué su imagen (4ta) y la usé en una página web sobre un fondo negro. No especifiqué ninguna dimensión, por lo que se representa en sus dimensiones originales. Así es como se ve (captura de pantalla de Chrome en un monitor normal).

ingrese la descripción de la imagen aquí

Fíjate que está perfectamente crujiente. Compara con el tuyo. El suyo es más grande, por lo que el navegador está estirando el archivo de origen, lo que resulta borroso.

ingrese la descripción de la imagen aquí

No sé a qué te refieres exactamente cuando dices que has hecho tu imagen al 100%. Puede significar cosas diferentes.

Creo que su imagen se muestra al 100% del ancho de su elemento contenedor . Si ese es el problema (quieres saber cómo codificar la imagen para que se muestre en su tamaño real y no en las dimensiones de su contenedor o estás confundido acerca de cómo codificar Bootstrap), entonces esa no es una pregunta para este foro. . Encontrará mejores consejos en stackoverflow , ya que esa es una pregunta de codificación.

Aquí hay algunas preguntas sobre ese tema: ( haga clic aquí )

demasiado agudo

Creo que estás pensando demasiado en el cambio de tamaño. Al seleccionar un método de nitidez para cambiar el tamaño de la imagen, está haciendo que los bordes sean demasiado nítidos. Para que se vea suave, los bordes deben estar un poco borrosos.

Así que esto es lo que hice.

  • Abrí tu PNG original en PS
  • Abrí las ventanas de cambio de tamaño Menú->Imagen->Tamaño de imagen
  • Ingresé las dimensiones que deseaba y dejé todo lo demás como el método predeterminado. Hizo clic en Aceptar.
  • Guardé el archivo con un nombre diferente. Dejé las opciones de PNG como predeterminadas.

Estas son las dos ventanas con las opciones que seleccioné

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Este es el resultado utilizado en una página web en sus dimensiones originales. El que está arriba es tuyo (usando el sacapuntas bicúbico). El que está en la parte inferior es mío, usando el método predeterminado.

ingrese la descripción de la imagen aquí

Se ve un poco más suave. Puedes jugar con todos los diferentes métodos de cambio de tamaño hasta que encuentres el que te dé el mejor resultado.

Digresión:

Si su objetivo es la capacidad de respuesta (por lo tanto, admitir la mayor cantidad de dispositivos), debe hacer que el archivo de origen tenga el doble de las dimensiones necesarias para que no se vea borroso en los monitores de alta definición. Una pantalla de alta resolución necesita un cuadrado de 2x2 píxeles por cada píxel que mostrará.

Echa un vistazo a estas respuestas:

¿Necesito crear mis imágenes al doble de las dimensiones de píxeles en una pantalla retina?

Resolución DPI/PPI para imágenes de zoom de productos

Muchas gracias por aclararme esto. Sí, las imágenes 2 y 4 son del mismo archivo fuente. Ahora puedo ver lo que usted (y probablemente también AndrewH) quiere decir: la captura de pantalla (2º) parece más grande que el archivo fuente (4º). No estoy seguro de por qué mi captura de pantalla resultó así (¡y lamento no haberlo notado antes!), pero en mi sitio web, en realidad es del mismo tamaño (que la foto 4 y la tuya). Sin embargo, la foto 4 no se ve bien para mí. No es muy borroso, pero tampoco es tan nítido como la versión de Pic 1 a escala del navegador. Incluso en tu ejemplo, me parece mal.
Cuando compare la imagen 3 y la imagen 4, observe las líneas rojas, especialmente la parte inferior derecha larga. Es más fácil ver sobre un fondo oscuro como el fondo negro que eligió. ¿Puedes ver la diferencia? ¿O está todo en mi cabeza? ¿O es solo la pantalla de mi computadora?
También tiene razón acerca de que la imagen se muestra al 100% del ancho de su elemento contenedor. Eso tiene mucho sentido. Intentaré resolver esa parte y obtener ayuda en StackOverflow si no puedo. Aparte de eso, sigo pensando que sería una buena idea hacer la imagen original más pequeña cuando nunca quiero mostrarla a más del 63% de su tamaño original, pero ya no se ve bien cuando reduzco su tamaño. . ¿Debería dejarlo más grande o hay una mejor manera de hacerlo más pequeño que no sea Bicubic Sharpener?
¡Ah, y gracias por todos los enlaces! ¡Definitivamente seguiré tu consejo allí!
@user3504783: No hay problema. Echa un vistazo a mi última edición.

Simplemente vuelva a muestrear su foto a la dimensión real necesaria. Recomiendo Bicubic Sharper.

Después de eso, aplique un poco de nitidez adicional.

PD Eso no es "pérdida de calidad". La calidad es un proceso, una metodología, un flujo de trabajo. No pierdes calidad, pierdes información, detalle; con el afilado simulas algún detalle nuevo.

  • Archivo > Exportar > Guardar para web
  • Preestablecido: JPEG alto
  • Progresivo
  • Tamaño de la imagen: establezca el tamaño deseado
  • Calidad: Bicubic Sharper
  • Compare Original con Optimized en la ventana de vista previa

Consulte también Smush Pro, Kraken y Ewww si su imagen es para un sitio web de WordPress.

Pérdida de calidad de imagen con reducción de tamaño
RespuestasAquíPolítica de privacidad1y, 0v