Chrome imágenes encogiendo se ven afiladas / brillo con imagen de fondo pero normal con la etiqueta de imagen

Lo encontré a veces cuando imágenes Reducir ¿Con antecedentes de Css, se ven afilados/blurry/glitch...?

De todos modos, se ven raros.

Aquí tengo dos div con el mismo efecto pero diferente enfoque, el izquierdo utiliza el IMG etiqueta y la derecha usan un DIV con imagen de fondo.

enter image description here

con etiqueta img


  test



.left {
  flex: 0 0 $img-w-pc;
  height: $img-w-pc * $img-ratio;
  position: relative;
  overflow: hidden;
  img {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}

con imagen de fondo



.right{
  flex: 0 0 $img-w-pc;
  height: $img-w-pc * $img-ratio;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

El tamaño original de la imagen es de 1280 x 720 y cuando se encoge con el background-image Parecerá un fallo.

Sin embargo si uso una imagen más pequeña o agrandar la div, hacer la imagen "no encoger tanto", entonces estará bien.

Lo testo en Chrome y FireFox y sólo el anterior con este problema.

¿Cuál es la causa? ¿Es esto algunos comportamientos especiales con Chrome?

Actualización

Creo un codepen aquí: https://codepen.io/timtnlee/pen/GRjmxVK

Pregunta hecha hace 3 años, 4 meses, 29 días - Por javajedi

3 Respuestas:

  • Intente agregar el image-rendering: pixelated; declaración a los estilos para su imagen de fondo.

    https://css-tricks.com/almanac/properties/i/image-rendering/

    Respondida el Dec 17, 2020 a las 02:58 - por binarybard1cc8

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando con la calidad de las imágenes al encogerlas utilizando background-image en comparación con la etiqueta img es un fenómeno conocido como "blurry scaling" o "escalado borroso". Esto suele ocurrir cuando se escalan imágenes grandes a tamaños más pequeños o cuando se utilizan como fondo de un elemento.

    La causa de este problema es que al utilizar background-image para mostrar una imagen, el navegador tiene que escalar la imagen original para que encaje en el contenedor, lo que puede resultar en una pérdida de calidad. En cambio, al utilizar la etiqueta img, el navegador automáticamente ajusta la imagen de manera más precisa al tamaño del contenedor, lo que puede resultar en una mejor calidad visual.

    Para solucionar este problema y obtener una mejor calidad de imagen al escalar, te recomendaría considerar las siguientes opciones:

    • Utilizar imágenes de tamaño adecuado para cada contenedor en lugar de escalar imágenes grandes. Esto evita la pérdida de calidad al escalar.
    • Experimentar con diferentes propiedades de CSS, como `background-size: contain`, que puede ayudar a mejorar la calidad de la imagen al escalar con `background-image`.
    • Considerar utilizar la etiqueta `img` en lugar de `background-image` cuando la calidad de la imagen es crucial para tu diseño.

    Puedes probar estas soluciones en tu código y ver cuál funciona mejor para tu caso específico.

    Respondida el Dec 18, 2020 a las 03:01 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Causa:

    El problema está relacionado con la forma en que Chrome maneja el escalado de imágenes CSS. Cuando se reduce una imagen utilizando un fondo CSS, Chrome aplica un filtro de suavizado que puede causar los artefactos borrosos o afilados que estás observando.

    Solución:

    Hay varias formas de abordar este problema:

    1. Usar una etiqueta <img>:

    Usa una etiqueta <img> en lugar de un fondo CSS para mostrar la imagen. Chrome maneja el escalado de imágenes en etiquetas <img> de manera diferente y no aplica el mismo filtro de suavizado.

    2. Deshabilitar el suavizado en CSS:

    Puedes deshabilitar el suavizado en CSS agregando la propiedad image-rendering: pixelated al elemento contenedor:

    css
.right {
  ...
  image-rendering: pixelated;
}

    Esto obligará a Chrome a mostrar la imagen sin suavizado, lo que puede eliminar los artefactos borrosos.

    3. Usar una imagen más grande:

    Como mencionaste, usar una imagen más grande o hacer que el elemento contenedor sea más grande puede reducir la cantidad de escalado requerido, lo que puede mitigar el problema.

    4. Usar una biblioteca de JavaScript de terceros:

    Existen varias bibliotecas de JavaScript de terceros que pueden ayudarte a manejar el escalado de imágenes de manera más eficiente y evitar los artefactos de suavizado. Una opción popular es Vanilla Tilt.

    Consideraciones:

    El suavizado puede ser deseable en algunos casos, por lo que deshabilitarlo puede no ser la mejor solución para todas las situaciones. Usar imágenes más grandes puede aumentar el tiempo de carga de la página.

    Respondida el Dec 18, 2020 a las 03:03 - por Gemini

    Votos positivos: 0 | Votos negativos: 0