0

I am using bit large images like 600x400 pixels. for web page

When i down size (160x127 pixels) these image they look good on FF, Chrome, Safari, but on IE 9 & below look bad.

can i somehow read the physical file on the web server and re-size it to a smaller dimension and send that binary file to client browser.

I am not sure if this approach will solve problem for IE.

I would appreciate code sample or a pointer to start.

Does jQuery have any algorithm to re-size image without quality loss

I FOUND THIS SOURCE

One way to "normalize" the appearance in the different browsers is using your "server-side" to resize the image. An example using a C# controller:

    public ActionResult ResizeImage(string imageUrl, int width)
    {
        WebImage wImage = new WebImage(imageUrl);
        wImage = WebImageExtension.Resize(wImage, width);
        return File(wImage.GetBytes(), "image/png");
    }


where WebImage is a class in System.Web.Helpers.

WebImageExtension is defined below:


    using System.IO;
    using System.Web.Helpers;
    using System.Drawing;
    using System.Drawing.Imaging;
    using System.Drawing.Drawing2D;
    using System.Collections.Generic;

    public static class WebImageExtension
    {
        private static readonly IDictionary<string, ImageFormat> TransparencyFormats =
            new Dictionary<string, ImageFormat>(StringComparer.OrdinalIgnoreCase) { { "png", ImageFormat.Png }, { "gif", ImageFormat.Gif } };

        public static WebImage Resize(this WebImage image, int width)
        {
            double aspectRatio = (double)image.Width / image.Height;
            var height = Convert.ToInt32(width / aspectRatio);

            ImageFormat format;

            if (!TransparencyFormats.TryGetValue(image.ImageFormat.ToLower(), out format))
            {
                return image.Resize(width, height);
            }

            using (Image resizedImage = new Bitmap(width, height))
            {
                using (var source = new Bitmap(new MemoryStream(image.GetBytes())))
                {
                    using (Graphics g = Graphics.FromImage(resizedImage))
                    {
                        g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
                        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                        g.DrawImage(source, 0, 0, width, height);
                    }
                }

                using (var ms = new MemoryStream())
                {
                    resizedImage.Save(ms, format);
                    return new WebImage(ms.ToArray());
                }
            }
        }
    }

note the option InterpolationMode.HighQualityBicubic. This is the method used by Chrome.

Now you need publish in a web page. Lets going use razor:

    <img src="@Url.Action("ResizeImage", "Controller", new { urlImage = "<url_image>", width = 35 })" />

And this worked very fine to me!

Ideally will be better to save the image beforehand in diferent widths, using this resize algorithm, to avoid the controller process in every image load.

(Sorry for my poor english, I'm brazilian...)

I will try this code and see if resolves my image problem.

Community
  • 1
  • 1
Learning
  • 19,469
  • 39
  • 180
  • 373

1 Answers1

0

On server side this can be easily done with System.Drawing.Image:

var origImg = Image.FromStream(imgSrcStream);
var resizedBitmap = new Bitmap(origImg, newWidth, newHeight);
resizedBitmap.Save( resizedImageStream, ImageFormat.Png );

To preserve scale use origImg.Width and origImg.Height to calculate desired newWidth and newHeight.

Vitaliy Fedorchenko
  • 8,447
  • 3
  • 37
  • 34