To display images from a database, you can make use of the DynamicDownload.aspx. This page will handle not only the displaying of the image, but also handles all the related security as well. By default the DynamicDownload.aspx will give you the image in the original file size. So if you want to display a list of 50 people that all have a profile image of 1 MB, this resulted in a total download by the browser of 50 MB worth of images. Even in this day and age of fast internet connections, this is very browser friendly. So as of today we are roling out an improvement where you can auto-resize the image as requested.
Specify the MaxWidth or the MaxHeight
We have added 2 additional parameters through which you can specify the exact width or height you need. Let's say, the original image is 1500 x 1500 pixels. But you want to display it as an icon that is 100 x 100 pixels. In that case you can add the parameter MaxWidth=100. Since this is a square image, you could also use MaxHeight=100.
Which of these you use is up to you. If you want to display all the images in a column, they should have the same width and you would specify the MaxWidth. Is it more important that all the rows have the same allignment, you can use the MaxHeight.
What if you use both of them?
Let's take that 1500 x 1500 pixels image again. If you set MaxWidth=200 and MaxHeight=100, you will get an image of 100 x 100 pixels. In other words, we make the image as small as possible as requested, but we always keep the ratio aspect in mind. There will be no cropping and no distortion.
Making it bigger does not work
Same image, but now with the MaxWidth=2000. You will get an image of 1500 x 1500 pixels. Otherwise it would result in a blurry or even pixelated image. So if the MaxWidth exceeds the width of the original image, you will simply get the original image.
Resizing images to just the size you need will really improve performance, especially on slower connections. We had a test case where users could upload their profile photo. These photos were used in a search page where they were displayed as user icons. Using the Chrome Developer Tools we could see that the overall download size of the images was reduced to less than 5% of the original download size. Just by adding the MaxWidth or MaxHeight to get the resized versions of the images.