Best way to Compress images for thumbnails

osyris 236 Reputation points
2022-08-06T23:14:12.74+00:00

I have used the code from this document :

https://learn.microsoft.com/en-us/dotnet/desktop/winforms/advanced/how-to-set-jpeg-compression-level?view=netframeworkdesktop-4.8

It does what it should be doing. It lowers the quality and the img size
But for some reason when I use that lower quality image as a Thubmail (200px by 300px)
even only using 70% quality in the EncoderParameter it looks terrible,
every line in the image looks very pixelated, but when I see the full size of the lower quality image
it looks fine i hardly see any difference from the original image,

So im questioning if scalling down the image quality is the best way to create a Thumbnail,
Im not very familiar with image resizing.
Maybe scalling down the pixale size is better ?

I have tried this code :

    Image Imgfile = Image.FromFile(Path);                 
      
    var NewImage = new Bitmap(300,200);  
          
     using var a = Graphics.FromImage(NewImage);  
     a.DrawImage( Imgfile, 0, 0, 300, 200);  

this does scalle down the height and width to 300 x 200 but the Image size increased by 10x
the original image was 270kb and it turned into 1.2mb.

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,080 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,222 questions
ASP.NET API
ASP.NET API
ASP.NET: A set of technologies in the .NET Framework for building web applications and XML web services.API: A software intermediary that allows two applications to interact with each other.
286 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. SurferOnWww 1,796 Reputation points
    2022-08-07T00:32:44.45+00:00

    I understand that you can use the graphics functions available in the System.Drawing namespace which rely on the GDI+ of Windows OS.

    If so, I suggest that you set the Graphics.InterpolationMode property to InterpolationMode.HighQualityBicubic. Shown blow is sample code:

    #pragma warning disable CA1416  
       
    using System.Drawing;  
    using System.Drawing.Drawing2D;  
    using System.Drawing.Imaging;  
       
    namespace MvcCore6App.Utils  
    {  
        public class ImageUtils  
        {  
            // Make thumb of the size newWidth x newHeight  
            public static byte[] MakeThumb(byte[] fullsize, int newWidth, int newHeight)  
            {  
                using (MemoryStream ms1 = new MemoryStream(fullsize))  
                using (Image iOriginal = Image.FromStream(ms1))  
                {                                  
                    double scaleW = (double)iOriginal.Width / (double)newWidth;  
                    double scaleH = (double)iOriginal.Height / (double)newHeight;  
       
                    // Rectangle for triming original image  
                    Rectangle srcRect = new Rectangle();  
       
                    if (scaleH == scaleW)  // width = height => no triming  
                    {  
                        srcRect.Width = iOriginal.Width;  
                        srcRect.Height = iOriginal.Height;  
                        srcRect.X = 0;  
                        srcRect.Y = 0;  
                    }  
                    else if (scaleH > scaleW) // heigt > width => trim height  
                    {  
                        srcRect.Width = iOriginal.Width;  
                        srcRect.Height = Convert.ToInt32((double)newHeight * scaleW);  
                        srcRect.X = 0;  
                        srcRect.Y = (iOriginal.Height - srcRect.Height) / 2;  
                    }  
                    else   // height < width => trin width  
                    {  
                        srcRect.Width = Convert.ToInt32((double)newWidth * scaleH);  
                        srcRect.Height = iOriginal.Height;  
                        srcRect.X = (iOriginal.Width - srcRect.Width) / 2;  
                        srcRect.Y = 0;  
                    }  
       
                    using (Image iThumb = new Bitmap(newWidth, newHeight))  
                    using (Graphics g = Graphics.FromImage(iThumb))  
                    {  
                        g.InterpolationMode = InterpolationMode.HighQualityBicubic;  
                        Rectangle destRect = new Rectangle(0, 0, newWidth, newHeight);  
                        g.DrawImage(iOriginal, destRect, srcRect, GraphicsUnit.Pixel);  
       
                        using (MemoryStream ms2 = new MemoryStream())  
                        {  
                            iThumb.Save(ms2, ImageFormat.Jpeg);  
                            return ms2.GetBuffer();  
                        }  
                    }  
                }  
            }  
        }  
    }   
    
    0 comments No comments

  2. Laiq 1 Reputation point
    2022-09-29T13:52:33.61+00:00

    Big image files slow down page load times and make your site appear "larger." You can avoid these issues by compressing your images with a website like Jpeg compress

    0 comments No comments