Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

tonkleber

Diminuir imagem via HTML tag <img> perde a qualidade

Recommended Posts

Olá pessoal sou novo aqui no forum.

Estou desenvolvendo um sistema Web onde eu preciso reduzir a resolução

da imagem dinamicamente via width e height da tag <img>, mas quando eu faço isso a imagem perde a qualidade alguém sabe se tem como resolver isto?

O interessante é que quando eu utilizo o zoom do browser para ampliar ou reduzir a página (não muito) a qualidade da imagem fica boa...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Valeu Scaico, mas não era bem isso que eu queria.

Na verdade o que está acontencendo é que quando eu diminuo a imagem ela perde a qualidade de resolução, por exemplo:

 

Eu tenho uma imagem de 7000px X 472px e gostaria de usar esta mesma imagem com outras resoluções: 180px X 85px,

600px X 250px. etc e queria fazer isto utilizando a tag <img>. A imagem original fica boa mas as outras perdem a qualidade de resolução e se eu for criar uma imagem para cada resolução, vou ter que criar muitas imagens.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então... o "resize" que o HTML é capaz de fazer infelizmente não comtempla essa "perda/ganho" de qualidade.

Sempre que você tentar pegar uma imagem de 7000px X 472px, e colocar numa tag com os atributos:

<img src="" alt="" style="width:180; height:85px;" />
Teremos sim um efeito indesejado, mas nem HTML nem CSS é capaz de contornar essa situação.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então... o "resize" que o HTML é capaz de fazer infelizmente não comtempla essa "perda/ganho" de qualidade.

Sempre que você tentar pegar uma imagem de 7000px X 472px, e colocar numa tag com os atributos:

<img src="" alt="" style="width:180; height:85px;" />
Teremos sim um efeito indesejado, mas nem HTML nem CSS é capaz de contornar essa situação.

Exato, mas pelo que eu li naquele tópico que citei acima, dá pra fazer com PHP, sem perder qualidade...

 

Eu não testei, mas o povo falou que funcionou... :~~

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, mesmo que você não queira criar uma imagem apropriada para cada resolução, só para constar (e você mesmo já sabe disso), alteração de imagem pelo browser não é bom.

 

Já faz um tempo, rolou um bate-papo sobre isso, e lá inclusive eu expresso minha opinião a respeito disso, se quiser dar uma conferida:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Imagem Expansible

Abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se precisar fazer algo do tipo com topo dinâmico você pode fazer uma tabela que no meio tem um fundo que expandido não parece que é um fundo. Então ele conecta as duas imagens das extremidades das tabelas e na alteração bruta de resolução não gera problemas. Creio que em fóruns, como aqui por exemplo este recurso é utilizado, então se a intenção for de repente um logo adaptável para variadas resoluções está é uma forma boa de contornar.

 

Abraços,

Giancarlo Braga.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se você quer a imagem pequena! Gere um thumb dela, ou deixe-a pequena mesmo

 

mas se for para aumentar o tamanho quando clicar por exemplo, não vejo problema algum em distorcer um pouco, quando a pessoa clicar vai ficar certinho!

 

 

abraço

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se precisar fazer algo do tipo com topo dinâmico você pode fazer uma tabela que no meio tem um fundo que expandido não parece que é um fundo. Então ele conecta as duas imagens das extremidades das tabelas e na alteração bruta de resolução não gera problemas. Creio que em fóruns, como aqui por exemplo este recurso é utilizado, então se a intenção for de repente um logo adaptável para variadas resoluções está é uma forma boa de contornar.

 

Abraços,

Giancarlo Braga.

Pederia me dar algum exemplo desta técnica, acho que não entendi direito?

 

Vou tentar a idéa do thumb.

Valeu pelas dicas de todos!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.