PNG files larger than 6MB are resized to 200 x 200px when using BlobStorage

[aguyfromdenmark]

When on a project that uses the BlobStorage provider for media handling, you upload a PNG image larger than 6MB, it will automatically be resized to 200 x 200px.

Steps to reproduce

• Login to the backoffice of a project that is using the BlobStorage provider
• Upload a PNG image larger than 6MB trough the Media library
• Go to the uploaded image, and see that the width and height is now 200

Expected result

The uploaded PNG image will keep its real size.

Actual result

The image is resized to 200 x 200 pixels.

Technical data

Umbraco 8.12.2 running on Umbraco Cloud

[aguyfromdenmark]

I have spent a lot of time talking to Umbraco support about this, trying to get to the bottom of it.
Here are the latest finding:

• There is a soft size cap for PNG images, it's 6MB.
• The problem is probably that, in ImageHelper.cs, some stuff happens, and method ends up hitting the return on line 59, returning the default size. The default size is defined in the "Conventions" class on line 98 as 200.
  

Thanks to André and the other Umbraco support warriors who helped with these findings.

[hjaltedaniel-umbraco]

I have investigated this with @HamDerAndrew in the support team.
We have narrowed this issue down to being an issue with the stream that defines the height and width of an image, when the project is using blob storage. By implementing some logging on the MediaService.Saved event we can get some more data about what is happening.

When the project is using Blob storage, this is the error that System.Drawing.Image is producing:
System.ArgumentException: Parameter is not valid. at System.Drawing.Image.FromStream(Stream stream, Boolean useEmbeddedColorManagement, Boolean validateImageData)

This gist (https://gist.github.com/hjaltedaniel-umbraco/dc81348889115f83bc24540291198c0e) has a composer that can be used to create a similar approach to what ImageHelper is using to set the width and height.
From my investigation it seems that this can be narrowed down to an issue with the stream, when it comes from Blob storage.

[sitereactor]

I'm not entirely sure of the effect of the default size and inner workings of this, but sounds like its a CMS issue which results in the image being uploaded to blob storage will have that of the default size (which seems odd, but okay).

@hjaltedaniel-umbraco have you checked if you get the same result locally through the cms without Blob Storage - as in, does the image end up being 200x200 as well?

[aguyfromdenmark]

Both @HamDerAndrew and I tested it locally, not running blobstorage, and there is no issue there.

[hjaltedaniel-umbraco]

@sitereactor Yup - checked my reproduction code on the following:

On a Cloud project without blob storage. No issues the height and width was logged

On a Cloud project with blob storage. The error was logged

Locally with manually configured blob storage. The error was logged.

Locally without blob storage. The width and height was logged.

I saw similar behavior with the image height and width in back office. W/O blob worked fine - with set the height and width to default values.

[hjaltedaniel-umbraco]

And to add even more specifics - there are no issues with the uploaded image. It is there in it's full size and everything.
The issue is only that the width and height is not set correctly, which can cause issue if you're doing any logic based on those data.

[sitereactor]

Okay thanks for clarifying. I got the impression that the image was uploaded as 200x200px, which confused me a bit 😅 ... We think its related to the stream being read multiple times when uploaded to blob storage. But we'll need to dive a bit more into the codebase to see where it makes sense to apply a fix.

[marcemarc]

HI @sitereactor came across this too, it seems to only be on Umbraco Cloud, it's fine on the community Azure Blob Storage package.

The tipping point is 4mb!

With PNGs, they have no EXIF data embedded
(so JPEGS work fine)

When there is no EXIF data it falls back to use GDI+ and I think here lies the problem if you are reading the data back in blocks from the blob storage provider, then the max size for each block is 4mb,

https://stackoverflow.com/questions/6911728/cloudblob-openread-is-not-reading-all-data

which then I think causes it to fall back to the 'defaults' in the angularJS, 200px x 200px. (https://github.com/umbraco/Umbraco-CMS/blob/809fd819821770472dec3eb2d7241f7d39f3c918/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js#L92) if I've read that right!

A similar issue was discovered on the community Azure Blob Storage package: umbraco-community/UmbracoFileSystemProviders.Azure#156 (comment) when trying to solve a problem of loading the whole blob into memory...

So it may depend on the version of the SDK you are using with the Cloud Blob Storage provider...

If that helps!

regards

Marc

[PratheesUmbraco]

I have tested this out on V8 and V9 where I used the same image

V8 still gives the same error

But V9 works as intended

BR,
Prathees

[rpteasolutions]

Umbraco has made an update to Umbraco.Cloud.StorageProviders.AzureBlob.dll. Get version 2.0.6 for v7 and 3.0.6 for v8.

[aguyfromdenmark]

Umbraco has made an update to Umbraco.Cloud.StorageProviders.AzureBlob.dll. Get version 2.0.6 for v7 and 3.0.6 for v8.

Will this be a part of a patch or update for v8?

[rpteasolutions]

Umbraco has made an update to Umbraco.Cloud.StorageProviders.AzureBlob.dll. Get version 2.0.6 for v7 and 3.0.6 for v8.

Will this be a part of a patch or update for v8?

@PratheesUmbraco Can you answer this? I just upgraded the dll manually to check if it worked. Only tested on v7 so far.

[meyntony]

Hi @rpteasolutions ,

Thanks for confirming that it has worked. We will look into an autoupgrade with the fix for all websites.

[sitereactor]

I'm closing this issue as the update is being rolled out today to all v7 and v8 sites on Umbraco Cloud.