Diminuir imagem via HTML tag <img> perde a qualidade

[tonkleber 0]

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

[Scaico 0]

Olá tonkleber,

 

dá uma olhada nesse tópico aqui:

http://forum.imasters.com.br/index.php?showtopic=189848

 

talvez ajude!

 

Abraços

[tonkleber 0]

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.

[William Bruno 1501]

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.

[Scaico 0]

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

[Paulo de Tarso F. M. 24]

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!

[Giancarlo Braga 0]

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.

[Giovani 104]

Giancarlo Braga, estamos num fórum de Webstandards e tabelas são para dados tabulares, não para montar layout.

 

Paulo, bom link que você passou!

Isso só prova que uma pesquisada antes de postar ajudar http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Aprendiz CSS 3]

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

[tonkleber 0]

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!