Como você lida com o zoom do navegador do cliente?

22

Eu tenho muitas imagens em uma página, uma galeria. Quero que as imagens permaneçam nítidas, para não fazer escala no navegador, uso as dimensões originais da imagem.

No entanto, isso funciona apenas quando o nível de zoom do navegador é 100%. Quando eu aumento ou diminuo o nível de zoom, a qualidade das imagens diminui.

Alguns clientes realmente têm níveis de zoom diferentes por padrão. Fiquei me perguntando, como você pode lidar com isso e nós lidamos com isso?

Felicidades

John
fonte
1
Ótima pergunta, isso é algo que me incomoda com frequência. Este artigo é útil para leitura em segundo plano , mas ainda não vi uma resposta perfeita para isso, além de colocar imagens em tamanho x2 com larguras e alturas fixas e deixar o navegador resolver o problema (tem desvantagens óbvias, mas corrige problemas de densidade de pixels e )
precisa saber é o seguinte
Não tenho certeza de que tipo de resposta você espera. Obviamente, você não deseja usar o redimensionamento automático. Você está perguntando como parar o navegador de redimensionar as imagens para que os outros elementos sejam organizados em torno do tamanho da imagem original? Como entregar automaticamente imagens preparadas para cada nível de zoom possível? Ou o que você tem em mente? Além disso, por que você quer fazer isso? Se um usuário tiver dificuldade em visualizar a página corretamente no zoom original, provavelmente não notará a diferença entre nítido e redimensionado automaticamente após o zoom.
Rumi P.
6
Você não lida com isso. Esta é uma preferência do usuário. Não há necessidade de interferir com isso.
DA01
1
Ele não está perguntando como interferir nas preferências do usuário. Ele está perguntando como lidar com o fato de muitos usuários serem ampliados por padrão e, portanto, obterão imagens granuladas se as imagens estiverem em suas dimensões originais.
precisa saber é o seguinte
@ user568458 sim. É assim que funciona. Não há realmente nada para lidar.
DA01

Respostas:

21

Acho que a maioria das outras respostas errou o ponto: não se trata de substituir as preferências do usuário, trata-se de fornecer imagens de melhor qualidade no cenário comum de um dispositivo de usuário atribuir mais de um pixel físico para cada pixel CSS, conhecido como " pixel de referência " "na sua imagem, resultando em um aumento na escala da imagem do navegador, tornando-o pixelizado e granulado.

Minhas soluções sugeridas abaixo, mas primeiro, aqui estão as quatro maneiras pelas quais isso pode acontecer:

  • Mais raro: o usuário escolhe aumentar o zoom . Não é um problema tão grande, pois é a escolha deles.
  • Surpreendentemente comum: o navegador do usuário é ampliado por padrão . Por exemplo, muitas máquinas Windows de alta densidade de pixels são ampliadas para 125% ou mais por padrão, e o Firefox recentemente (de forma confusa!) Fez isso nesses casos, informa aos usuários que elas são ampliadas para 100% quando na verdade são ampliadas para 125% , deixando-os coçando a cabeça se perguntando por que tudo de repente parece granulado.
  • Muito comum: a maioria dos dispositivos Android (e outros dispositivos?) Tem uma proporção de pixels maior que 1. Isso significa que todo "pixel CSS" é realmente exibido usando mais de um pixel físico - portanto, uma imagem de 200 x 200 pixels configurada para width: 200px; height: 200px;realmente ser dimensionada essa imagem de 200 por 200 pixels em mais de 200 x 200 pixels, potencialmente granulada.
  • Muito comum: muitos dispositivos modernos da Apple têm " telas de retina ". É basicamente o mesmo que um dispositivo Android com uma proporção de pixels de 2, mas com melhor marketing e algumas propriedades personalizadas que permitem que ele seja detectado pelo nome.

Qualquer uma delas resultará no problema de John de uma galeria de imagens com uma aparência surpreendentemente granulada.


Eu esperava que alguém tivesse uma ótima solução para esse problema, mas, por enquanto, aqui estão minhas opções preferidas, começando pela mais eficaz, mas menos universalmente possível:

  1. Se possível, acesse vector - SVG (ou Raphael.js, se você ainda precisar oferecer suporte ao IE8). Realisticamente, essa é apenas uma opção para ícones, diagramas etc., e nunca é uma opção para fotografias. SVG muito complexo também pode ser desajeitado em celulares de baixo custo, devido ao processamento necessário.
  2. Se possível, detecte a proporção de pixels do dispositivo e publique imagens com base nisso. Isso também pode resolver o problema do Firefox no Windows, porque o Firefox no Windows altera sua leitura das proporções de pixels quando aumenta e diminui o zoom. A desvantagem é que isso se torna um problema complicado de codificação que envolve trabalho de desenvolvimento no servidor e no cliente.
  3. Se 1. e 2. não forem possíveis, mas é realmente importante e a qualidade da imagem é mais importante do que, digamos, o tempo de carregamento, apenas o dobro da imagem.

    • Isso é o que o Google faz com o logotipo em sua página inicial: eles comprimem uma imagem PNG de 538px x 190px em um contêiner de 269px x 95px. Também é mais ou menos o mesmo que as imagens responsivas funcionam.

    • Isso costumava ser considerado uma prática ruim porque as versões antigas do IE eram péssimas para reduzir as imagens, mas agora elas são muito raramente usadas e muito menos comuns que as telas de alta densidade de pixels. Ainda é um tanto indesejável, pois aumenta o tamanho da imagem e, portanto, aumenta o tempo de carregamento - é uma troca que você precisa julgar caso a caso.

    • O tamanho da duplicação é comum porque muito poucos dispositivos têm uma proporção maior que 2, poucos usuários são ampliados em mais de 200% e as imagens em escala de 50% são mais limpas do que outras quantidades.
  4. Se 1, 2 não for possível e o tempo de carregamento for uma prioridade muito alta para 3, não conheço outras opções e minha recomendação é não se preocupar com isso, porque metade dos sites da Internet tem o mesmo problema , e as pessoas com esse problema no seu site também terão esse problema em outros sites. Inferno, o Firefox no Windows até pixeliza seus próprios botões de interface do usuário ...
user56reinstatemonica8
fonte
Concordo que os usuários que fazem o zoom são "mais raros". É por isso que o recurso existe em primeiro lugar ... para aumentar o zoom. Além disso, embora existam idéias interessantes com o uso de imagens de alta resolução no zoom, observe que pode haver desafios de usabilidade com isso. Por exemplo, não quero que o navegador busque novas imagens toda vez que clico na opção de zoom no meu navegador.
DA01
2
Se você estiver usando jpgs, dobrar o tamanho das imagens (como mencionado em 3) e salvá-las com um pouco de compactação de imagem (tão baixa quanto a qualidade 40) pode gerar arquivos pequenos. Uma vez reduzidos, os artefatos de compressão não são visíveis. Os resultados variam, especialmente quando as imagens contêm gradientes.
Dominic
1
Embora muito novo no momento da escrita e, portanto, pouco suportado, o novo elemento <picture> parece merecer menção aqui.
User50849
1
Observação: ao salvar para a Web no photoshop, definir a qualidade do jpg para 61% e dobrar as dimensões pretendidas, o tamanho do arquivo será quase exatamente o mesmo que as dimensões pretendidas em 100%. Então eu comecei a comprimir todos os meus JPEGs para 61% e servi-los com uma altura / largura definida (que também tem a vantagem de deixar o navegador saber mais sobre o layout, mesmo antes de a imagem é carregada!)
Kjeld Schmidt
4

Como comentou o DA01, você não deve fazer nada a respeito.

O zoom é uma opção especificada pelo usuário e, portanto, está sob seu controle. As configurações que eles decidem mexer não devem ser de sua responsabilidade.

Você pode contabilizar diferentes navegadores e versões e o que não, mas razoavelmente falando, você não deve considerar o zoom de um usuário.

Claro que você pode responder por 125% ou 150% (e talvez nem precise). Mas 200%, 300%, mais? Isso simplesmente não faz sentido.

E se o usuário usar o tema do Windows de alto contraste? E se eles estiverem constantemente usando a lupa? Quem se importa?

Idealmente, seu site é flexível o suficiente para não diferir muito entre pequenas diferenças de zoom, mas as imagens diminuirão em qualidade com o zoom, mas isso não é de sua responsabilidade.

Obviamente, essa é apenas a minha opinião, mas a empresa em que trabalho também diz explicitamente aos clientes que não suportamos suas preferências de zoom.

Hanna
fonte
whatabout usuários com UltraWide ou da gama estreita dispositivos etc etc .... Sim, eu concordo
joojaa
1

Outras pessoas deram ótimas dicas sobre os problemas que você enfrentará e eu não sou bom o suficiente nessa área para fazer um bom tutorial, mas ...

Convém criar um site responsivo que se ajuste de acordo com o dispositivo / res do usuário e, provavelmente, você está procurando um código que altere as imagens para arquivos de res mais altos ou mais baixos quando solicitado, em vez de esticar e apertar as imagens que você possui.

Quando tentei fazer isso pela última vez, usei media-query.js e picturefill.js. Consulte: http://responsivedesign.is/resources/images/picture-fill . Eu tinha um layout de 3 colunas, onde algumas imagens abrangeriam duas colunas ... Quando a janela do navegador era pequena o suficiente, as imagens grandes passavam para uma versão res menor, com apenas uma coluna de largura. O navegador do usuário apenas carregava a versão do arquivo necessária. (e no meu caso, o plugin de alvenaria moveria tudo para acomodar).

Obviamente, seu usuário precisa ter o javascript ativado ...

marcusdoesstuff
fonte
Enquanto eu sou tudo para web design responsivo, que lida com um problema diferente (reflui para lidar com diferentes tamanhos de navegador) do usuário-zoom (que é redimensionamento proporcional de tudo independente do tamanho do navegador)
DA01
0

Você não pode forçar a mão do usuário. As configurações do usuário não são suas para brincar. Configurações e contorná-las é uma má ideia, pode haver uma razão pela qual o usuário fez alguma coisa. Em ambos os casos, você não pode garantir nada nos vários dispositivos.

De fato, se você entrar no lado técnico, isso se torna ainda mais interessante. Você realmente dá as chaves do reino com sua página da web. Veja se o usuário baixa a página da Web e agora pode fazer o que quiser com ela. Você não tem controle sobre essa camada, afinal ela está sendo executada na máquina dos usuários e eles podem fazer o que quiserem. Mesmo o stackexhange não tem a mesma aparência no meu computador / celular e no seu. Altero alguns aspectos da GUI automaticamente, para corrigir 2 erros de renderização e adicionei 2 atalhos.

joojaa
fonte
3
Acho que eles não estão tentando impedir o usuário de aumentar o zoom, mas verifique se, por exemplo, o navegador do usuário usa o zoom de 125% porque o Windows é estranho , as imagens ainda parecem nítidas e não pixelizadas.
precisa saber é o seguinte
1
Não importa, a mesma coisa
joojaa
2
Eles realmente não são a mesma coisa ... por exemplo, o logotipo do Google é uma imagem PNG de 538px x 190px em um contêiner de 269px x 95px. Isso significa que, se você foi ampliado ou usando uma tela de alta densidade de pixels, é menos provável que a imagem seja pixelizada porque o navegador pode usar esses dados extras de pixels. O Google não está jogando com as configurações de zoom do usuário fazendo isso.
precisa saber é o seguinte
O que você faz no seu final depende de você sim. Mas se alguém usa um zoom 259%, então ..
joojaa
1
bem, o seu pensamento de hoje, as coisas vão mudar no futuro, muito próximo. Portanto, qualquer pessoa com problemas de visão pode ter 200% hoje, amanhã 200% será a norma compensada apenas piora o problema. Em ambos os casos, o problema ficará fora de controle mais cedo ou mais tarde. Você simplesmente não pode fazer mais do que vitórias temporárias, o sistema deve mudar.
Joojaa
0

O comportamento irritante de aumentar a escala de imagens nas telas HiDPI, o que leva a fotos borradas (também conhecido como pesadelo dos fotógrafos), também me incomoda há algum tempo. Também me perguntei que não há um atributo CSS simples para desativar isso nas imagens.

Minha solução atual com CSS é assim:

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

O próximo passo seria usar classes para definir e definir diferentes tamanhos de imagem, se necessário. Não sei como obter dinamicamente os tamanhos das imagens. A função CSS attr () parece não funcionar para isso.

egrimpa
fonte
-1

Portanto, isso seria mais uma questão de programação. Porém, usando JQuery, ou mesmo apenas CSS plano, é possível exibir imagens diferentes com base na largura da tela do usuário, altura da tela e assim por diante.

Novamente, embora isso provavelmente não seja a troca de pilha a ser perguntada.

Daniel
fonte
A questão não é sobre o tamanho da tela. É sobre as configurações de zoom do navegador.
DA01 08/09
-1

Você pode simplesmente fazer isso via HTML no cabeçalho do site e adicionar este

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

Isso não é recomendado pelos desenvolvedores para todo tipo de site, mas deve realizar o que você está pedindo.

Zac Grierson
fonte
Eu não acho que isso tenha algum efeito em um navegador de desktop.
DA01 8/09/14
1
Eu tentei isso para resolver o mesmo problema recentemente e não funciona. Além disso, mesmo que funcionasse, resolveria o problema da maneira errada - impedindo o zoom, em vez de fazer com que as imagens mantenham a clareza ao aumentar o zoom.
user56reinstatemonica8