6

Bom meu sistema conta com uma área onde o usuário cadastra informações sobre o site. Assim cadastra imagens. O sistema não restringe o tamanho da imagem.

Então no site são apresentadas as imagens. Porém existem partes diferentes no site que carregam imagem de tamanho diferente.

Exemplo:

No home do site a imagem precisa ter 400x300.

Já em outra parte do site 800x700.

E a imagem cadastrada tem 1600x1200.

Atualmente utilizo o css para determinar o tamanho dela algo como:

img{
   width:400px;
   height:300px;
}

Porém acredito que este não seja a forma correta, ou exista uma forma para melhor tratar esses casos. Gostaria de saber opções de como tratar esses casos de uma forma mais eficiente, podendo ser utilizando jQuery, css, ou outra tecnologia.

4
  • Você quer restringir o tamanho no momento do upload ou redimensionar o tamanho delas na exibição?
    – Caputo
    21/07/2014 às 12:29
  • Tratar a imagem na exibição. 21/07/2014 às 12:30
  • 2
    Você tem algum server side script em seu site? ASP, PHP, .Net, JSP ? 21/07/2014 às 12:42
  • .NET, com MVC !!! 21/07/2014 às 13:02

4 Respostas 4

3

Quando eu não quero "destruir" a qualidade da imagem, eu não utilizo a tag img, eu prefiro criar uma div especificando exatamente a largura e altura sem comprometer a imagem, ficando desta forma:

CSS

.img {
    background:url(url_da_imagem);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

Pode acompanhar o resultado nesta DEMO

Dependendo da situação é totalmente inviável utilizar este método, entretanto, consigo garantir uma boa visualização da imagem. Também aconselho o uso para aplicações WEB, em mobile é agradável utilizar imagens otimizadas.

Em meus projetos MVC C# eu utilizo o Simple.ImageResizer, nele utilizo um controller onde passo como parâmetro a URL da imagem e ele me retorna a imagem reajustada de acordo com os parametros que também passo via query-string.

Para instalar em seu projeto, no console digite:

Install-Package Simple.ImageResizer

Meu controller fica desta forma

PhotoController

Adicionar a referência da biblioteca

using Simple.ImageResizer.MvcExtensions;

E esse será sua action

[OutputCache(VaryByParam = "*", Duration = 60 * 60 * 24 * 365)]
public ImageResult Index(string file, int w = 0, int h = 0)
{
    return new ImageResult(file, w, h);
}

Faço uma rota para escrever amigavelmente a URL da imagem.

RouteConfig

routes.MapRoute(
   name: "Photo",
   url: "Photo/{file}",
   defaults: new { controller = "Photo", action = "Index", file = ""}
);

Feito isso você pode colocar as imagens desta forma.

<img src="Photo/caminho_da_foto.jpg?w=largura&h=altura" alt="" />

OBS.: Nos projetos utilizamos uma pasta para imagens, então temos que mapear o caminho para não dar problema, assim passando apenas o nome do arquivo pela URL, deixarei como exemplo meu helper mapeado com o caminho.

ProjetoHelper

private static string path = @"D:\caminho\das\fotos\";

public static string PhotosUploadFolder(string subfolder = "")
{
   return Util.path + subfolder;
}

E no controller a linha de retorno ficaria desta forma:

return new ImageResult(ProjetoHelper.PhotosUploadFolder(file), w, h);

As duas formas tem resolvido meu problema em diversos projetos, espero que a ideia se aplique à você.

6
  • Muito bom o resultado. Melhor do que a forma como utilizo atualmente. Mas se o .NET adaptar a imagem(cortar) não é mais performático? 21/07/2014 às 18:35
  • 1
    Atualizei a resposta, sim o ideal é trabalhar com imagens otimizadas, é uma boa prática. 21/07/2014 às 18:38
  • Preciso instalar o Simple.ImageResizer.MvcExtensions, também né? Aqui dá erro por causa do framework ser 4.0 21/07/2014 às 18:52
  • Isso, deve instalar ele também. 21/07/2014 às 18:56
  • Aqui dá erro por causa do framework ser 4.0. 21/07/2014 às 18:57
2

O que pode ser feito é criar uma classe CSS para cada elemento onde a imagem for exibida, definindo nestas mesmas classes, o tamanho correspondente para a mesma imagem.

Exemplo:

CSS:

img1
{
    width: 250px;
    height: 100px;
}

img2
{
    width: 600px;
    height: 250px;   
}

HTML:

<img src="image/img_01.jpg" class="img1" />

<img src="image/img_01.jpg" class="img2" />

Obs.: Cuidado com as dimensões a serem definidas em CSS pois, dependendo da dimensão pode distorcer a imagem. Se a imagem original não seguir um padrão de largura e altura, pode ocorrer este problema. Talvez, utilizando apenas um delimitador, exemplo, apenas a largura, resolva.

1
  • 1
    Eu gostaria de uma forma onde eu pudesse cortar a imagem, ou algo do tipo, onde trato melhor a imagem. Como citei no tópico já utilizo esse método. 21/07/2014 às 13:27
2

Existem basicamente duas abordagens para trabalhar com diferentes tamanhos de imagens no site, por exemplo: pequenas, médias e grandes.

Redimensionando no servidor

Seu sistema deve receber uma imagem, definindo um tamanho mínimo. Então, use uma biblioteca de imagens para gerar os três tamanhos de acordo com suas preferências.

Geralmente os tamanhos pequeno e média têm a imagem redimensionada e cortada (bordas) para caber na proporção pré-definida e ficarem bem dispostos em listagens. Já as imagens grandes geralmente podem manter seu tamanho original se forem exibidas em um local adequado.

Redimensionando com CSS

É possível mostrar uma imagem grande em vários formatos mantendo a proporção da mesma. Exemplo:

.original {
    width: 100%;
    height: auto;
}
.medium {
    width: 240px;
    height: auto;
}
.small {
    width: 120px;
    height: auto;
}
<p>Grande</p>
<img class="original" src="https://www.google.com.br/images/srpr/logo11w.png"/>
<p>Médio</p>
<img class="medium" src="https://www.google.com.br/images/srpr/logo11w.png"/>
<p>Pequeno</p>
<img class="small" src="https://www.google.com.br/images/srpr/logo11w.png"/>

Demo no JSFiddle

Qual a diferença?

Redimensionar no servidor, gerando várias imagens, é geralmente mais eficiente. Embora demore um tempinho a mais e use mais espaço, evita que absolutamente todas as imagens sejam transferidas na íntegra.

Nesse cenário, apenas as imagens que o usuário realmente quiser ver serão carregadas do servidor, deixa a experiência de acesso mais rápido e economizando banda de rede.

Imagine um acesso via 3G carregando várias imagens de 1600 x 1200! O usuário quase certamente vai desistir de acessar a página em algum momento, se houver mais de algumas imagens.

A abordagem via CSS é boa para fazer pequenos ajustes no tamanho e pode servir como uma solução temporária, mas não recomendada.

3
  • Era isso que eu queria saber. No site naotempreco.com.br, observo, ao inspecionar elemento na imagem, o site trata os links da imagem como /large, /small, se você editar isso elas ficam grande e pequena. Você saberia me dizer como é feito isso? 21/07/2014 às 16:18
  • @DiegoZanardo Como é feito o redimensionamento em .NET? Ou o redirecionamento na URL?
    – utluiz
    21/07/2014 às 16:22
  • Response.Redirect(site); 21/07/2014 às 16:23
2

Pra você que está usando .NET MVC, poderia criar em sua Controller uma ActionResult que receba como parâmetros qual a imagem, a largura e a altura desejadas.

Por exemplo :

    public ActionResult ThumbNail(int largura, int altura)
    {
        WebImage webImagem = new WebImage(@"C:\imagem.png")
            .Resize(largura, altura, false, false);

        return File(webImagem.GetBytes(), "image/png");           
    }

e na View

<img src="@Url.Action("Thumbnail", "SeuController", new { largura = 100, altura = 50 })" alt="thumbnail" />

Só adaptar para pegar a imagem do banco de dados, ou de um URL e etc.

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .