Best way to Compress images for thumbnails

Question

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.

Answer 1

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

Answer 2

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