5

I am working on some site performance issues with image sizes and quality on a home page. I can take care of the quality with javascript and post loading. But I thought about converting all images to WebP as they are uploaded by the editors. So when they upload a new jpeg or png, it would be converted and the extension would be changed to webp. Then the converted image would be stored in the database.

Any thoughts on what pipelines to inject/override to capture the file before the item is created in Sitecore and before the image makes it into the blog field.

I have looked into some existing source code like this one, but it handles it on the request of the image. I want to do it on upload.

3

You have two options:

  1. tap into the <uiUpload> pipeline
  2. Use media upload events

Generally speaking, I almost always recommend going with a pipeline over eventing, if the option is available. However, in this case, if there is any possibility that your media could be uploaded programmatically then I recommend that you subscribe to one or more of the following events, based on your requirements:

  • media:upload
  • media:batchupload
  • media:multiupload

The uiUpload pipeline

The <uiUpload> pipeline is a great solution if you know that your custom logic only needs to fire when a content author uploads the media. The processor fires once per content authoring action, meaning that regardless of whether the author uploads one file or five the logic will only have to run one time. This is great for performance, and means that both "multi-upload" and "single upload" are covered.

The only problem with the uiUpload pipeline is the ui part: it only runs when the upload is triggered from the Sitecore Client. For this reason, if there is a possibility that the media that your logic needs to run on will be uploaded programmatically then the uiUpload pipeline is not the solution for you.

The media:upload and related events

Sitecore's eventing model is a fantastic tool for use in a variety of circumstances. In this case, the eventing model fills in the gap left by the <uiUpload> pipeline by providing support for the execution of custom logic when a media item is uploaded outside of the Sitecore Client.

The upload events are as follows:

  • media:upload - raised when a media item is uploaded to Sitecore. The
  • media:multiupload - raised when multiple media items are uploaded at once.
  • media:batchupload - raised when media is uploaded via the /upload folder on the file system

The greatest negative to the media events is their performance cost to the Sitecore Client authoring experience, as compared to the <uiUpload> pipeline. In general, events tend to be a bit heavier than pipelines - one of, if not the worst being the item:saved event. However, due to the fact that the media events are not repeatedly called for a single action, the performance cost for the three listed events is minimal.

4

Some time has gone after asking this question, and I think it was solved.

But for someone, who will find this question in future, this could be helpful.

I have created fork of Dianoga.

How WebP optimization works there:

Browser sends request to server to get image. If browser supports WebP image format then it sends image/webp value in Accept header. It is possible to detect this header on server and return WebP image to browser instead of JPEG or PNG. If browser doesn't support WebP then other image optimizers are executed.

How to enable WebP support:

  1. Enable Dianoga.WebP.config.disabled config
  2. Open web.config and change line with MediaRequestHandler to use Dianoga MediaRequestHandler
  3. If you have custom MediaRequestHandler (e.g. Habitat is used) then skip step 2 and override DoProcessRequest method with detection of support of WebP format.

e.g:

protected override bool DoProcessRequest(HttpContext context, MediaRequest request, Media media)
{
    if (context?.Request.AcceptTypes != null && (context.Request.AcceptTypes).Contains("image/webp"))
    {
        request.Options.CustomOptions["extension"] = "webp";
    }

    return base.DoProcessRequest(context, request, media);
}

For more details, please review GitHub repository.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.