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