Storing your thumbnails in the correct mime type

By default Episerver stores you thumbnails, or any image you store using an ImageDescriptor attribute, as a .png file. This is hard coded in the ThumbnailManager and there probably are good reasons for this.
But maybe you want to store your thumbnails in the same type as the original image

To to this we have to replace some methods of the thumbnail manager.

In the container configuration of your dependency resolver replace the ThumbnailManager by you own implementation

The remove the hard coded .png mime type we overide the CreateImageBlob method.

Unfortunately we cannot override the CreateThumbnailUri from ThumbnailManager, so we create our own method for generating the correct Uri.
Although our thumbnails are now stored in the correct mime type, the filename stored in the database still has the extension .png.
To resolve this we have to set the right blobs in our Media object. This can be done by subscribing to some events.

Our images are now stored in the correct mime type and we can also see the thumbnail correctly in the UI.
A disadvantage of storing the images in the same type as the original is that we might lose transparency in our thumbnails. For example when using .jpg file, where we will end up with white borders.

A little disclaimer: This in not production ready code. It was just a quick and dirty test to see if it was possible.

 

  • folkertsj

    This is a great article. We are running into the same problem based on the forum post here “http://world.episerver.com/forum/developer-forum/-EPiServer-75-CMS/Thread-Container/2016/3/episerver-thumbnails/”. To answer Vincent Yangs response. I think it all comes down to image size. IF you have a 2000 wide pixel image and want to make it, lets say 1600, you are now storing a 1600px wide png file compared to lets say, a jpeg. You can see the file size will be greatly reduced. It all comes down to performance in my eyes but that is just my .02 cents. We use the thumbnail manager and extend it to give us better control of the thumbnails we want. Working on a focal point thumbnailer as we speak and this as caused some riff as we generate the thumbnails based on our coordinates and save the image as the same mime type of the uploaded image. Thanks again for the post Mark.
    Cheers

    • Mark van Dijk

      You’re welcome.
      Have you ever considered using ImageResizer for resizing your images?
      I’m still looking for a good way to do art direction on images in Epi
      see: https://usecases.responsiveimages.org/#art-direction
      If you have any thoughts on that please let me know.