Comment gérez-vous le zoom du navigateur du client?


22

J'ai beaucoup d'images sur une page, une galerie. Je veux que les images restent nettes, donc je ne fais pas de mise à l'échelle du navigateur, j'utilise les dimensions originales de l'image.

Cependant, cela ne fonctionne que lorsque le niveau de zoom du navigateur est de 100%. Lorsque j'augmente ou diminue le niveau de zoom, la qualité des images diminue.

Certains clients ont en fait différents niveaux de zoom par défaut. Je me demandais, comment pouvez-vous le gérer et le faisons-nous du tout?

À votre santé


1
Grande question, c'est quelque chose qui me dérange souvent. Cet article est une lecture de fond utile , mais je n'ai pas encore trouvé de réponse parfaite à cela, à part mettre des images de taille x2 avec des largeurs et des hauteurs fixes et laisser le navigateur le trier (a des inconvénients évidents, mais corrige cela et des problèmes de densité de pixels ).
user56reinstatemonica8

Je ne sais pas quel genre de réponse attendez-vous. De toute évidence, vous ne voulez pas utiliser le redimensionnement automatique. Demandez-vous comment empêcher le navigateur de redimensionner les images afin que les autres éléments soient organisés autour de la taille d'image d'origine? Comment délivrer automatiquement des images préparées pour chaque niveau de zoom possible? Ou que pensez-vous? D'ailleurs, pourquoi voulez-vous faire ça? Si un utilisateur a du mal à voir la page correctement avec le zoom d'origine, il ne remarquera probablement pas la différence entre net et redimensionné automatiquement après le zoom.
Rumi P.

6
Vous ne le gérez pas. Il s'agit d'une préférence utilisateur. Pas besoin de s'en mêler.
DA01

1
Il ne demande pas comment interférer avec les préférences de l'utilisateur. Il demande comment gérer le fait que beaucoup d'utilisateurs sont zoomés par défaut et obtiendront donc des images granuleuses si les images sont à leurs dimensions d'origine.
user56reinstatemonica8

@ user568458 yep. Voilà comment ça marche. Il n'y a vraiment rien à gérer.
DA01

Réponses:


21

Je pense que la plupart des autres réponses ont manqué le point: il ne s'agit pas de remplacer les préférences de l'utilisateur, il s'agit de donner les images de la meilleure qualité dans le scénario commun de l'appareil d'un utilisateur attribuant plus d'un pixel physique pour chaque pixel CSS aka " Pixel de référence "dans votre image, ce qui entraîne la mise à l'échelle de l'image par le navigateur, ce qui la rend pixellisée et granuleuse.

Mes solutions suggérées ci-dessous, mais voici d'abord les quatre façons dont cela peut se produire:

  • Le plus rare: l'utilisateur choisit de zoomer . Pas un gros problème, car c'est leur choix.
  • Étonnamment commun: le navigateur de l'utilisateur est zoomé par défaut . Par exemple, de nombreuses machines Windows à haute densité de pixels sont agrandies par défaut à 125% ou plus par défaut, et Firefox a récemment (confusément!) Fait en sorte que dans ces cas, il indique aux utilisateurs qu'ils sont agrandis à 100% lorsqu'ils sont effectivement agrandis à 125% , les laissant se gratter la tête en se demandant pourquoi tout semble soudainement granuleux.
  • Très fréquent: la plupart des appareils Android (? Et autres appareils) ont un rapport de pixels supérieur à 1. Cela signifie que chaque « pixel CSS » se fait afficher à l' aide de plus d'un pixel physique - donc un 200px par 200px image réglée sur width: 200px; height: 200px;sera effectivement échelle cette image de 200 pixels par 200 pixels sur plus de 200 x 200 pixels, ce qui pourrait la rendre granuleuse.
  • Très fréquent: de nombreux appareils Apple modernes ont des " écrans rétine ". C'est essentiellement la même chose qu'un appareil Android avec un ratio de pixels de 2, mais avec un meilleur marketing et quelques propriétés personnalisées qui permettent de le détecter par son nom.

Tout cela entraînera le problème de John d'une galerie d'images d'un aspect étonnamment granuleux.


J'espérais que quelqu'un aurait une excellente solution à ce problème, mais pour l'instant, voici mes options préférées, en commençant par la plus efficace mais la moins universellement possible:

  1. Si possible, allez vector - SVG (ou Raphael.js si vous avez encore besoin de supporter IE8). En réalité, ce n'est qu'une option pour les icônes, les diagrammes, etc., et ce n'est jamais une option pour les photographies. Le SVG très complexe peut également être maladroit sur les mobiles bas de gamme en raison du traitement requis.
  2. Si possible, détectez le rapport de pixels de l'appareil et diffusez des images en fonction de cela. Cela peut également résoudre le problème de Firefox sur Windows car Firefox sur Windows modifie sa lecture des ratios de pixels lors d'un zoom avant et arrière. L'inconvénient est que cela devient un problème de codage délicat impliquant des travaux de développement côté serveur et côté client.
  3. Si 1. et 2. ne sont pas possibles, mais c'est vraiment important et la qualité d'image est plus importante que, disons, le temps de chargement, il suffit de doubler l'image.

    • C'est ce que Google fait avec leur logo sur leur page d'accueil: ils écrasent une image PNG de 538 px x 190 px dans un conteneur de 269 px x 95 px. C'est aussi plus ou moins la même chose que le fonctionnement des images réactives.

    • Auparavant, cela était considéré comme une mauvaise pratique car les anciennes versions d'IE étaient terribles pour réduire les images, mais celles-ci sont maintenant très rarement utilisées et beaucoup moins courantes que les écrans à haute densité de pixels. C'est encore quelque peu indésirable car cela augmentera la taille de l'image et augmentera donc le temps de chargement - c'est un compromis que vous devez juger au cas par cas.

    • Le doublement de la taille est courant car très peu d'appareils ont un rapport supérieur à 2, très peu d'utilisateurs font un zoom avant de plus de 200% et la mise à l'échelle des images à 50% est plus propre que les autres.
  4. Si 1, 2 ne sont pas possibles et que les temps de chargement sont une priorité trop élevée pour 3, je ne connais pas d'autres options, et ma recommandation est de ne pas s'en inquiéter, car la moitié des sites sur Internet ont le même problème , et les personnes ayant ce problème sur votre site auront également ce problème sur d'autres sites. Enfer, Firefox sur Windows pixélise même ses propres boutons d'interface utilisateur ...

Je conteste que les utilisateurs qui zooment soient «les plus rares». C'est à peu près pourquoi la fonctionnalité est là en premier lieu ... pour zoomer. De plus, bien qu'il existe des idées intéressantes avec l'utilisation d'images de plus haute résolution lors du zoom, notez qu'il pourrait y avoir des problèmes d'utilisation avec cela. Par exemple, je ne veux pas que le navigateur aille chercher de nouvelles images chaque fois que j'appuie sur l'option de zoom de mon navigateur.
DA01

2
Si vous utilisez des jpgs, doubler la taille des images (comme mentionné en 3) et les enregistrer avec un peu de compression d'image (aussi faible que la qualité 40) peut vous donner de petites tailles de fichier. Une fois réduits, les artefacts de compression ne sont pas visibles. Les résultats varient, en particulier lorsque les images contiennent des dégradés.
Dominic

1
Bien que très nouveau au moment de la rédaction et donc mal pris en charge, le nouvel élément <picture> semble mériter d'être mentionné ici.
user50849

1
À noter: lors de l'enregistrement pour le Web dans Photoshop, en définissant la qualité jpg à 61% tout en ayant le double des dimensions prévues, la taille du fichier sera presque exactement la même que les dimensions prévues à 100%. J'ai donc commencé à compresser tous mes fichiers JPEG à 61% et à les servir avec une hauteur / largeur définie (ce qui a également l'avantage de permettre au navigateur d'en savoir plus sur la mise en page avant même que l'image ne soit chargée!)
Kjeld Schmidt

4

Comme l'a commenté DA01, vous ne devez rien y faire.

Le zoom est une option spécifiée par l'utilisateur et est donc sous leur contrôle. Les paramètres avec lesquels ils décident de jouer ne devraient pas être de votre responsabilité.

Vous pouvez prendre en compte différents navigateurs et versions et quoi d'autre, mais raisonnablement, vous ne devriez pas tenir compte du zoom d'un utilisateur.

Bien sûr, vous pouvez représenter 125% ou 150% (et vous pourriez même ne pas avoir à le faire). Mais 200%, 300%, plus? Cela n'a tout simplement aucun sens.

Que faire si l'utilisateur utilise le thème des fenêtres à contraste élevé? Et s'ils utilisent constamment la loupe? On s'en fout?

Idéalement, votre site Web est suffisamment flexible pour ne pas faire une réelle différence entre une petite différence de zoom, mais les images diminueront de qualité avec le zoom, mais ce n'est pas votre responsabilité.

Ce n'est bien sûr que mon opinion, mais l'entreprise pour laquelle je travaille dit également explicitement aux clients que nous ne prenons pas en charge leurs préférences de zoom.


Qu'en est-il des utilisateurs avec des appareils à gamme ultra large ou étroite, etc., etc.? oui je suis d'accord
joojaa

1

D'autres personnes ont donné d'excellents conseils sur les problèmes auxquels vous serez confrontés et je ne suis pas assez bon dans ce domaine pour faire un bon tutoriel mais ...

Vous voudrez peut-être concevoir un site réactif qui s'ajuste en fonction de la résolution / de l'appareil de l'utilisateur, puis vous recherchez probablement du code qui fera basculer les images vers des fichiers de résolution supérieure ou inférieure sur demande, plutôt que d'étirer et de presser les images que vous avez.

La dernière fois que j'ai essayé de le faire, j'ai utilisé media-query.js et picturefill.js. Voir: http://responsivedesign.is/resources/images/picture-fill . J'avais une disposition en 3 colonnes où certaines images s'étalaient sur deux colonnes ... Lorsque la fenêtre du navigateur était suffisamment petite, les grandes images basculaient vers une version plus petite qui ne faisait qu'une seule colonne. Le navigateur de l'utilisateur chargerait simplement la version du fichier dont il avait besoin. (et dans mon cas, le plugin de maçonnerie déplacerait tout pour s'adapter).

Bien sûr, votre utilisateur doit avoir activé javascript ...


Bien que je sois tout à fait pour la conception Web réactive, cela gère un problème différent (redistribuant pour gérer différentes tailles de navigateur) que le zoom utilisateur (qui est un redimensionnement proportionnel de tout indépendamment de la taille du navigateur)
DA01

0

Vous ne pouvez pas forcer la main des utilisateurs. Les paramètres utilisateur ne vous conviennent pas. Les paramètres et les contourner est une mauvaise idée, il peut y avoir une raison pour laquelle l'utilisateur a fait quelque chose. Dans les deux cas, vous ne pouvez rien garantir sur les différents appareils.

En fait, si vous allez dans le côté technique, cela devient encore plus intéressant. Vous donnez vraiment les clés du royaume avec votre page Web. Voir l'utilisateur télécharge la page Web et l'utilisateur peut maintenant faire ce qu'il veut avec. Vous n'avez aucun contrôle sur cette couche, elle fonctionne après tout sur la machine des utilisateurs et ils peuvent faire ce qu'ils veulent. Même stackexhange n'a pas la même apparence sur mon ordinateur / mobile que sur le vôtre. Je change automatiquement certains aspects de l'interface graphique, pour corriger 2 bugs de rendu et j'ai ajouté 2 raccourcis.


3
Je pense qu'ils n'essaient pas d'empêcher l'utilisateur de zoomer, mais assurez-vous que si, par exemple, le navigateur de l'utilisateur par défaut est un zoom de 125% parce que Windows est étrange , les images semblent toujours nettes et n'apparaissent pas pixélisées.
user56reinstatemonica8

1
Peu importe, même chose
joojaa

2
Ce n'est vraiment pas la même chose ... par exemple, le logo de Google est une image PNG de 538 px x 190 px dans un conteneur de 269 px x 95 px. Cela signifie que si vous avez effectué un zoom avant ou que vous utilisez un écran à haute densité de pixels, l'image est moins susceptible d'être pixellisée car le navigateur peut utiliser ces données de pixels supplémentaires. Google ne joue pas avec les paramètres de zoom de l'utilisateur en procédant ainsi.
user56reinstatemonica8

Ce que vous faites de votre côté dépend de vous, oui. Mais si quelqu'un utilise un zoom de 259% alors ..
joojaa

1
Eh bien ta façon de penser d'aujourd'hui, les choses vont changer à l'avenir, un avenir très proche. Donc, toute personne ayant des problèmes de vision pourrait avoir 200% aujourd'hui demain 200% sera la norme compensant ne fait qu'aggraver le problème. Dans les deux cas, le problème deviendra incontrôlable tôt ou tard. Vous ne pouvez pas faire plus que des victoires temporaires, le système doit changer.
joojaa

0

Le comportement gênant de la mise à l'échelle des images sur les écrans HiDPI, qui conduit à des photos floues (alias le cauchemar des photographes), m'a également troublé pendant un certain temps. Je me suis également demandé s'il n'y avait pas d'attribut CSS simple pour le désactiver pour les images.

Ma solution actuelle avec CSS ressemble à ceci:

@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));
        }
}

L'étape suivante consisterait à utiliser des classes pour définir et définir différentes tailles d'image si nécessaire. Je ne sais pas comment obtenir dynamiquement les tailles d'image. La fonction CSS attr () ne semble pas fonctionner pour cela.


-1

Ce serait donc plutôt une question de programmation. Mais en utilisant JQuery, ou même juste un plan CSS, vous pouvez afficher différentes images en fonction de la largeur de l'écran des utilisateurs, de la hauteur de l'écran, etc.

Encore une fois, ce n'est probablement pas le stackexchange à demander.


La question ne concerne pas la taille de l'écran. Il s'agit des paramètres de zoom du navigateur.
DA01

-1

Vous pouvez simplement le faire via HTML dans la tête du site ajouter ceci

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

Ce n'est pas recommandé par les développeurs pour chaque type de site, mais devrait répondre à ce que vous demandez.


Je ne pense pas que cela ait un effet sur un navigateur de bureau.
DA01

1
J'ai essayé cela pour résoudre le même problème récemment et cela ne fonctionne pas. De plus, même si cela fonctionnait, cela résoudrait le problème dans le mauvais sens - empêchant le zoom, au lieu de rendre les images plus claires lors du zoom.
user56reinstatemonica8

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.