Contentful logo

Contentful Community

Asset Compression

From reading up and testing I can see that when you upload an asset (e.g. image) via Contentful UI or via the contentful management SDK, it ‘processes’ it and then makes it available on Cloudfront.

From what I can tell, the resulting image on the Cloudfront is the same image in terms of quality and file size. Most of my editors don’t really understand the need of reducing the size of these assets. I would like to take this out of their hands by reducing the size of the assets on upload with some lossless compression API, similar to https://tinypng.com/developers/reference and storing the resulting file in Cloudfront instead.

I’ve looked through the UI extensions and Contentful Management API but there isn’t much I can do from an asset management point of view. I realise there are ways I can request said image in various formats (webp), crops and sizes on a per image URL basis but I’m looking at filtering the image at the point of upload rather than put all that strain on my various servers delivering the content.

Any suggestions, tips, tools or advice you can give would be greatly appreciated.

Hi Adam,

Unfortunately what you want to do is not currently possible. The closest thing would be to set up a webhook to listen for new assets, download the asset, optimize it and then upload & publish the optimised version.

Cheers,
Rouven

Hi @adam.barnwell,

I think there is a lot that can be done with a UI extension for asset management. The UI Extension SDK has functions to get, create, update, process, publish, unpublish, archive, unarchive, and delete assets.

What you are trying to do could be done with a UI extension which offers the user a choice to upload a new image or choose an existing image (similar to Contentful’s native asset selectors).

New Image
If the user chooses to upload a new image, that image could be sent to the tinypng.com API to be compressed. The response from tinypng.com would include a location header with a URL to the compressed image which the UI extension can then use to create, process, and publish an asset in Contentful so that compressed image is now stored and served from Contentful.

Existing Image
If the user wants to choose an existing image, using the UI Extension SDK’s dialogs.selectSingleAsset or dialogs.selectMultipleAssets functions, the user can be shown Contentful’s native asset selector dialogs.

Hope this helps!

2 Likes

I’m really surprised this isn’t just baked into contentful. To me the value that contentful brings, is making it easy for designers and authors to publish content. However, without this feature I always end up with blog posts that have a size of 100mbs.

@shane The feature is indeed baked into Contentful, that’s what the Images API is there for.

I can tell from experience, that scaling and compressing images in Contentful doesn’t make sense. It’s much more convenient to store the original in Contentful’s media library have have the front-end scale and compress the images via the Images API to whichever specification needed.

If and when your layout eventually changes, you don’t have to go through all the hassle of generating new images - assuming you have the originals, that is - nor store multiple versions of the same images in Contentful. Very handy especially if you’re using source sets on your website or just want to do some performance tweaking by testing different resolutions and compression rates. All you have to do is change couple URL parameters in your front-end code.

@teemu.tammela1 I can understand why you would want the original on Contentful. However, it would be good if the Images API you referenced be upgraded to add a ‘compressed’ argument. It already offers functionality for cropping, resizing, format and background colour. When you request these, it uses the original, runs it through a function on Contentful side (AWS Lambda I presume) to manipulate it the way you’ve requested and caches the resulting file in CloudFront. It would be good if they could add lossless compression to the list of functions you can perform, with CloudFront caching it and allowing you to use the compressed version via their CDN. That way, Contentful still hosts the original but you get a nice compressed version at request.

@adam.barnwell Could you please specify what you mean by lossless compression? PNG or some other format?

@teemu.tammela1 Sure thing. I was referring to the compression of JPEG and PNG files with the goal of reducing their file size but but keeping the visible quality. Services such as Compressor IO and TinyPNG do this by removing every other pixel and/or scraping off headers, making discreet changes to alpha pixels etc…

Some of the tricks used to archive drop in file size sound a bit gimmicky and of questionable quality and pragmatic, but having a parameter in the Images API that strips headers and metadata from an image would indeed be a nice addition.

There is an option in the Image API to specify a JPEG quality. It maybe isn’t exactly what you are going for (it is lossy compression), but it would let you reduce the file size. You also can convert to PNG and request 8-bit PNG images which would also reduce the file size (but with a dramatic loss of quality).

Thanks Charlie, I looked into that but as you’ve pointed out, it was lossless and I was looking at something our marketing team didn’t have to make any decisions on and just let the system do it’s thing.

Ultimately, I may have to built my own service to do this but it may be an idea of a feature you could sell.