Webflow Image Optimization: Size Limits, AVIF and Video on a Mac

Webflow’s Data API documentation says images must not exceed 4 MB and documents are capped at 10 MB. Treat 4 MB as your planning number for every upload, and confirm the current figure for your plan in Webflow before a big handoff.

Figures are as published on 11 October 2026. The 20 MB and 1 GB rows belong to Webflow Cloud, so do not use them for a normal Designer site. If a Designer upload is rejected, the file is over the limit, and the fix is to resize and recompress it, not to rename it.

Beyond file size, the limits that bite are formats and weight. The asset guide lists PNG, JPEG, GIF, SVG, WebP and AVIF for images, so your output formats are covered, with one catch: Smol does not write SVG, so logos that are already SVG stay as they are.

• Documents: PDFs are capped at 10 MB in the same guide. Smol’s PDF presets (Tiny, Small, Medium, Large, Original) cap the long edge at 600, 900, 1200, 1800 and 2400 pixels, so check the output size after each run.
• Page weight: a cap is a ceiling, not a target. Webflow’s own optimizer docs target under 500 KB per image, which is a stricter bar than 4 MB.
• Your plan: bandwidth and CMS-item allowances sit with your Webflow plan, so read them in Webflow. Lighter images stretch whatever bandwidth you have.

For the performance side, our Core Web Vitals image tests show how image weight moves LCP.

Yes. Webflow’s product update says you can upload AVIF images and convert existing images to AVIF, and calls the format more compact than JPEG and WebP. Use AVIF for photos and WebP as the fallback for assets you want to edit or reuse widely.

web.dev’s format guide calls lossy WebP and AVIF great JPEG alternatives for web-quality images and lists both as supported by all modern browsers. On our own test, 92.1% was saved compressing 24 small (768 × 512) PNG photos to AVIF at quality 65 with the Compress operation. Camera-size files will differ, and the benchmark page has the method.

One tradeoff: Webflow’s optimizer docs say its own conversion is lossy and that the original is not retained. Converting on your Mac first keeps your source files safe in a folder you control.

Start with AVIF at quality 65 for photos and check the result at the size it shows on the page. The quality numbers below are our starting points, not Webflow requirements.

Resize mode fit keeps the whole picture; fill crops to the box with no say over what is cut. One run makes one size, so a hero and a thumbnail from the same photo need two runs and two names. If a result is still over your target, lower the quality in steps of 5, or use target-size mode: type a size from 4 to 4,096 KB. It aims at the size as a band, not a ceiling, takes about 28 seconds for one 768 × 512 image, and we make no quality claim for it.

Keep it as small as the loop allows: a few seconds of silent, low-resolution MP4 beats a long 1080p file. Confirm the current limit in Webflow before you export, because it changes with the component and plan.

• Reduce the resolution to the largest size the video actually fills. Background video sits behind text and is often blurred or darkened, so extra pixels are invisible.
• Remove the audio. Smol can drop the audio track; an autoplay background loop is muted anyway.
• Pick MP4 with H.264 at the Web quality label (CRF 28). H.265 is Smol’s default, but H.264 plays almost everywhere. Our H.265 vs H.264 guide covers the tradeoff.
• Trim the loop in your editor first. Smol compresses the file you give it, it does not cut it.

Smol sets quality and resolution, not output bytes, so there is no “make this 3 MB” setting for video. Run it, read the output size, and step the quality up or the resolution down until you are happy. More in reducing video file size on Mac and on our video production page.

Do it once per project folder, before anything enters the Assets panel.

1. 1

   Export or collect the originals into one folder

   Keep them. Smol writes a copy with a _compressed suffix and does not overwrite by default.

2. 2

   Drag the folder into Smol

   Photos, PNGs and a background video can go in together as one mixed batch.

3. 3

   Set the operation, format, quality and size

   Use the settings table: Compress, AVIF or WebP, quality 65 to 75, and the maximum dimension for the role of the image.

4. 4

   Run it and read the per-file sizes

   Find the largest output. Content images under 500 KB match the target in Webflow’s optimizer docs.

5. 5

   Upload the compressed copies to Webflow

   Add alt text in the Assets panel, then check the published page, not just the Designer preview.

Do this on every project and save the settings as a preset. Presets live on one Mac, so a team writes its settings down and recreates the preset on each Mac. Our web developer image guide goes deeper on sizes.

If you only touch a handful of images, Webflow’s own conversion is reasonable. Reach for a separate tool when you want a quality setting, a batch, or your originals kept. See the ImageOptim head-to-head, Squoosh alternatives and Smol vs TinyPNG. Agencies with many clients may also like the web agency page.

• You need SVG. Smol does not write SVG or optimize it. Use an SVG tool, and keep logos as vectors.
• You want pixel-identical output. Smol has no lossless mode. For that, use ImageOptim.
• You are not on a Mac. Smol runs on macOS only (13+ on Apple Silicon, 14+ on Intel).
• You need a build step or CI. Smol is a desktop app. For servers and upload flows there is the Smol API.
• You need several responsive widths in one run. One job makes one size.