Jump to content

Archived

This topic is now archived and is closed to further replies.

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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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... :~~

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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!

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.