¿La fotografía del texto se ve borrosa cuando es pequeña en el sitio web, pero cuando se amplía se ve nítida?

Estoy editando algunas fotos para un sitio web que tiene texto, cuando las cargo en el sitio, el texto se ve borroso, pero cuando abro las imágenes para que sean más grandes, el texto se ve nítido y no estoy seguro de por qué.

Son PNG ya que no son líneas limpias en el borde, así que necesito algo de transparencia en los bordes.texto :borroso" más pequeño

¿Le ha pasado esto a alguien? o alguien tiene alguna sugerencia?ingrese la descripción de la imagen aquí

Puede que solo se deba a que el navegador utiliza un método de reducción de escala rápido. ¿Has probado en diferentes navegadores?
Usualmente uso Chrome, pero probé en safari y se veía igual
Prueba Firefox y tal vez Edge también. Creo que Safari usa el mismo algoritmo de reducción de escala que Chrome.
sí, pero el problema es que la mayoría de las personas usarán Chrome o Safari, así que también necesito que funcione en ellos.

Respuestas (3)

La imagen parece haberse reducido o no la está viendo al 100 %. Verifique el nivel de zoom en Photoshop y configúrelo al 100%. Eso puede ser suficiente para arreglarlo.

Si necesita reducir la escala de la imagen para que quepa en otra imagen, o para hacer una imagen más pequeña para un sitio web, en Preferencias > pestaña General, establezca la interpolación de la imagen en "Bicubic Sharper (mejor para reducción)".

Copie y pegue la imagen, luego presione CTRL+ Ty escale la imagen.

el resultado es mejor

ingrese la descripción de la imagen aquí

Ambas imágenes son de cuando cargué la imagen en el sitio web, el mismo archivo, solo una es la vista básica en el sitio y la otra es cuando sacas la imagen para verla más grande
@HannahBaker Entonces eso significa que no tienen el mismo nivel de zoom. No puede comparar imágenes que se muestran en diferentes niveles de zoom.
así que para ajustar la imagen para que sea más nítida para el tamaño más pequeño, sugeriría usar "Bicubic Sharper (mejor para reducción)".
Simplemente nunca he experimentado cuando una imagen es más pequeña, es menos nítida, eso solo me ha pasado cuando ves la imagen más grande.
Sí, cambie la escala si desea una imagen más pequeña para una página web. No escale las imágenes en un navegador, siempre se ven como basura, ya sea que las haga más grandes o más pequeñas

Cambiar el tamaño de las imágenes para que se ajusten a la página web

Cambie el tamaño de sus imágenes para que se ajusten a la página web sin necesidad de hacer zoom.

Si usa Photoshop, elija Preserve Detailscomo resampleopción al exportar, para una apariencia limpia con menos pérdida de calidad de imagen.

ingrese la descripción de la imagen aquí

Intenté esto, pero la imagen todavía parece estar "borrosa" cuando la veo en el sitio web, odio incluso llamarla borrosa, es casi como si el contraste fuera extraño, pero lo probé con contraste múltiple y no parece hacer una diferencia
¿Tienes la URL de la página web para que pueda comprobarlo?
celestekrishna.com/preludered/#libretto las paginas del libreto salen aleatoriamente, pero he ingresado 3 versiones diferentes de "call up the devil" las dos que estan una al lado de la otra son las que estoy probando, como pueden vea el resto de las imágenes cuando las saca, se vuelven borrosas. Eso es lo que estamos tratando de inventar si eso tiene algún sentido.
también intentándolo con esta página celestekrishna.com/preludered/#notes y el cuadro de música en esta página está haciendo lo mismo
@HannahBaker esa página web está cambiando la escala de la imagen, por lo que el problema está en el sitio, no en Photoshop.
@HannahBaker. Esta es tu imagen. celestekrishna.com/static/public/uploads/… Es demasiado grande para la página y el navegador lo está redimensionando, por lo que no se ve bien. Esto no se puede evitar porque hay muchos tamaños de pantalla diferentes, pero puede hacer que se vea bien en la mayoría de los dispositivos de las personas. Lo que debe hacer es diseñar el tamaño de su imagen para el tamaño de pantalla más popular de su público objetivo.
Puede obtener esta información de Google Analytics si un sitio ha estado funcionando durante un tiempo. El tamaño de pantalla más popular varía de un país a otro, por lo que si su audiencia se encuentra principalmente en los EE. UU., use el tamaño más adecuado para esa ubicación. Puede encontrar esta información aquí: gs.statcounter.com/screen-solution-stats/all/…

OK, creo que encontré la razón por la cual tu imagen se ve extraña.

Parece provenir del estilo css que usa la biblioteca fotorama .

Aquí está la imagen tal como está ahora en la página web:

Si activo las herramientas de desarrollo y selecciono el elemento principal de la imagen, noto que tiene el atributo de transformación establecido en translateZ(0) .

Si desactivo esta configuración, la imagen se ve bien:

Entonces, mi consejo es dejar de usar fotorama o cambiar el código para que no agregue ese atributo.

La fuente es parte de una imagen, no el sitio web como tal. celestekrishna.com/static/public/uploads/…
muchas gracias por investigar esto. Cuando apagué eso en el estado de ánimo del desarrollador, cambió la imagen. ¡Gracias!
¡Es bueno escuchar! Recuerde aceptar la respuesta para que otros puedan beneficiarse de ella.
¿La fotografía del texto se ve borrosa cuando es pequeña en el sitio web, pero cuando se amplía se ve nítida?
RespuestasAquíPolítica de privacidad1y, 0v