¿Cómo manejas el zoom del navegador del cliente?

22

Tengo muchas imágenes en una página, una galería. Quiero que las imágenes se mantengan nítidas, así que no escalo el navegador, uso las dimensiones originales de la imagen.

Sin embargo, esto solo funciona cuando el nivel de zoom del navegador es del 100%. Cuando aumento o disminuyo el nivel de zoom, disminuye la calidad de las imágenes.

Algunos clientes en realidad tienen diferentes niveles de zoom por defecto. Me preguntaba, ¿cómo puedes manejarlo y lo manejamos nosotros?

Aclamaciones

browser zoom usability John
fuente
1
Gran pregunta, esto es algo que me molesta a menudo. Este artículo es una lectura de fondo útil , pero aún no he visto ninguna respuesta perfecta a esto, más allá de poner imágenes de tamaño x2 con anchuras y alturas fijas y dejar que el navegador las resuelva (tiene desventajas obvias, pero soluciona esto y problemas de densidad de píxeles )
user56reinstatemonica8
No estoy seguro de qué tipo de respuesta esperas. Obviamente, no desea utilizar el cambio de tamaño automático. ¿Está preguntando cómo evitar que el navegador cambie el tamaño de las imágenes para que los otros elementos se organicen alrededor del tamaño de la imagen original? ¿Cómo entregar automáticamente imágenes preparadas para cada posible nivel de zoom? ¿O qué tienes en mente? Además, ¿por qué quieres hacer esto? Si un usuario tiene dificultades para ver la página correctamente con el zoom original, probablemente no notará la diferencia entre nitidez y cambio de tamaño automático después del zoom.
Rumi P.
66
No lo manejas. Esta es una preferencia del usuario. No hay necesidad de interferir con eso.
DA01
1
No pregunta cómo interferir con las preferencias del usuario. Él está preguntando cómo manejar el hecho de que muchos usuarios tienen zoom de forma predeterminada y, por lo tanto, obtendrán imágenes granuladas si las imágenes están en sus dimensiones originales.
user56reinstatemonica8
@ usuario568458 sí. Asi es como funciona. Realmente no hay nada que manejar.
DA01

Respuestas:

21

Creo que la mayoría de las otras respuestas han perdido el punto: no se trata de anular las preferencias del usuario, se trata de dar imágenes de la mejor calidad en el escenario común del dispositivo de un usuario que asigna más de un píxel físico para cada píxel CSS, también conocido como " píxel de referencia "en su imagen, lo que hace que el navegador amplíe la imagen, haciéndola pixelada y granulada.

Mis soluciones sugeridas a continuación, pero primero aquí están las cuatro formas en que esto puede suceder:

  • Lo más raro: el usuario elige hacer un acercamiento . No es un gran problema, ya que es su elección.
  • Sorprendentemente común: el navegador del usuario está ampliado de forma predeterminada . Por ejemplo, muchas máquinas Windows de alta densidad de píxeles tienen un zoom de 125% o más de forma predeterminada, y Firefox recientemente (¡confusamente!) Lo hizo, por lo que en estos casos les dice a los usuarios que tienen un zoom de 100% cuando realmente lo hacen de 125%. , dejándolos rascándose la cabeza preguntándose por qué todo de repente parece granulado.
  • Muy común: la mayoría de los dispositivos Android (¿y otros dispositivos?) Tienen una relación de píxeles superior a 1. Esto significa que cada "píxel CSS" en realidad se muestra usando más de un píxel físico, por lo que una imagen de 200px por 200px width: 200px; height: 200px;realmente se escalará esa imagen de 200 px por 200 px en más de 200 x 200 píxeles, lo que puede hacer que sea granulada.
  • Muy común: muchos dispositivos modernos de Apple tienen " pantallas retina ". Esto es esencialmente lo mismo que un dispositivo Android con una relación de píxeles de 2, pero con un mejor marketing y algunas propiedades personalizadas que permiten detectarlo por nombre.

Cualquiera de estos resultará en el problema de John de una galería de imágenes que se ve sorprendentemente granulada.

Esperaba que alguien tuviera una gran solución a este problema, pero por ahora estas son mis opciones preferidas, comenzando con la más efectiva pero menos universalmente posible:

  1. Si es posible, vaya a vector - SVG (o Raphael.js si aún necesita admitir IE8). Siendo realistas, esta es solo una opción para iconos, diagramas, etc., y nunca es una opción para fotografías. SVG muy complejo también puede ser torpe en móviles de gama baja debido al procesamiento requerido.
  2. Si es posible, detecte la proporción de píxeles del dispositivo y sirva imágenes basadas en eso. Esto también puede resolver el problema de Firefox en Windows porque Firefox en Windows cambia su lectura de las proporciones de píxeles cuando se acerca y se aleja. La desventaja es que se convierte en un problema de codificación complicado que involucra trabajo de desarrollo en el lado del servidor y del cliente.

  3. Si 1. y 2. no son posibles, pero es realmente importante y la calidad de la imagen es más importante que, por ejemplo, el tiempo de carga, simplemente duplique la imagen.

    • Esto es lo que Google hace con su logotipo en su página de inicio: aplastan una imagen PNG de 538 px x 190 px en un contenedor de 269 px x 95 px. También es más o menos lo mismo que el funcionamiento de las imágenes receptivas.

    • Esto solía considerarse una mala práctica porque las versiones antiguas de IE eran terribles para reducir las imágenes, pero ahora se usan muy raramente y son mucho menos comunes que las pantallas de alta densidad de píxeles. Todavía es algo indeseable, ya que aumentará el tamaño de la imagen y, por lo tanto, aumentará el tiempo de carga; eso es una compensación que debe juzgar caso por caso.

    • Duplicar el tamaño es común porque muy pocos dispositivos tienen una proporción mayor que 2, muy pocos usuarios tienen un zoom de más del 200% y el escalado de las imágenes al 50% es más limpio que otras cantidades.
  4. Si 1, 2 no son posibles y los tiempos de carga son una prioridad demasiado alta para 3, no conozco ninguna otra opción, y mi recomendación es no preocuparse por eso, porque la mitad de los sitios en Internet tienen el mismo problema , y las personas con este problema en su sitio también tendrán este problema en otros sitios. Demonios, Firefox en Windows incluso pixela sus propios botones de interfaz de usuario ...
user56reinstatemonica8
fuente
Supongo que los usuarios que hacen zoom son "más raros". Eso es más o menos por qué la función está allí en primer lugar ... para acercar. Además, aunque hay ideas interesantes con el uso de imágenes de mayor resolución al hacer zoom, tenga en cuenta que podría haber desafíos de usabilidad con eso. Por ejemplo, no quiero que el navegador busque nuevas imágenes cada vez que presiono la opción de zoom en mi navegador.
DA01
2
Si está utilizando jpgs, duplicar el tamaño de las imágenes (como se menciona en 3) y guardarlas con un poco de compresión de imagen (tan baja como la calidad 40) puede proporcionarle tamaños de archivo pequeños. Una vez reducidos, los artefactos de compresión no son visibles. Los resultados varían, especialmente donde las imágenes contienen gradientes.
Dominic
1
Aunque es muy nuevo en el momento de la escritura y, por lo tanto, no es compatible, el nuevo elemento <picture> parece justificar su mención aquí.
user50849
1
Nota: al guardar para web en photoshop, establecer la calidad jpg al 61% mientras se duplican las dimensiones previstas, el tamaño del archivo será casi exactamente el mismo que las dimensiones previstas al 100%. Así que comencé a comprimir todos mis archivos JPEG al 61% y a servirlos con una altura / ancho definidos (que también tiene la ventaja de permitir que el navegador sepa más sobre el diseño incluso antes de que se cargue la imagen)
Kjeld Schmidt
4

Como DA01 comentó, no debes hacer nada al respecto.

Zoom es una opción especificada por el usuario y, por lo tanto, está bajo su control. La configuración con la que deciden meterse no debería ser su responsabilidad.

Puede tener en cuenta diferentes navegadores y versiones y lo que no, pero en términos razonables no debe tener en cuenta el zoom de un usuario.

Claro que puede representar el 125% o el 150% (y es posible que ni siquiera tenga que hacerlo). ¿Pero 200%, 300%, más? Simplemente no tiene ningún sentido.

¿Qué sucede si el usuario usa el tema de Windows de alto contraste? ¿Qué pasa si usan constantemente la lupa? ¿A quien le importa?

Idealmente, su sitio web es lo suficientemente flexible como para no hacer una diferencia real entre la pequeña diferencia de zoom, pero las imágenes disminuirán en calidad con el zoom, pero esa no es su responsabilidad.

Por supuesto, esta es solo mi opinión, pero la compañía para la que trabajo también les dice explícitamente a los clientes que no admitimos sus preferencias de zoom.

Hanna
fuente
whatabout usuarios con ultra ancha o estrecha gamut dispositivos, etc, etc .... Sí estoy de acuerdo
joojaa
1

Otras personas han dado algunos buenos consejos sobre los problemas que enfrentarás y no soy lo suficientemente bueno en esta área para hacer un buen tutorial, pero ...

Es posible que desee diseñar un sitio receptivo que se ajuste de acuerdo con la resolución / dispositivo del usuario y luego probablemente esté buscando un código que cambie las imágenes a archivos de resolución más alta o más baja cuando se solicite, en lugar de estirar y comprimir las imágenes que tiene.

La última vez que intenté hacer esto, utilicé media-query.js y picturefill.js. Ver: http://responsivedesign.is/resources/images/picture-fill . Tenía un diseño de 3 columnas donde algunas imágenes abarcarían dos columnas ... Cuando la ventana del navegador se hizo lo suficientemente pequeña, las imágenes grandes cambiarían a una versión de resolución más pequeña que solo tendría una columna de ancho. El navegador del usuario simplemente cargará la versión del archivo que necesita. (y en mi caso, el complemento de albañilería movería todo para acomodarlo).

Por supuesto, entonces su usuario debe tener javascript habilitado ...

marcusdoesstuff
fuente
Si bien estoy a favor del diseño web receptivo, eso maneja un problema diferente (reflujo para manejar diferentes tamaños de navegador) que el zoom del usuario (que es el cambio de tamaño proporcional de todo independientemente del tamaño del navegador)
DA01
0

No puede forzar la mano del usuario. La configuración de usuario no es tuya para jugar. La configuración y eludirlos es una mala idea, puede haber una razón por la cual el usuario hizo algo. En cualquier caso, no puede garantizar nada en los distintos dispositivos.

De hecho, si entras en el aspecto técnico, se vuelve aún más interesante. Realmente das las llaves del reino con tu página web. Vea que el usuario descarga la página web y ahora puede hacer lo que quiera con ella. No tiene control sobre esta capa, después de todo se ejecuta en la máquina de los usuarios y pueden hacer lo que quieran. Incluso stackexhange no se ve igual en mi computadora / móvil que en la suya. Modifico automáticamente algunos aspectos de la GUI para corregir 2 errores de representación y he agregado 2 accesos directos.

joojaa
fuente
3
Creo que no están tratando de evitar que el usuario se acerque, pero asegúrese de que si, por ejemplo, el navegador del usuario tiene un zoom predeterminado del 125% porque Windows es extraño , las imágenes aún aparecen nítidas y no aparecen pixeladas.
user56reinstatemonica8
1
No importa, lo mismo
joojaa
2
Realmente no son lo mismo ... por ejemplo, el logotipo de Google es una imagen PNG de 538 px x 190 px en un contenedor de 269 px x 95 px. Esto significa que, si te acercaste o usaste una pantalla de alta densidad de píxeles, es menos probable que la imagen esté pixelada porque el navegador puede usar esa información adicional de píxeles. Al hacerlo, Google no está jugando con la configuración de zoom del usuario.
user56reinstatemonica8
Lo que haces al final depende de ti, sí. Pero si alguien usa un zoom del 259%, entonces ...
joojaa
1
Bueno, tu pensamiento de hoy, las cosas cambiarán en el futuro, en un futuro muy cercano. Por lo tanto, cualquier persona con problemas de visión podría tener el 200% hoy mañana, el 200% será la norma que compensar solo empeora el problema. En cualquier caso, el problema se descontrolará tarde o temprano. Simplemente no puede hacer más que victorias temporales, el sistema debe cambiar.
joojaa
0

El comportamiento molesto de las imágenes de aumento de escala en las pantallas HiDPI, que conduce a fotos borrosas (también conocido como la pesadilla de los fotógrafos), también me ha preocupado durante bastante tiempo. También me preguntaba que no hay un atributo CSS simple para deshabilitar eso para las imágenes.

Mi solución actual con CSS se ve así:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

El siguiente paso sería usar clases para definir y establecer diferentes tamaños de imagen si es necesario. No conozco una forma de obtener dinámicamente los tamaños de imagen. La función CSS attr () parece no funcionar para esto.

egrimpa
fuente
-1

Entonces esto sería más una pregunta de programación. Pero usando JQuery, o incluso solo css plano, puede mostrar diferentes imágenes en función del ancho de pantalla de los usuarios, la altura de la pantalla, etc.

De nuevo, aunque probablemente este no sea el intercambio de pila para preguntar.

Daniel
fuente
La pregunta no es sobre el tamaño de la pantalla. Se trata de la configuración del zoom del navegador.
DA01
-1

Simplemente puede hacer esto a través de HTML en la cabecera del sitio agregue esto

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Los desarrolladores no recomiendan esto para cada tipo de sitio, pero debe cumplir con lo que está pidiendo.

Zac Grierson
fuente
No creo que esto tenga ningún efecto en un navegador de escritorio.
DA01
1
He intentado esto para resolver el mismo problema recientemente y no funciona. Además, incluso si funcionara, estaría resolviendo el problema de la manera incorrecta, evitando el zoom, en lugar de hacer que las imágenes mantengan la claridad al hacer zoom.
user56reinstatemonica8