Keep Bubble Images Tiny & Crisp: My Squoosh + Crop Routine

Tips
1

I ship a lot of Bubble apps, and images are usually the sneaky reason pages feel heavy. Over time I settled on a simple 2-step routine that keeps things sharp and fast: compress/resize on squoosh.oneimage.co, then frame the composition on crop.oneimage.co. Sharing my notes so you can copy the workflow, tweak the numbers, and move on with your life. :raising_hands:

Why bother before upload?

  • Faster first paint on list views and hero sections.

  • No surprise stretching (Bubble won’t have to coerce dimensions).

  • Lower storage & bandwidth (mobile users will thank you).

  • Privacy-friendly: both tools run in your browser (WASM). Nothing leaves your machine.

When to use what (quick cheat sheet)

Content Format Quality Notes
Photos WebP or AVIF WebP Q 70–80; AVIF CQ 45–55 AVIF is smaller, WebP is faster/safer
Logos / Transparent WebP Lossless or PNG Lossless If possible, go SVG and skip raster
Illustrations/Gradients WebP Q 70–80 If banding appears, nudge quality up
Thumbnails (lists) WebP Q 70–75 Resize to the card’s max display width first

Rule of thumb: resize first, then tune quality. If you need transparency, prefer WebP lossless over PNG unless PNG is required.

The tiny-image routine (copy/paste steps)

1) Compress + resize on Squoosh

  1. Drop your image on squoosh.oneimage.co.

  2. Resize → set Width = max display width × DPR.

    • Example: card shows at 360px on desktop → export 720px to cover 2Ă— screens.

  3. Pick format

    • Photos: WebP (or AVIF if you’re chasing min size).

    • Transparent: WebP Lossless (or PNG).

  4. Quality

    • WebP 70–80 is my default; AVIF 45–55.

  5. Strip EXIF/metadata (one toggle = free bytes).

  6. Download → name like card-720w.webp.

2) Crop for composition on Crop

  1. Open crop.oneimage.co and load your Squoosh output.

  2. Pick a preset ratio/size:

    • Avatar 1:1 → 512Ă—512

    • Card 4:3 → pick your target (e.g., 1200Ă—900)

    • Hero 16:9 → 1920Ă—1080

    • Social/OG → 1200Ă—630

  3. Set the focus (keep faces/subjects safe inside).

  4. Export → avatar-512.webp, hero-1920x1080.avif, etc.

Order matters?

  • Big source photo: resize first (faster everything), then crop.

  • Precision headshot: crop for framing, then export a resized version for each breakpoint.

Bubble setup that pairs well with this

  • Give images explicit sizes. Don’t rely on “auto”; define the container width so your export sizes are meaningful.

  • Multiple sources by breakpoint.

    • Desktop hero: 1920w; Tablet: 1280w; Mobile: 960w (swap via conditionals).

  • Use 2Ă— assets where it counts. If a card is 360px wide, serve 720w for crispness, but keep quality modest.

  • Lazy load long lists and use aspect-ratio placeholders to avoid layout shift.

  • Alt text matters for accessibility and SEO—use real words, not “image-1”.

Real-world quick recipes

  • List card cover

    • Squoosh: resize to 720w, WebP Q 72, strip EXIF.

    • Crop: 4:3 if your card frames that way.

    • Result: ~80–140 KB typical (from multi-MB sources).

  • Avatar

    • Crop: 1:1 at 512Ă—512.

    • Squoosh: WebP Q 80 or WebP lossless if it’s flat graphics.

    • Result: 20–60 KB.

  • Hero photo

    • Squoosh: 1920Ă—1080, AVIF CQ ~50 (fallback WebP if needed).

    • Also export 1280Ă—720 for smaller screens.

    • Result: 180–350 KB for desktop hero is very doable.

  • Logo with transparency

    • Prefer SVG. If bitmap: WebP lossless or PNG, trimmed to tight bounds.

Sanity checks before you ship

  • Zoom to 100% and scan: faces, edges, gradients. If you notice halos/banding, bump quality up a notch.

  • Compare side-by-side with the original for 10 seconds. If you don’t flinch, you’re good.

  • Name files predictably:

    • <use>-<width>w[Ă—height]-<format>.<ext> → hero-1920w.avif, thumb-720w.webp.

One example, numbers and all

Started with a 3.2 MB DSLR photo.

  • Resize to 1920Ă—1080 → ~900 KB.

  • Switch to AVIF CQ 50 → ~280 KB (looks great).

  • Add a 1280Ă—720 version → ~150 KB.

  • In Bubble: show 1920w on wide screens, 1280w under 1280px width. Done. :rocket:

Links

That’s it—that’s the whole playbook. If you’ve got better dials for certain image types, drop them; this is meant to be a living, copy-able recipe for the rest of us.

5 Likes
2

Have you investigated APIs that do the conversion and compression?