ASP.NET MVC slow image loading through MVC framework?

Question

On some photobook page i want to show appr 20 thumbnails. These thumbnails are programatically loaded from a database. those thumbnails are already resized. When i show them the images load kinda slow. some take 0.5 seconds to load some wait for 2 secons. The database doesn't matter because when i remove the database layer, the performance issue still exists.When i load the same images directly with html the problem the images do load immediately.

Is loading images/files through the mvc framework slow or am i missing something?

This goes too slow

//in html
<img src='/File/Image.jpg' border='0'>                    

//in controller
public FileResult File(string ID)
{           
    //database connection removed, just show a pic
    byte[] imageFile = System.IO.File.ReadAllBytes(ID);
    return new FileContentResult(imageFile,"image/pjpeg");
}

This goes immediately

<img src='/Content/Images/Image.jpg' border='0'>                    

Answer 1

You are adding processing overhead by exposing the image via MVC. When you directly link to an image, it is handled automatically by IIS, rather than the MVC pipeline, so you skip a lot of overhead.

Also, by loading into a byte array, you're loading the full image from disk into memory and then streaming it out, rather than just streaming directly from disk.

You might get slightly better performance with this:

[OutputCache(Duration=60, VaryByParam="*")]
public FileResult File(string ID)
{   
    string pathToFile;
    // Figure out file path based on ID
    return File(pathToFile, "image/jpeg");
}

But it's not going to be quite as fast as skipping MVC altogether for static files.

If the above fixes it for you, you'll probably want to mess around with the caching parameters.