Bom dia,

Ao usar equipamentos com resolução elevada em ecrãs pequenos, a maior parte das imagens fica desfocada. Bons exemplos são os novos portáteis de 13" com ecrãs de alta resolução, dispositivos híbridos como o Surface Pro 3 ou aparelhos com ecrã de retina da Apple.

Para alguém que faça os websites, quão difícil é fazer com que as imagens pareçam bem em todos os ecrãs, e qual é o método que é utilizado para que isso aconteça?

Imaginei que pudesse ser tão fácil como disponibilizar na pasta de recursos imagens de dimensões superiores, e depois este tipo particular de dispositivos já conseguiria redimensionar a imagem de modo a que não ficasse desfocada. No entanto, consigo aperceber-me de uma desvantagem imediata: imagens de maiores dimensões ocupam mais espaço e demoram mais tempo a carregar. E isso é a última coisa que qualquer webmaster quer.

Será por esta última razão que a maior parte dos websites possuí imagens que não são bem reproduzidas por aparelhos com alta resolução e pequenos ecrãs?

Melhores cumprimentos,

Boas,

Em primeira instancia, acho que isso não é propriamente prioritário.

A menos que esteja a falar de um site especificamente dedicado a conteúdos de alta resolução (como, por exemplo, fotos) o utilizador comum não deve destingir grandes diferenças ao ver um site num equipamento "regular" e noutro com maior resolução (como os ecrãs retina).

Sim, podem ser verificadas certas diferenças, mas é realmente importante ou são assim tão significativas que "estraguem" o conteúdo?

Agora, falando apenas das imagens (deixando de parte o design do site e afins), existem N formas de apresentar uma imagem dependendo do equipamento. Só como exemplo, existem dezenas de plugins do jquery para essa tarefa...

Também não deverá possuir um impacto tão significativo no carregamento, excepto se estivermos a falar de sites que são praticamente construídos em imagens (o que não é recomendado de todo).

Outra opção passa por alterar as imagens, quando possível, por outro conteúdo, como um combinado de CSS/texto puro.

Por exemplo, dando o caso de um logótipo, é perfeitamente possível aliar CSS a texto puro para criar algo simples mas eficaz, e que seja totalmente compatível com equipamentos de alta resolução/DPI.

Cumps

@DJPRMF,

De que forma é que mudar as imagens para umas de maior dimensão (apenas nos recursos, mantendo a mesma dimensão no website) poderia estragar o conteúdo?

Boas, em embora não existem "milagres" poderás utilizar uma framework para facilitar nessa tarefa.

Experimenta então dar uma visita aqui: http://getbootstrap.com/

Abraços, Smeek

@Aprendiz, não sei se estamos a falar da mesma coisa.

Uma coisa é a adaptação de imagens para elevadas resoluções (sem mexer no tamanho das mesmas). Outra é criar imagens ou um design responsivo (como é o caso do bootstrap).

Ao que é que se está a referir em concreto?

@Smeek, obrigado pela partilha. Parece ser uma ferramenta interessantíssima!

@DJPRMF, o meu monitor tem 2560x1600píxeis. Como é um ecrã de 13", esta resolução não é a real e o meu sistema operativo mostra uma resolução semelhante a 1440x900. Ora, ao carregar uma página web, vai carregar também as suas imagens, e quando elas aparecem, aparecem ligeiramente desfocadas (não é muito, mas se se olhar com atenção nota-se). Eu quero descobrir porque é que isto acontece (comigo e com quem tem ecrãs semelhantes) de forma a que o meu website mostre as imagens correctamente para todos os ecrãs. Daí a minha assunção que o problema vem da dimensão da imagem, mas posso estar a fazer uma grande confusão.

Faz também sentido referir que este problema não é característico apenas a dispositivos como o meu, porque há websites que mostram as imagens sem que elas fiquem desfocadas: o da Apple, Ubuntu, GitHub, o link mencionado pelo @Smeek do bootstrap, etc. Ora, se há uns sites que mostram as imagens em condições e a maioria não, não posso dizer que a maioria está a construir os websites incorrectamente, mas assim parece...

Acho que existe aqui alguma confusão...

Em primeiro lugar, a resolução que refere é "real". O monitor é pequeno, mas a resolução que possui configurada é a que efectivamente está a ser apresentada. Portanto, se está a 2560x1600 px, é essa a resolução que possui.

Agora, quando à "desconfiguração", poderia deixar um exemplo de sites onde isso não ocorra?

E, se possível, também uma screenshot onde verifique o "desfocado" (deve ser visível dessa forma, já que é algo relativo à resolução).

Então vamos por partes...:

O meu ecrã tem de facto 2560x1600 píxeis. Mas um dos truques para que num ecrã de 13 polegadas tudo não pareça infinitesimamente pequeno é usar-se uma resolução alterada[1] de forma a que tanto o texto como algumas imagens não fiquem tão pequenas. (isto se eu entendi correctamente como funciona)

Ao usar estas resoluções alteradas, uma imagem que tenha por exemplo 500x500 píxeis pode estar a ser representada numa zona do ecrã com o dobro dos píxeis, ainda que simule o tamanho de 500x500. É difícil explicar isto...

Agora para exemplos... Deixo dois printscreens, um com a resolução que vem pré-definida (2x inferior ao número de píxeis, ou seja, 1280x800) e outro com uma resolução de 1680x1050. A diferença é que com a primeira resolução tanto o texto como as imagens ocupa é representada pelo dobro dos píxeis normais. Consegue ver-se uma ligeira diferença na qualidade do logo da google quando se colocam os dois printscreens lado a lado. Há websites que tornam essa diferença mais óbvia, mas infelizmente não me lembro de um exemplo concreto, e também não tenho muito tempo para procurar, espero que consiga perceber através dos printscreens.

printscreen1 - resolução prédefinida: 1280x800 no ecrã de 2560x1600

printscreen2 - resolução 1680x1050 no ecrã de 2560x1600

Uma pequena curiosidade: até nem dá para aumentar a resolução através das definições de resolução além dos 1680x1050 sem recurso a software de terceiros porque tanto o texto como as imagens ficariam demasiado pequenas num ecrã de 13 polegadas.

Referências:

[1] FAQ sobre ecrãs de retina - deverá ser igual à técnica usada pela microsoft para o seu Surface Pro 3

Boas,

Ah, neste caso estamos a falar do Mac OS, que é um pouco diferente nesse aspecto.

Bom, indo às imagens, as da Google não são um bom exemplo neste caso, já que a propria imagem do doodle é já "desfocada" de origem

Nota-se sim a diferença relativa à propria resolução, mas a imagem em si não é muito visível (embora sim, exista alguma).

Em comparação directa: https://i.imgur.com/QJGnge5.png

(deixo o link para puder ver em detalhe na resolução máxima)

Agora, para o que refere, deixo um pequeno guia que pode ajudar a compreender melhor: http://ivomynttinen.com/blog/a-guide-for-creating-a-better-retina-web/

Isto aplica-se às imagens. Se formos a ver no framework ou design de um site, já não têm directamente relevância com o facto de ser "retina" ou não

Cumps

Boa tarde,

É mesmo esse o problema, achei o guia 5 estrelas!

Uma última questão: de que forma é que o MacOS é diferente do Windows dentro deste problema das imagens?

De acordo com algumas reviews que vi, o Surface Pro 3 também sofre deste problemai... (insisto no Surface por ser um exemplo famoso)

O problema não é tanto na resolução nem tão pouco do sistema operativo directamente, mas sim na densidade dos pixéis. O ecrã retina possui uma densidade superior a outros ecrãs, e dai que possua a qualidade superior de imagem.

Essa densidade elevada torna todos os conteúdos mais "limpos" para o olho humano, mas apenas se as imagens tiverem sido desenvolvidas para esse fim. 

Qualquer equipamento que possua uma densidade de pixéis elevada irá verificar algo similar, não só os sistemas com o Mac OS ou o Surface...

Basicamente, a preocupar-se com esse aspecto, o guia que indiquei anteriormente refere de forma geral os ecrãs "Retina", mas pode-se aplicar a qualquer ecrã com elevada densidade de pixéis.

OK, então agora estou mais que esclarecido, era mesmo esta a resposta que procurava!

Obrigado pela ajuda, @DJPRMF

EDIT: não consigo marcar o tópico como resolvido...

Sempre às ordens...

E quanto ao EDIT, tente alterar o titulo do tópico na ultima mensagem. A edição da mensagem inicial do topico não é possível após 24 horas

Aprendiz escreveu:Como já passaram 24 horas não consigo alterar o título do tópico... Faria sentido que o "agradecer" colocasse o tópico como resolvido (i.e. fizesse isso por mim)...

Obrigado pelo feedback e ideia.

O titulo pode sempre ser alterado a partir da ultima mensagem enviada. Ao editar a mesma, na secção inferior, possui a opção de alterar o titulo desta. Neste caso já apliquei por si