Devblocks CMS Image Optimizer

Webflow already compresses images in two places. You can select assets in the Assets panel and click Compress, or open the Collections panel and run Compress assets across an entire CMS Collection, converting JPEG and PNG files to WebP or AVIF. Both are manual actions you trigger yourself, and neither watches a collection for new uploads. Large images stay the most common reason for slow load times, so a library that grew faster than anyone compressed it sits heavy until somebody works through it.

Devblocks CMS Image Optimizer is a Webflow Marketplace app that batch-converts existing Webflow CMS images to WebP using TinyPNG as its compression engine. You pick the collections, and the app writes a compressed file back into each CMS item in place, so nobody re-uploads anything by hand.

The teams that get the most out of it run image-heavy CMS sites where the backlog is measured in years. Blog operators carry the largest volume, since every post added a featured image and a handful of in-article photos. Portfolio owners hit the same wall with full-resolution project galleries.

How to integrate Devblocks CMS Image Optimizer with Webflow

What is Devblocks CMS Image Optimizer? It is a Webflow Marketplace app built by Devblocks, a software development agency that also ships Ecommerce apps for Webflow. The app converts existing CMS images to WebP through TinyPNG, and its Marketplace listing covers Image fields, Multi-Image fields, Rich Text images, and Ecommerce images.

Teams usually go looking for this after a site has published content faster than anyone compressed it. Check what Webflow does on its own first: the image conversion tool now compresses a whole CMS Collection in one action, with a documented limit of 100 assets per request. The app is not the only route to a compressed library, and on some sites it is not the fastest one.

Four routes cover the work, and they differ mainly in how much you want to automate:

• The Devblocks CMS Image Optimizer app converts existing CMS images to WebP from a Marketplace app window, with no code and no API keys to manage.
• The Webflow MCP server exposes compression as a tool an agent can call, which is the one programmatic route Webflow documents for converting assets.
• The Webflow Data API supports a custom pipeline that compresses images on your own trigger, at the cost of server-side development.
• Webflow's built-in conversion handles collection-wide WebP and AVIF conversion without any third party, and it is the baseline the other three should beat.

Most sites can start with the built-in tool and reach for the app or the API only when its output or its manual trigger does not fit the workflow.

Install the Devblocks CMS Image Optimizer app

This is the no-code path, and it installs like any other app from the Webflow Apps panel. Devblocks builds and supports it, with support reachable at hello@devblocks.co.

To set up the integration:

1. Open the Apps panel in Webflow from the left toolbar.
2. Search for Devblocks CMS Image Optimizer and click Install on site.
3. Authorize the app, which requests read and write access to assets, CMS data, and site data and publishing.
4. Launch the app, select the CMS collections you want processed, and start the batch.

Two things still earn this app its place. It reaches Rich Text images, which Webflow never generates responsive variants for, and it applies a single compression engine across every supported field type in a collection without anyone selecting assets individually. Set against that, the app runs only when someone opens it, its output is WebP with no AVIF option, it overwrites originals with no documented rollback, and every image it touches still sits under the 4MB ceiling that applies to any Image field upload. Teams that want compression to happen without a person present need one of the next two methods.

Compress images with the Webflow MCP server

Compression is one of the actions the Webflow MCP data tools expose, so an agent can run it against a site without anyone opening a panel. The data_assets_tool carries a compress_assets action that starts an async task converting JPG, PNG, and WebP assets to WebP or AVIF, replacing the files in place, rate limited to 10 calls per minute per site. No REST endpoint for compression appears in the assets reference, which makes this the documented programmatic route.

To drive it, connect the MCP server to your client, then have the agent list the site's assets, filter to the JPG and PNG files you care about, and call compress_assets with the asset IDs and your target format. Pairing it with the CMS tools lets the same agent report which collections the compressed assets belong to, which the app window does not do.

Build with the Webflow Data API

Devblocks CMS Image Optimizer publishes no API and no webhooks, so nothing external can trigger it. Developers who want compression to fire on their own schedule build a service against the Webflow Data API instead, supplying their own compression step.

Four pieces of the API carry that build:

• Collection items: The CMS collection items endpoints read and update image fields across staged and live items, which is where the compressed file has to land.
• Asset uploads: The Assets API works in two steps, registering the file to get a presigned Amazon S3 uploadUrl before you post the binary to it.
• Event triggers: Webflow webhooks fire on events such as collection_item_created and collection_item_changed, giving your service its entry point.
• Scope planning: Registering a webhook needs sites:write, reading an item needs cms:read, writing one back needs cms:write, and uploading a file needs assets:write.

Item-level events are the only entry point available, because no asset-level trigger exists in the event enum.

Auto-compress images on new CMS items

This pipeline compresses images as editors add CMS content, which is the one job neither the app nor the built-in tool does on its own.

To build it:

1. Register a webhook with POST /v2/sites/{site_id}/webhooks and set triggerType to "collection_item_created".
2. When the event fires, fetch the item with GET /v2/collections/{collection_id}/items/{items_id} and read its image fields.
3. Compress each image in your service, then register the result with POST /v2/sites/{site_id}/assets, passing a fileName under 100 characters and an MD5 fileHash.
4. Post the binary to the uploadUrl returned in step 3, then write the new asset into the item with PATCH /v2/collections/{collection_id}/items/live.

One caveat follows this path all the way through. Responsive srcset variants are created only for images uploaded directly in Webflow, so anything your service pushes in through the API arrives without them and needs to be sized correctly before upload.

What you can build with the Devblocks CMS Image Optimizer Webflow integration

Compressing a CMS library in batches changes what you can ship without a redesign, because the page weight comes down while the templates stay exactly as they are.

Four jobs come up repeatedly on image-heavy Webflow sites:

• Faster blog archives: Convert the featured images and in-article photos across years of posts in one pass instead of opening items one at a time.
• Lighter portfolio galleries: Compress full-resolution work samples in CMS-powered portfolio collections so case study pages ship smaller files on the same layout.
• Cleaned-up rich text content: Compress the inline images editors embedded in rich text fields, which matter more than most because Webflow never gives them responsive variants.
• Lighter LCP images on CMS templates: Shrink the hero and card images feeding article and category templates, where images are the LCP element on 73.3% of mobile pages per the 2024 Web Almanac.

If you would rather serve resized images from an external CDN than rewrite what sits in the CMS, Cloudinary covers that pattern. See how to serve responsive images from it on a Webflow site.