Resize image

Question

Well my system has an area where the user registers information about the site. So register images. The system does not restrict image size.

Then on the site are presented the images. However there are different parts on the site that carry image of different size.

Example:

At the home of the site the image must be 400x300.

Already in another part of the site 800x700.

And the registered image is 1600x1200.

Currently I use css to determine the size of it something like:

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

But I believe that this is not the right way, or there is a way to better treat these cases. I would like to know options on how to handle these cases more efficiently, using jQuery, css, or other technology.

Answer 1

When I don’t want to "destroy" the image quality, I don’t use the tag img, I’d rather create a div specifying exactly the width and height without compromising the image, thus:

CSS

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

You can follow the result in this DEMO

Depending on the situation it is totally impossible to use this method, however, I can ensure a good image visualization. I also advise the use for WEB applications, in mobile it is pleasant to use optimized images.

In my projects MVC C# I use the Simple.ImageResizer, in it I use a controller where I pass as parameter to URL image and it returns me the image readjusted according to the parameters that I also pass via query-string.

To install in your project, in the console type:

Install-Package Simple.Imageresizer

Man controller is this way

Photocontroller

Add the library reference

using Simple.ImageResizer.MvcExtensions;

And this will be yours 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);
}

I make a route to write friendly to URL of the image.

Routeconfig

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

Done this you can put the images this way.

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

OBS.: In projects we use a folder for images, so we have to map the path not to give problem, thus passing only the name of the file by the URL, I will leave as an example my helper mapped with the path.

Projectohelper

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

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

And in the controller the return line would look this way:

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

Both ways have solved my problem in several projects, I hope the idea applies to you.

Answer 2

What can be done is to create a CSS class for each element where the image is displayed by setting in these same classes the corresponding size for the same image.

Example:

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" />

Note: Beware of the dimensions to be defined in CSS because depending on the dimension can distort the image. If the original image does not follow a width and height pattern, this problem may occur. Perhaps, using only a delimiter, example, just the width, solve.

Answer 3

There are basically two approaches to working with different image sizes on the site, for example: small, medium and large.

Resizing on the server

Your system should receive an image setting a minimum size. Then use an image library to generate the three sizes according to your preferences.

Usually the small and medium sizes have the image resized and cut (edges) to fit in the predefined ratio and be well arranged in listings. Large images can usually keep their original size if displayed in a suitable location.

Resizing with CSS

It is possible to display a large image in multiple formats while maintaining the same aspect ratio. Example:

.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/images/srpr/logo11w.png"/>
<p>Médio</p>
<img class="medium" src="https://www.google.com/images/srpr/logo11w.png"/>
<p>Pequeno</p>
<img class="small" src="https://www.google.com/images/srpr/logo11w.png"/>

Demo at Jsfiddle

What’s the difference?

Resizing on the server, generating multiple images, is usually more efficient. While it takes a little longer and uses more space, it prevents absolutely all images from being transferred in full.

In this scenario, only the images the user really wants to see will be uploaded from the server, making the access experience faster and saving network bandwidth.

Imagine an access via 3G carrying several images of 1600 x 1200! The user will almost certainly give up accessing the page at some point if there are more than a few images.

The CSS approach is good for making small size adjustments and can serve as a temporary but not recommended solution.

Answer 4

You’re wearing it to yourself. NET MVC, could create in your Controller an Actionresult that receives as parameters the desired image, width and height.

For example :

    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");           
    }

and at the View

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

Just adapt to grab the database image, or a URL and etc.