Images in server are loading very slowly

Question

User739135361 posted

Hi,

In my application, I am trying to create user profile. These profiles also have images. Users are loading hd images which is causing to load very slowly.  I am checking for the file extention of the images and loading them. But is their a way to compress hd images if a user uploads without loosing much clarity?

What are all the other options I need to consider? Server capability ? Hosting? or fine tune the application?

Regards,

N1ZAM

Answer 1

User753101303 posted

Hi,

See for example: https://stackoverflow.com/questions/1922040/how-to-resize-an-image-c-sharp

Never tried yet but ASP.NET Core should be similar if using https://www.nuget.org/packages/System.Drawing.Common

Maybe not noticeable for this usage but more likely the quality will degrade as the difference between the original and targeted size grows...

Answer 2

User1686398519 posted

Hi N1ZAM,

• Regarding the problem of slow image loading, you can refer to the suggestions given in this link.
• I made an example on how to compress pictures when uploading, you can refer to it.

Model

    public class test
    {
        [Key]
        public int Id { get; set; }
        public string filename{ get; set; }
    }    
    public class FileModel
    {
        public HttpPostedFileBase File { get; set; }
    }

Controller

        public MVCTestContext db = new MVCTestContext();
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(HttpPostedFileBase file)
        {
            string filename = "Compress-" + file.FileName;
            string path = Server.MapPath("/Images");
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }
            string targetPath = Path.Combine(path, filename);
            Stream strm = file.InputStream;
            if (ReduceImageSize(0.5, strm, targetPath))
            {
                var test = new test { filename = filename };
                db.tests.Add(test);
                db.SaveChanges();
            }
            return RedirectToAction("show"); ;
        }
        public ActionResult show()
        {
            return View(db.tests.ToList());
        }
        private bool ReduceImageSize(double scaleFactor, Stream sourcePath, string targetPath)
        {
            try
            {
                using (var image = System.Drawing.Image.FromStream(sourcePath))
                {
                    var newWidth = (int)(image.Width * scaleFactor);
                    var newHeight = (int)(image.Height * scaleFactor);
                    var thumbnailImg = new Bitmap(newWidth, newHeight);
                    var thumbGraph = Graphics.FromImage(thumbnailImg);
                    thumbGraph.CompositingQuality = CompositingQuality.HighQuality;
                    thumbGraph.SmoothingMode = SmoothingMode.HighQuality;
                    thumbGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;
                    var imageRectangle = new Rectangle(0, 0, newWidth, newHeight);
                    thumbGraph.DrawImage(image, imageRectangle);
                    thumbnailImg.Save(targetPath, image.RawFormat);
                }
                return true;
            }
            catch
            {
                return false;
            }
        }

Index

@model WebApplication5.Models.FileModel
@using (Html.BeginForm("Index", "CompressImage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.TextBoxFor(model => model.File, new { type = "file" })
    <button type="submit">submit</button>
}
@Html.ActionLink("show", "show")

show

@model IEnumerable<WebApplication5.Models.test>
<table class="table">
    <tr><td>filename</td><td>file</td></tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.filename</td>
            <td><img src="@Url.Content(Path.Combine("/Images",@item.filename))" /> </td>
        </tr>
    }
</table>

Here is the result.

Best Regards,

YihuiSun

Answer 3

User932909087 posted

Hi Nizam,

You may need to check that you have optimized your images or not. If you believe you have optimized all your sites, include your code, etc, then you must check your server specs. If you are using shared hosting, the server might be overloaded so it impact to your site speed.