Pixie CMS Image Optimizer

Images in a Webflow CMS collection publish at whatever size the editor uploaded, up to the image field’s 4 MB limit, and the built-in conversion tool only handles Assets panel images. Bulk compression across collection image fields still means downloading each file, compressing it externally, and re-uploading it by hand. On a collection with hundreds of items, that workflow stops scaling. Pixie CMS Image Optimizer handles bulk CMS image optimization from one interface, with resizing and WebP conversion options.

Connecting Pixie with Webflow brings the whole workflow into one interface. Pixie authenticates through Webflow OAuth and reads your collections over the Webflow Data API v2, runs your chosen optimization and WebP conversion settings on each image, then writes the results straight back to the same CMS fields. Pixie says it can improve image load time by up to 80% without sacrificing quality.

The integration suits Webflow agencies managing image quality across multiple client sites. It also fits teams maintaining CMS-heavy sites, including large product catalogs and active blogs.

How to integrate Pixie CMS Image Optimizer with Webflow

What is Pixie CMS Image Optimizer? Pixie is a Webflow CMS image optimizer built by Lil Big Things, a Webflow agency. It compresses CMS images and can resize them or convert JPEG and PNG files to WebP, using TinyPNG for compression. It connects to Webflow through OAuth and the CMS API v2, and works on images at the collection-item level.

A review on its Trustpilot page says Lil Big Things uses it “for all of our clients’ websites to save time and optimize page load speeds.” Support for Webflow eCommerce product images arrived in January 2023, so product catalogs run through the same workflow.

Pixie supports these workflows:

• The Pixie app in the Webflow Marketplace resizes and crops assets directly in Webflow without writing code.
• The Pixie web app connects through Webflow OAuth and runs bulk or selective optimization across CMS collections.
• The Webflow Data API v2 gives you full control over custom image pipelines, but requires server-side development.

The Marketplace app handles quick asset edits; the web app handles bulk CMS runs.

Install the Pixie app

The Pixie - CMS Image Optimizer app is listed in the Webflow Marketplace with the “Approved by Webflow” review designation. Its app extension runs inside Webflow, so you can adjust assets without leaving the site you’re working on. It suits designers who need quick resize and crop edits rather than a full compression run, with no code involved.

To set up the integration:

1. Open the Pixie - CMS Image Optimizer listing in the Webflow Marketplace.
2. Install the app and authorize it for your site.
3. Launch the extension inside Webflow to start editing assets.

The extension includes asset management plus resize and crop tools.

The listing marks in-extension compression as coming soon, so the Pixie web app handles compression along with WebP conversion and bulk workflows.

Connect the Pixie web app through Webflow OAuth

The Pixie web app on Little Big Apps handles the core integration for bulk and selective CMS image optimization. You authorize a site once, then browse its collections in Pixie’s CMS Explorer, a Webflow-like interface for drilling into fields and items. Pixie’s get started guide recommends OAuth over a plain API key, because the OAuth connection survives API key resets.

To set up the integration:

1. Follow the sign-up guide to create an account in the Pixie app on Little Big Apps.
2. Click Verify License and add your license key to activate your account.
3. Add your Webflow site through Webflow OAuth, or with a Webflow API key.
4. Select the site you want to optimize.
5. Choose Lossy (recommended) or Lossless as the optimization technique.
6. Set resize dimensions per image field if you want to push file sizes down further.

Once connected, the web app gives you:

• Bulk optimization runs across entire collections and their image fields in a single pass.
• Selective optimization targets specific fields in individual CMS items.
• JPEG and PNG files convert to WebP for smaller output.
• Log History keeps an audit trail of every optimization change.
• Duplicate-optimization prevention skips any image that has already been processed.

Pixie covers CMS image galleries, CMS images, eCommerce product images, and eCommerce product-related images; rich text images are on the roadmap but not yet supported. Images written back through the CMS API don’t get the automatic responsive variants. Direct Assets panel or image field uploads still receive them.

Build with the Webflow Data API v2

Pixie publishes no public API and no webhooks, and trypixie.io/docs returns a 404. The app itself runs entirely on the Webflow Data API v2, which it adopted on March 4, 2024. So custom automation around image optimization gets built on the Webflow side, using the same endpoints Pixie calls. This path requires server-side development and suits teams that need behavior Pixie doesn’t offer yet, such as event-triggered optimization.

These references cover the endpoints involved:

• The Assets API lists site assets and supports uploads and updates under the assets:read and assets:write scopes.
• The collection items endpoints read and update image fields on staged and live items under cms:read and cms:write.
• Webflow webhooks fire events when collection items are created, changed, deleted, or unpublished.

All requests go to https://api.webflow.com with an Authorization: Bearer {token} header, per the authentication reference.

Trigger optimization when a CMS item changes

Pixie lists set-it-and-forget-it scheduled optimization as coming soon, so event-driven optimization is currently a build-your-own pattern. A webhook listener plus the Assets and items endpoints covers it.

To implement this:

1. Register a webhook for collection_item_created or collection_item_changed. Both require cms:read, and the payload’s fieldData object carries the item’s field values.
2. Pull the image URL from the payload and run compression or conversion on your server.
3. Call POST /v2/sites/{site_id}/assets with a fileName and an MD5 fileHash. The response returns an uploadUrl and uploadDetails; send the file to POST {uploadUrl}, an Amazon S3 endpoint, with uploadDetails as headers.
4. Write the new asset back with PATCH /v2/collections/{collection_id}/items/{item_id}, then push it live with POST /v2/collections/{collection_id}/items/publish.

No asset-level webhook events such as asset_created or asset_updated exist in the event registry, so key your listener off collection item events.

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

Integrating Pixie CMS Image Optimizer with Webflow lets you optimize CMS images at collection scale without downloading and re-uploading each file by hand.

• Agency-wide image maintenance: Every Pixie plan includes unlimited Webflow accounts, so an agency runs compression across all client sites from a single Pixie login.
• Fast-loading eCommerce catalogs: Compress and convert product images and product-related images across a Webflow store so category and product pages stay light as the catalog grows.
• Publishing sites with steady image intake: A blog that adds high-resolution images with each post can optimize new items selectively so every article page stays light. A trypixie.io testimonial says it “saves us considerable operational time” as the team regularly adds new posts.
• Large-collection cleanup: Bulk-optimize an inherited or migrated collection of several hundred images in one pass. A Trustpilot review describes how Pixie compressed hundreds of images in a client’s CMS collection.

If you need more control over event-driven or scheduled optimization, the API integration path covers those cases. When images also need responsive variants across breakpoints, serve responsive images from Cloudinary alongside a Pixie workflow.