Render a view containing hundreds of images

Question

My viewmodel object contains approximately 200 to 300 objects.

One property for that object is an 100x100px image converted to Base64string.

Here is my code for rendering the entire collection:

<table class="table-condensed">
    <tbody>
        @foreach (var ua in day.Value)
        {
            <tr>
                <td style="width: 105px;">
                    <img src="data:image;base64,@ua.UserProfileImage" style="width:100px;height:100px;" alt="User Image" />
                </td>
                <td valign="top">
                    <b>@ua.UserFirstName @ua.UserLastName</b> <a asp-controller="Users" asp-action="File" asp-route-id="@ua.UserId">(Profile)</a><br />
                    @if (!string.IsNullOrEmpty(ua.TeamName))
                    {
                        <small>@ua.TeamName</small><br />
                    }
                    <span class="label label-default">@ua.FunctionName</span><text>&nbsp;</text><span class="label label-default">@ua.HireDate</span>
                </td>
            </tr>
        }
    </tbody>

The logic and the time till the controller returns the data is 0.5 seconds so my problem isn't there.

The render speed for the entire view is about 5 to 8 seconds because of those many images.

Is there a way to improve that number?

I'm using ASP.NET Core 2.

The @dav_i solution at this question could help you? https://stackoverflow.com/questions/17952514/mvc-how-to-display-a-byte-array-image-from-model — Jordi Jordi, Jun 18 '18 at 16:45
The solution provided there is for a single image while here i'm dealing with 200+ of them — Cristian Szpisjak, Jun 18 '18 at 16:49
Have you optimized the images for bandwidth and set appropriate caching for them? — John Wu, Jun 18 '18 at 17:15
I run the default cache configuration with minimum optimization done for the images. I will try to do what you are saying. Can you give me some directions? — Cristian Szpisjak, Jun 18 '18 at 18:00

score 0 · Answer 1 · answered Jun 18 '18 at 16:45

0

You can use Ajax javascript to load every image and you can implement some pagination , the load time will be the same but on the client side it looks better

answered Jun 18 '18 at 16:45

Wilmar Arias

186
8

That's what i end up doing a couple weeks ago but it didn't improved my render speed. I'm searching for a solution to decrease the page load despite using Ajax or the default render engine. – Cristian Szpisjak Jun 18 '18 at 16:48
@CristianSzpisjak it didnt improve your render speed likely because you didnt implement lazy loading correctly. I guarantee lazy loading would speed up page rendering when done correctly – maccettura Jun 18 '18 at 16:58

score 0 · Answer 2 · answered Jun 18 '18 at 16:55

0

You should consider to use lazy image loading https://github.com/craigbuckler/progressive-image.js. You can see at demo that images are not loading until you scroll to their destination

answered Jun 18 '18 at 16:55

Kacper Marcisz

26
5

Render a view containing hundreds of images

2 Answers2