1. TugaTech » Programação, Scripts e Webmasters » Programação, Scripts e Webmasters

Siga-nos

Realize o Login na sua conta ou Registe-se para participar.

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

Aprendiz

Avançado
avatar

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,

Ver perfil do usuário http://goncalotomas.com

DJPRMF

Administrador
avatar

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


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

Aprendiz

Avançado
avatar

@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?

Ver perfil do usuário http://goncalotomas.com

Smeek

Avançado
avatar

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

Ver perfil do usuário

DJPRMF

Administrador
avatar

@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?


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

Aprendiz

Avançado
avatar

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

 

@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... Smile

Ver perfil do usuário http://goncalotomas.com

DJPRMF

Administrador
avatar

Acho que existe aqui alguma confusão... Razz

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).


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

Aprendiz

Avançado
avatar

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

 

Ver perfil do usuário http://goncalotomas.com

DJPRMF

Administrador
avatar

Boas,

 

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

 

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 Razz

 

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: http://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 Wink

 

Cumps


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

Aprendiz

Avançado
avatar

Boa tarde,

 

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

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)

Ver perfil do usuário http://goncalotomas.com

DJPRMF

Administrador
avatar

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.


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

Aprendiz

Avançado
avatar

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

Obrigado pela ajuda, @DJPRMF

 

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

Ver perfil do usuário http://goncalotomas.com

DJPRMF

Administrador
avatar

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 Wink


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

Aprendiz

Avançado
avatar
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)... Wink

Ver perfil do usuário http://goncalotomas.com

DJPRMF

Administrador
avatar

@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)... Wink

 

Obrigado pelo feedback e ideia. Smile

 

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 Wink


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum




Aplicações do TugaTechAplicações TugaTechBlog TugaTechBlog do TugaTechRSS TugaTechRSS do TugaTechSpeedtest TugaTechSpeedtest TugatechHost TugaTechHost TugaTech