DEV Community: Jen Looper

Build a Tiny Virtual Pet on Arduino in 60 Minutes 🐾

Jen Looper — Tue, 06 Oct 2026 00:47:44 +0000

What if your first hardware project wasn't another blinking LED, but a tiny pet that gets hungry, plays with you, falls asleep, and reacts to what you type?

Meet Kiku. 🌸

Kiku is the mascot and in-house pet of Her AI Studio, a community program helping the next generation of women learn and build with AI.

In this mini workshop, we're shrinking Kiku down until the entire pet can live on an Arduino Uno Q.

Full tutorial is available in the Her AI Studio curriculum

What you need:

an Arduino Uno Q
a USB cable
your laptop
Arduino App Lab
about 60 minutes

Tip! To celebrate Hacktoberfest 2026, swag packs from Major League Hacking are shipping with these Arduinos, so use this workshop for your Hack Day as an introduction to hardware hacking.

Shhh, Kiku is sleeping

By the end, you'll have a tiny Tamagotchi-style pet whose face lives on the board's LED matrix. You'll be able to feed it, play with it, and put it to sleep from your keyboard. More importantly, you'll see how a surprisingly small amount of code can produce behavior that feels alive.

What you'll learn

This project brings together several useful embedded-programming concepts:

flashing code onto physical hardware
communicating with a microcontroller over Serial
drawing graphics on an LED matrix
tracking application state
responding to user input
creating simple animations
building a tiny state machine

If you've mostly written software that stays inside your laptop, there's something especially satisfying about seeing your code suddenly appear on physical hardware.

Part 1: Make sure the board is alive

Before building a virtual pet, start with the embedded developer's version of "Hello, world!": Blink an LED.

Connect your Uno Q to your laptop over USB and open Arduino App Lab which you've downloaded. Login to your board.

Create a new app, and take a look at the scaffolded code. Open sketch.ino, and write a basic blink sketch:

void setup() {
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  digitalWrite(LED_BUILTIN, LOW);
  delay(1000);

  digitalWrite(LED_BUILTIN, HIGH);
  delay(1000);
}

Press run in App Lab.

If the built-in LED turns on and off every second, it's aliiiiive!

If the board isn't detected, check your USB cable. Some USB cables provide power but don't carry data.

Part 2: Give your Arduino a way to listen

Now we need Kiku to hear us. We could add buttons or sensors (and we do, in our full workshop with our full AI Kit), but there's a much simpler interface already available: Serial communication.

The same USB connection used to upload your program can carry messages between your laptop and your Arduino while the program is running. In App Lab, it looks like this:

Start Serial communication in setup():

void setup() {
  Serial.begin(9600);
}

Then check for incoming characters:

void loop() {
  if (Serial.available() > 0) {
    char typed = Serial.read();

    if (typed == 'f') {
      // feed Kiku
    }

    if (typed == 'p') {
      // play with Kiku
    }

    if (typed == 's') {
      // sleep or wake up
    }
  }
}

Your keyboard has effectively become the controller for a physical device.

To interact with Kiku, we'll use 3 keystrokes:

f → feed
p → play
s → sleep / wake

Part 3: Give Kiku some feelings

A virtual pet needs more than commands. It needs state. Kiku tracks three simple stats:

int hunger = 3;
int joy = 6;
int energy = 8;

bool asleep = false;

We'll treat each stat as a value from 0 to 10. Now actions can change the pet by incrementing or decrementing these values. Feeding Kiku, for example, reduces hunger (but don't overfeed!):

hunger = max(0, hunger - 3);
joy = min(10, joy + 1);

Playing might make Kiku happier while consuming energy:

joy = min(10, joy + 3);
energy = max(0, energy - 2);
hunger = min(10, hunger + 1);

Make time matter

If Kiku's stats only changed when we typed something, the pet wouldn't feel particularly alive.

So we introduce time! Every few seconds, a tick() function updates Kiku's state, like this:

void tick() {
  if (asleep) {
    // regain energy
  } else {
    // lose energy
    // gradually lose joy
  }

  // gradually become hungry
}

In your code, use a short interval so changes are easy to observe (and change this later when you want your pet to chill out):

const unsigned long TICK_MS = 10000;

That's one update every ten seconds. Walk away from Kiku and come back later, and its state will definitely be different - they can get cranky when left alone!

Give the state a face

Kiku turns its internal state into facial expressions on the Uno Q's LED matrix. We can define its eyes:

enum Eyes {
  EYES_OPEN,
  EYES_CLOSED,
  EYES_HAPPY,
  EYES_PEEK
};

And mouth poses:

enum Mouth {
  MOUTH_FLAT,
  MOUTH_SMILE,
  MOUTH_FROWN,
  MOUTH_OPEN,
  MOUTH_DOT
};

Now our program can translate state into emotion:

Mouth moodMouth() {
  if (hunger >= 7 || joy <= 3)
    return MOUTH_FROWN;

  if (joy >= 7)
    return MOUTH_SMILE;

  return MOUTH_FLAT;
}

Kiku isn't actually experiencing happiness or hunger, of course, but a handful of variables and conditionals suddenly starts to look like personality.

Connect actions to behavior

Now the pieces come together. Your main loop has three jobs:

Listen for commands.
Update Kiku's state over time.
Draw the appropriate expression.

In simplified form:

void loop() {
  if (Serial.available() > 0) {
    char typed = Serial.read();

    if (typed == 'f') feed();
    if (typed == 'p') play();
    if (typed == 's') toggleSleep();
  }

  // update stats when enough time has passed

  // calculate blinking

  // redraw Kiku
}

That's the core architecture of your Kiku. Try it with your own device!

Open the Serial Monitor in App Lab and type:

Kiku eats.

Then:

Kiku plays.

And:

Kiku goes to sleep.

What's next?

Try to make some changes that alters Kiku's personality.

1. Change time

Modify TICK_MS.

2. Invent an expression

Make Kiku wink, act surprised, or act sad.

3. Add another command

Maybe:

c → clean

What did we actually build?

On the surface, we built a cute virtual pet. Underneath, we explored several concepts that appear in much larger systems:

Input handling: Serial commands become events.

State management: Variables remember what's happening between iterations of the loop.

State transitions: Actions modify that state.

Time-based behavior: The system changes even without direct input.

Rendering: Internal state becomes visible through the LED matrix.

Human-computer interaction: Animation and timing make simple logic feel expressive.

If you build your own Kiku for Hacktoberfest, we'd love to see what personality you give it.🌸

This article is presented as a gift to Hacktoberfest hackers by Her AI Studio, a community program for the next generation of women in AI.

The complete Kiku workshop, including the full Arduino sketch, exercises, knowledge checks, and additional resources, is available in the Her AI Studio curriculum.

Building an Offline Arduino UNO Q Cyberdeck That Identifies Birdsong and Draws Vintage Field Notes

Jen Looper — Wed, 30 Sep 2026 19:36:21 +0000

In this post, I walk through B.L.O.O.M. (Bridging Local Observations, Openly Mapped), an offline cyberdeck built on the Arduino UNO Q that helps naturalists capture field notes, identify birdsong with Edge Impulse, and generate vintage field sketches with Cloudinary's image generation API. It stores everything locally and syncs to a community site only when you choose.

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What you'll learn

How to wire an Arduino UNO Q cyberdeck with a USB hub, camera, mic and HDMI screen
How to run a local Gemma LLM and an audio classifier with Arduino App Lab bricks
How to retrain an Edge Impulse birdsong model with balanced data
How to sync SQLite entries to GitHub pull requests from a Netlify Function
How to generate style-matched images with Cloudinary's image_to_image API with reference images

Cyberdecks are back. The 80s sci-fi dream of a portable, hackable computer rig has been picked back up, especially by nature-loving corners of the internet that want tech that works offline, respects privacy, and looks cool doing it. The one I built for this project lives in a $10 vintage makeup train case and creates Grinnell style field notes as you tiptoe through the tulips.

This post covers the hardware-to-cloud pipeline, with the most detail on the part where Cloudinary comes in. The full build (wiring, enclosure, every step) is on Hackster.

The architecture at a glance

┌──────────── In the field (offline) ────────────┐        ┌────────────── Back online ──────────────┐
│                                                │        │                                          │
│  Mic ─► Edge Impulse birdsong model            │        │  Netlify Function                        │
│  Camera ─► photo                               │  POST  │   ├─► Cloudinary image_to_image          │
│  Keyboard/mouse ─► sketch + notes    ─► SQLite ├───────►│   │     (Nano Banana → field sketch)      │
│  Gemma LLM ─► AI note                          │        │   └─► Octokit: open PR on GitHub         │
│                                                │        │          │                               │
│  Arduino UNO Q (App Lab, Chromium kiosk)       │        │   merge ─► Astro rebuild ─► live site    │
└────────────────────────────────────────────────┘        └──────────────────────────────────────────┘

Nothing leaves the device unless you press Sync to Cloud. That was a hard requirement, as this project is affiliated as well with the nonprofit I founded, Her AI Studio, where we talk a lot about data governance, security, and privacy, working primarily with local AI on device.

Here's the full schematic:

The core of the cloud side is a single POST to Cloudinary:

{
  "prompt": "Create a field sketch illustration in the style of the reference image [1]...",
  "reference_images": [{ "source_type": "url", "url": "<your reference sketch>" }],
  "model": { "family": "nano-banana", "tier": "premium" },
  "target": { "target_type": "managed_asset", "public_id": "field-notes/<slug>-ai" }
}

The full function is below.

Hardware: the Arduino UNO Q parts list

Arduino UNO Q (4 GB)
5" HDMI screen + 6" HDMI cable
USB 5-in-1 hub
USB camera
USB microphone
Power bank + USB-A to Micro-USB cable
Bluetooth keyboard with built-in mouse pad
Vintage train case (or the enclosure you like best! This is the fun part)

The Arduino UNO Q runs everything. The 4 GB variant can run a small language model and an audio classifier fully offline, which is what makes the device useful on a forest trail with no signal...and to explore offline, local AI models on hardware!

Because it's a cyberdeck, there are peripherals, and those are all connected to the USB hub: screen, mic, camera and power go into the hub, and the hub's USB-C plug goes into the UNO Q. Pair the keyboard and mouse over Bluetooth in Debian and you get those USB ports back.

At Her AI Studio, students will get access to this AI Kit.

Running Gemma and birdsong detection on the UNO Q with App Lab

The app is built in Arduino App Lab from three "bricks", which are modular code available pre-built for the Arduino Uno Q:

Web UI for the interface with camera and sketching interface
LLM brick running Gemma, downloaded locally to the board
Audio Classification brick for birdsong

The Web UI brick helps you build a tidy interface with a little JS and HTML that runs on your local board via Arduino App Lab. This is how you write your field notes. The LLM brick creates a little space to chat with an LLM and learn more about the flora and fauna photos that you take with the build-in camera.

Side Quest: Fixing Chromium popups on Debian with a kiosk brick
On Debian, the stock Web UI brick opened Chromium popups behind other windows. It worked fine on desktop but not on the device. I fixed it with a small custom brick that waits for the local server and then launches Chromium in kiosk mode:

def build_kiosk_command(url: str):
    if system == "Linux":
        return ["chromium-browser", "--kiosk", "--noerrdialogs",
                "--disable-infobars", f"--app={url}"]

def launch_kiosk(url: str, ready_timeout: float = 15.0):
    if not wait_for_server(url, timeout=ready_timeout):
        logger.error(f"Server never became reachable at {url}")
        return None
    cmd = build_kiosk_command(url)
    logger.info(f"Launching: {' '.join(cmd)}")
    return subprocess.Popen(cmd)

The interface is presented full-screen without desktop chrome, so the screen is just the field notebook, like this:

Listening for birds

I wanted to give my cyberdeck some "ears", so I turned to a platform that works well to add local, custom-trained models to Arduino via App Lab: Edge Impulse.

I started from a birdsong classifier in the Edge Impulse community gallery. It had class imbalance and too few samples, so I:

Duplicated the project and removed unusable clips
Pulled at least 20 recordings each of Blue Jay, Mourning Dove and Northern Cardinal from xeno-canto, a birdsong database
Converted everything to WAV, labeled it, and uploaded it
Rebalanced the train/test split and retrained
Dropped the new model into the App Lab project

When your USB microphone picks up a bird singing, you tap a button, the model classifies the audio, and the result is saved into a field note. The model is public and cloneable if you want to add your local species.

Syncing: from SQLite to a pull request

Every observation is stored in a local SQLite database, but maybe you want to showcase your field notes to our public repository. When you choose to share, the device posts the entry to a Netlify Function. Photos and sketches are base64-encoded so the whole entry travels as one JSON payload:

def sync_entry(entry_id):
    with _db_lock:
        conn = sqlite3.connect(DB_PATH)
        row = conn.execute(
            "SELECT id, timestamp, photo, sketch, ai_note, locality, weather, habitat "
            "FROM entries WHERE id = ?",
            (entry_id,)
        ).fetchone()
        conn.close()

    eid, timestamp, photo, sketch, ai_note, locality, weather, habitat = row
    payload = {
        "id": eid,
        "catalog_no": catalog_number(eid),
        "timestamp": timestamp,
        "note": ai_note or "",
        "locality": locality or "",
        "weather": weather or "",
        "habitat": habitat or "",
        "photo": base64.b64encode(photo).decode("utf-8") if photo else None,
        "sketch": base64.b64encode(sketch).decode("utf-8") if sketch else None,
    }

    response = requests.post(CLOUD_SYNC_URL, json=payload, timeout=CLOUD_SYNC_TIMEOUT)

The function does not write to a database. It opens a pull request against the field-notes repo with Octokit:

const { data: pr } = await octokit.pulls.create({
  owner: OWNER,
  repo: REPO,
  title: `New field note: ${catalog_no}`,
  head: branchName,
  base: BASE_BRANCH,
  body: [
    "Submitted automatically from a Bloom device.",
    "",
    `**Locality:** ${locality || "—"}`,
    `**Weather:** ${weather || "—"}`,
    `**Habitat:** ${habitat || "—"}`,
    aiSketchPath ? "\n_AI-generated sketch included._" : null,
  ].filter((line) => line !== null).join("\n"),
  labels: ["device-submission"],
});

This process makes it easier for the community site to get human moderation: a maintainer reviews the PR, merges it, and Netlify rebuilds the Astro site. You can see the results at community-field-notes.netlify.app.

Generating AI field sketches with Cloudinary's image_to_image API
Naturalists in the Grinnell tradition paired written notes with drawings. I wanted every synced note to come with an illustration in that vintage style, even if the person who wrote it can't draw.

Before the PR is opened, the Netlify Function sends the note text to Cloudinary's image generation API using the image_to_image endpoint and the Nano Banana model. I also pass a reference image, an old-style field sketch already stored in my Cloudinary account, so every output matches the same look:

async function generateAiSketch(noteText, slug) {
  const prompt = [
    "Create a field sketch illustration in the style of the reference image [1].",
    "The sketch should depict:",
    noteText || "A natural world observation",
    "Use a vintage field journal aesthetic with earthy tones, hand-drawn quality, and scientific illustration style.",
  ].join(" ");

  const auth = Buffer.from(
    `${CLOUDINARY_API_KEY}:${CLOUDINARY_API_SECRET}`
  ).toString("base64");

  const response = await fetch(
    `https://api.cloudinary.com/v2/generate/${CLOUDINARY_CLOUD_NAME}/image_to_image`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Basic ${auth}`,
      },
      body: JSON.stringify({
        prompt,
        reference_images: [
          { source_type: "url", url: REFERENCE_IMAGE_URL },
        ],
        model: { family: "nano-banana", tier: "premium" },
        target: {
          target_type: "managed_asset",
          public_id: `field-notes/${slug}-ai`,
        },
      }),
    }
  );

  // ...handle response, return the asset path for the PR
}

A few things I like about this setup:

The use of the reference image keeps the style consistent, and you can either choose the model, or keep it set to 'auto' - so that the model is chosen for you based on your use case.
The prompt describes what to draw, and the reference image sets how it should look. Swap the reference and every future note gets a new visual identity. The target_type: "managed_asset" saves the output straight into my Cloudinary media library under a predictable public_id (field-notes/-ai). I don't have to download and re-upload anything, and the image is ready for delivery to my community field notes app.
After that it's a normal Cloudinary asset, so the site can deliver it with the usual transformations: f_auto,q_auto, resizing for cards and thumbnails, and so on.
It's one fetch call. No SDK and no extra infrastructure, which suits a serverless function.

Setup tips

Keep CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY and CLOUDINARY_API_SECRET in Netlify environment variables. Never put them on the device.
Upload your reference sketch to Cloudinary first and use its delivery URL as REFERENCE_IMAGE_URL.
The Image Generation API has a free monthly allowance, which covers a community project like this. If you don't have an account yet, sign up for free.

The enclosure: no 3D printer needed

Instead of printing a case, I reused one (preferable for cyberdecks!): a vintage Lancôme makeup train case, costing about $10 on eBay. Here's what I did to fit everything in the case:

Cut a small hole in the side for the camera lens
Build shelves from recycled foam and fabric
Zip-tie the USB hub in place
Made a cardboard backing for the screen, with room for cables
Gave the UNO Q its own spot, with airflow in mind (foam and fabric trap heat, so watch temperatures or use an open weave like rattan - I've even used a sushi rolling mat for this type of shelf)

The tall case also leaves room for a magnifier, pressed flowers, a small watercolor set, or a leaf guide.

the author enjoying a Fall day of field notes

Go touch grass: using B.L.O.O.M. in the field

Power it on, head outside, and record what you find: birdsong, photos, sketches, questions for the LLM, locality, weather and habitat. When you're back on Wi-Fi, press sync to send the note to GitHub, get a Cloudinary-generated sketch, and add it to a shared natural-history record.

Discover new fauna

Resources

📖 Full build on Hackster: B.L.O.O.M.: A Community Cyberdeck for your Field Notes

💻 Device code:

Her-AI-Studio / BLOOM-code

This is the codebase for use in Arduino App Lab, for the Arduino Uno Q in a cyberdeck

B.L.O.O.M — an offline field journal

Bridging Local Observations, Openly Mapped

B.L.O.O.M turns an Arduino® UNO Q into a self-powered, offline field-journal cyberdeck: point it at a plant, an animal, or anything worth noticing on a hike, capture a photo, sketch on top of it, and talk through what you're observing with a fully local AI model. Every entry — photo, sketch, and note — is saved to the board itself and stays there unless you deliberately choose to sync it to a companion website. No connectivity is required to use it in the field.

Built for Her AI Studio's curriculum and submitted for hackathons including the Invent the Future with Arduino UNO Q and App Lab contest, Best Social Impact category — the pitch is a countermeasure to phone-and-camera culture: a single-purpose device that makes you stop, point, and wait for a note instead of snapping and swiping past.

…

View on GitHub

🌐 Community web app (Astro + Netlify)

Her-AI-Studio / field-notes

This is the core code of the offline, locally-powered cyberdeck for use when hiking

Field Notes

A digital field journal — a collection of natural history observations, surveys, and records from the field.

Built with Astro and Markdown content collections.

Project Structure

/
├── public/
│   └── favicon.svg
├── src/
│   ├── content/
│   │   ├── config.ts
│   │   └── notes/
│   │       ├── observation-of-the-red-shouldered-hawk.md
│   │       ├── botanical-survey-of-coastal-dune-ecology.md
│   │       ├── geological-observations-along-the-appalachian-trail.md
│   │       └── nocturnal-insect-survey-june.md
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── notes/
│   │       └── [...slug].astro
│   └── styles/
│       └── global.css
└── package.json

Adding a New Note

Create a new .md file in src/content/notes/ with frontmatter:

---
title: "Your Note Title"
date: 2026-07-21
location: "Location, State"
excerpt: "A brief summary of the observation."
image: "/images/your-image.jpg"
tags: ["tag1", "tag2"]
---

The note will automatically appear on the…

View on GitHub

🐦 Edge Impulse birdsong model

Prize Categories

Overall, Arduino

Why Does Open Innovation Matter?

Did you know the Arduino Uno Q runs Linux when it's a single-board computer? Without open source, we'd be locked into a proprietary sandbox. Instead, we can build in the open, and enhance the tools and models that others have generously open-sourced.

If you build a nature-loving cyberdeck like this, contribute a note to the website, or retrain the model for birds near you, share it in the comments. I'd like to see what other people's field notes look like and what you're looking at in your region. 🌿

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

Is AI Cheugy?

Jen Looper — Mon, 21 Sep 2026 04:00:00 +0000

cheu·gy ˈchü-gē - cheugier; cheugiest. slang: uncool, unfashionable

It's happened enough times that I'm starting to call it a trend: I talk about something - anything - AI-related, and my listener screws their face into a scowl, gives me a robust side eye glare, and beats a hasty retreat. It's as if, when I mention AI, people suddenly are accosted by a bad smell...the stench of the dangerous and icky.

The AI-pilled amongst us, of course, don't really see this. So caught up in their bubble, so sure of the rightness of their course, so excited by the newness of the tech and so enthused by its promise, they are often blind to the legitimate concerns that many (many!) so-called "normies" have about AI. Anyway, they don't talk to normies.

So let's talk about it.

At Her AI Studio, for which this is an interesting inaugural blogpost, our mission is to empower high school aged girls to learn about AI in a safe space - a space for women, coached by female mentors near their age, using physical AI to build cyberdecks. By using locally-run hardware on which we can run small local AI models, we create a "walled garden" where students can safely experiment with local AI. In doing so, we can also discuss weighty topics of privacy, security, data governance, and the ethical questions surrounding AI.

A cyberdeck built with our kit, including an Arduino Uno Q board, small keyboard and monitor, microphone, camera, and USB Hub. Every student can create their own, this is just my fluffy iteration.

That doesn't make AI any less cheugy (and, increasingly, political, although that's a topic for another day). There are serious question about:

From where the training data that has fed the models is sourced
What this technology means for the environment, from training, sourcing materials for hardware, water use, pollution, land use, and more
How AI is really screwing up education (my own particular hot take) and is being actively banned in some districts
How deepfakes are ruining lives
How powerful algorithms are feeding propaganda machines and influencing political outcomes
How copyright rules and ethical concerns about plagiarism are caught up in this new technology
How skills are decaying due to being replaced by a technology that can outsource work in a flash

...and more

Headwinds

It's really important to acknowledge these important headwinds and concerns and understand them. Rather than brush anything aside, I propose to address these head on in our cohorts with full transparency and with the understanding that there are many unsavory aspects of this tech. Reactions such as this from Gen Z commenters crystalize the moment. When seeking applicants for our Youth Board, here's a reaction:

Ouch. But point well taken, and gone are the AI images from the site. We are listening.

It's a fine line we're threading, and the gulf is enormous. At one end, we have folks insisting that AI will be so powerful that in a few years it will end us all. At the other end we have folks who advocate banning it entirely.

There has to be some kind of middle ground. The companies making foundational models aren't doing us any favors by promoting the idea that somehow they have created something that will imminently cause a world cataclysm. By not sufficiently creating robust guardrails to protect users from abuse, they are creating a hostile environment for large swaths of the population.

This is precisely why we founded Her AI Studio. We want to ensure that women will have a role to play in the creation of AI, in the design of its guardrails, in the ethics around the kind of data on which it is trained. Without radical inclusion of these voices, we risk creating an "intelligence" that is stunted, that does not resemble our reality, and that cannot meet the needs of 50% of the world's population.

A new approach

We do not approach the topic from a place of weakness or fear. We are not evangelizing AI, or really any particular product. Instead, we use open models, run locally, on hardware that we own, and talk about what this means. We study how data is used, from where it's sourced, what ethical concerns are raised by both building and using AI, and more.

Because if we stay on our current path, we are going to build an AI that is not only unrecognizable, it's not going to be built to serve the best interests of a lot of people. And we find that unacceptable. Unacceptable and truly cheugy.

Visit HerAIStudio.org to learn more.

Kitchen-Sune: A Community Cookbook

Jen Looper — Sun, 16 Aug 2026 03:35:03 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

This is a blast from the past, but it's so lovely I couldn't resist submitting it for this challenge.

Kitchen-Sune is a community-driven international recipe book built in collaboration with Front-End Foxes members when we pivoted our nonprofit's efforts from in-person workshops to an international online boot camp during the pandemic. It brings together comfort food recipes from around the globe into a sleek, accessible, and user-friendly Vuepress (later refactored to Vitepress) web application where food lovers and developers alike can discover new dishes.

We were happy to host recipes from Ukraine, Kenya, Nigeria, and everywhere in between. Between Jalebi Babies, Moin-Moin, Puff Puff, and Strawberry Mush, we've got you covered for comfort food!

Demo

Live Demo: Kitchen-Sune App
GitHub Repo: https://github.com/FrontEndFoxes/kitchen-sune

Check out a preview of the recipe book (this recipe for maple syrup candy came with a video):

Journey

Revisiting and showcasing this project was a nostalgic process. Working on a community recipe project taught me the importance of building inclusive, easy-to-navigate web interfaces for diverse content as an educatioal tool. We used to use this repo as a way to train boot camp enrollees in how to use GitHub and make a PR to a repo.

What I Learned: No matter where we are in our journey, food brings us together.

What I'm Proud Of: How timeless and clean the aesthetic remains, making it easy for anyone to find a warm, cozy meal to cook or a snack to throw together (Pandemic Cookies, anyone?).

What's Next: Let's keep going! Add your recipe via a PR to the GitHub repo. And I'd love to have more photos to show off your work.

Resize One Image into 6 Social Media Formats Automatically Using Cloudinary Claimable Clouds

Jen Looper — Wed, 05 Aug 2026 21:30:34 +0000

Claimable Clouds are temporary Cloudinary environments for AI workflows that let AI Agents safely manage media with no signup required.

Imagine you're a busy designer, with many satisfied clients who depend on you to take their images and make them look great across social media. All that manual cropping and scaling, it's enough to make a body cry.

On top of that, you know that AI can give you a hand here, but managing the handoff between your AI, your own skilled hands and artistic taste and style, and your always-in-a-hurry client list is another big pain.

Enter the concept of the Cloudinary Claimable Cloud, just released today.

Take a look at the docs about these new temporary instances available now

What we built and why

Provision a disposable Cloudinary cloud with no signup, using npx @cloudinary/cloud
Auto-detect a dropped image and upload it to that temporary cloud
Auto-crop it into 6+ social formats (Instagram, LinkedIn, X, Facebook, Stories) using AI-based smart cropping
Generate a side-by-side gallery of results automatically
Hand off a Claim URL so a client can make the cloud permanent

Now, you can hand off the main pain points to AI - the resizing and reshaping of your images for the various social media platforms, while giving your clients a clean handoff via a temporary Cloud environment that they can use to create a Cloudinary account and start using these assets.

One side effect: this also nudges your whole client base toward the same toolset - Cloudinary. The bigger deal is working with an AI agent that makes your life easier but ALSO allows you to keep control of the output.

Let's walk through how this works! It all boils down to a new command:

npx @cloudinary/cloud

Type that into your terminal to kick off the process.

I built a small app around this concept to provide this AI agent with a simple harness, so let me show how that looks. The user experience is to drop any image you want resized into the /drop folder. Under the cover, there are a few more processes at work:

Provisioning: Spin Up a Temporary Cloudinary Cloud

On the first run, the app spins up a disposable Cloudinary "Claimable Cloud" via npx @cloudinary/cloud with temporary credentials, so no signup is required. The generated credentials are saved temporarily in a .env file locally. This gives the tool a live upload/delivery endpoint without any manual account setup. These credentials are refreshed when you start the app: npm i && npm start.

Watch & Transform: Auto-Crop for Each Social Platform

The app watches the drop folder for new images. When a high-resolution master image lands there, it's uploaded to this temporary Cloudinary instance.

The image we want to resize

Then it's run through a set of predefined social-media format specs (Instagram Square, Portrait, Story/Reels/TikTok, LinkedIn, X/Twitter, Facebook) using dynamic transformations like c_fill,g_auto for smart auto-cropping to each platform's exact aspect ratio and dimensions, focusing on the most important element. Control these formats and transformations in the src/formats.js file:

export const FORMATS = [
  {
    key: 'instagram-square',
    label: 'Instagram Square Post',
    ratio: '1:1',
    width: 1080,
    height: 1080,
    buildTransformation: subjectFill(1080, 1080),
  },
  {
    key: 'instagram-portrait',
    label: 'Instagram Feed Portrait',
    ratio: '4:5',
    width: 1080,
    height: 1350,
    buildTransformation: subjectFill(1080, 1350),
  },
  {
    key: 'instagram-story',
    label: 'Instagram Story / Reels / TikTok',
    ratio: '9:16',
    width: 1080,
    height: 1920,
    buildTransformation: padWithBlurredBackground(1080, 1920),
  },
  ...
];

Render Results & Send to Client: Share a Claim URL

The temporary Claimable Cloud is provisioned using the temporary credentials stored in .env:

// Ensures a usable CLOUDINARY_URL is in process.env, provisioning a disposable
// cloud on demand. Returns { claimUrl } (claimUrl is undefined when a cloud
// was already configured before this run).
export function ensureCloud() {
  loadEnv();

  if (process.env.CLOUDINARY_URL) {
    return { claimUrl: process.env.CLOUDINARY_CLOUD_CLAIM_URL, provisioned: false };
  }

  console.log('No Cloudinary cloud configured yet — provisioning a disposable one (no signup needed)...');

  let raw;
  try {
    raw = execFileSync(
      'npx',
      ['-y', '@cloudinary/cloud', 'create', '--no-agent-metadata'],
      { encoding: 'utf8' },
    );
  } catch (err) {
    const combined = `${err.stdout || ''}\n${err.stderr || ''}`.trim();
    throw new Error(redact(combined) || err.message);
  }

  const values = parseKeyValues(raw);
  loadEnv();

  if (!process.env.CLOUDINARY_URL) {
    throw new Error('Cloud provisioning did not produce a CLOUDINARY_URL.');
  }

  return { claimUrl: values.CLAIM_URL, provisioned: true };
}

Generated variant URLs are written to manifest.json and rendered into an auto-generated side-by-side HTML gallery, which opens automatically. The output also includes a Claim URL, letting the disposable cloud be handed off (e.g., to a client) and made permanent at any time.

The temporary link and generated gallery of images to pick from. Note the fancy Instagram one!

Now you can pass that Claim URL right on to your client and start the process of allowing them to claim the results and start working with them.

This is an early feature, with more agent-based tools coming from Cloudinary soon. Watch for more interesting work around AI agents in the near future!

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

Cloudinary's New Image Generation API: One API, Multiple AI Models, and Built-in Asset Management

Jen Looper — Wed, 08 Jul 2026 13:02:03 +0000

At conference booths, developers often ask whether we support image generation at Cloudinary, given our emphasis on media management. As of now, I can say "YES! yes, we do" - here's how!

Cloudinary's Image Generation API lets developers generate images from text prompts using multiple AI model families, then store the result as a managed Cloudinary asset for delivery, optimization, resizing, and transformation.

Original image copyright © REUTERS/ABC Affiliate WABC

In this tutorial, we'll use Python to call the API, generate an image, and save the final result to Cloudinary.

What you'll build

A Python script that can:

Generate an image from a text prompt
Choose a model family like flux, recraft, gpt-image, ideogram, or nano-banana
Save generated output as a managed Cloudinary asset
Print the final image URL, public ID, size, and file size

Prerequisites

First, follow the instructions on Cloudinary docs to install the image generation add-on to your account. While you're in the Cloudinary console, make note of your API key, secret and the cloud name where you want assets to be stored.

Install the Python dependency:

pip install requests

Export your Cloudinary credentials:

export CLOUDINARY_API_KEY="your-api-key"
export CLOUDINARY_API_SECRET="your-api-secret"
export CLOUDINARY_CLOUD_NAME="your-cloud-name"

Here's your script. Save it as 'generate.py'.

Generate your first AI image

Run the script with a prompt:

python3 generate.py "A medieval monk"

This image was generated with the default Flux model

The script sends a request to Cloudinary's Image Generation API:

payload = {
    "prompt": prompt,
    "model": {
        "family": model_family,
        "tier": tier
    },
    "target": {
        "target_type": "managed_asset",
        "public_id": public_id
    }
}

Then it calls the API using HTTP Basic Auth:

resp = requests.post(
    f"{IMAGE_GEN_BASE}/generate/{cloud_name}/text_to_image",
    auth=(
        os.environ["CLOUDINARY_API_KEY"],
        os.environ["CLOUDINARY_API_SECRET"]
    ),
    json=payload,
    timeout=90,
)

Choose an AI image model

This is the fun part. You can pick the image generation model that best suits your use case. For example, I find that nano-banana works well with images that include text.

You can switch model families without changing the rest of your application code:

python3 generate.py \
  "A futuristic Tokyo skyline at sunset" \
  --model flux \
  --tier premium

Supported model families include:

flux
gpt-image
ideogram
recraft
nano-banana

This was the same prompt, done with Ideogram model

That makes it easier to test different visual styles while keeping one integration path.

Save generated images as Cloudinary assets

The important part of the request is this:

"target": {
    "target_type": "managed_asset",
    "public_id": public_id
}

This tells Cloudinary to save the generated image as a managed asset on your account, instead of returning only a temporary output.

After generation, the script prints something like:

Image ready!
Public ID: generated/fox-hiking
URL: https://res.cloudinary.com/...
Size: 1024×1024 px
File size: 840 KB

Once the image is in Cloudinary, you can resize it, optimize it, crop it, transform it, and deliver it through Cloudinary's CDN. Wicked fast and easy!

Full usage examples

Generate a new image:

python3 generate.py "Marie de France playing pool"

I love this image! Marie de France was a 12th century author of some famous french literature that I particularly like. I don't think she ever played pool, though. Also this pool table is awesomely 'AI-pilled"

Use a premium model:

python3 generate.py \
  "A cinematic product photo of a sneaker floating over water" \
  --model flux \
  --tier premium

Why this is useful

Most image generation APIs return an output.

Cloudinary's Image Generation API returns an output that can immediately become part of your media pipeline.

That means developers can generate an image and then use the same platform to:

Store it
Transform it
Optimize it
Resize it
Deliver it
Reuse it across applications

For apps that already manage media with Cloudinary, AI image generation becomes part of the existing workflow instead of a separate one-off process. The pipeline just got way simplified for you!

Final thoughts

This Python script is small, but it covers the core production workflow:

Authenticate with Cloudinary
Send a prompt to the Image Generation API
Choose a model family and tier
Save the result as a managed asset
Return a usable image URL

If you're building developer tools, e-commerce workflows, campaign generators, or AI-powered creative apps, this approach gives you both image generation and image delivery in the same pipeline.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

Magnificent Humanity, Building Cities, and a Special Announcement!

Jen Looper — Fri, 05 Jun 2026 19:37:39 +0000

I'm back from a great vacation and side-quest experience in Asia, where one can always find brilliant human interactions even with imperfect linguistic competence. For example, having a haircut at a random salon in Taipei where the little nephew of the stylist offered fashion advice on the spot, gravely shaking his head at short haircuts for ladies, and anyway why didn't I dye it purple? Or a photoshoot on a bamboo raft on the Li river in the Zhuang autonomous region, with full-on Chinese style makeup in local costume for a solid two hours in the boiling sun with a patient photog.

While I was on vacation, Pope Leo published something important. It turns out, the "Woke Pope" is participating in an ever-more-woke religious discourse straight outta the Vatican, and as a borderline agnostic Protestant, I found it incredibly empowering. His "Magnifica Humanitas" encyclical is the thought leadership core document that many of us have looked for - a work that doesn't land on either the AI-hater or the All-In-AI extreme, but, in the best devout tradition, looks to religious texts for guidance to discover narratives that can guide our steps as we try to build with AI while not wrecking the world. Let's talk about it.

The Encyclical

This document is long and wide-ranging. It's broken into five chapters; the first two discuss the Catholic Church's evolving concept of Social Doctrine, the third talks about how AI is being built and dives into the narratives surrounding this building effort, the fourth discusses concepts of human dignity and freedom within this evolving ecosystem, and the final chapter offers a critique of the current ever-more ferocious culture of war and the aggressive exercise of raw power, citing the need to "disarm" these systems to build a "civilization of love". It's a beautiful vision, and a multimedia experience; there are videos and infographics - this is a Pope who well-understands the internet and the power of imagery.

Risks vs Humane AI

I didn't have it in my 2026 Bingo card to have the Pope exhorting software engineers: "Developers ... bear a particular ethical and spiritual responsibility, for every design choice reflects a vision of humanity. Just as the creator of an artistic or literary work must consider the values it conveys, so developers are called to embed values in their projects with due seriousness: with transparency, responsibility toward affected communities and careful attention to ensuring that what is being cultivated is a genuine good."

Parables and Exemplars

One motif that stood out to me is the Pope's insistence that, as part of the magnificence of humanity, every person is of value. But how can that value be measured? Rather than valuing the human by their output, society is better served by valuing the dignity of work itself. Stemming from the crisis of work triggered by the industrial revolution, the Church's social doctrine is evolving to cover a similar crisis around ensuring that everyone is afforded the ability to contribute to the social good via their work. "The human person is an end, not a means" flies directly in the face of much of the toxic corporate culture prevailing today.

The focus on recentering human beings within this high-tech moment has led some folks to closely examine the narratives presented in the document. One thing that longstanding religious traditions do well is use stories and parables to teach underlying values. The Pope leans on the well-known story of the Tower of Babel and the less well-known story of Nehemiah's rebuilding of Jerusalem to show 'exemplars'. Rather than creating a grandiose, yet dehumanizing tower where communication breaks down, we are encouraged to look at the way Nehemiah organized the collaborative rebuilding of a city for the greater good. This is a model of building software - AI or other - that benefits the many, rather than just a few oligarchs.

Two Cities, Two Models

One interesting aspect of this encyclical is the use of inclusive language and the special attention paid to those left behind by technological advances. The Pope takes care to address "men and women of goodwill" - an improvement on similar writing of the past, and notes that "there is still a long way to go to ensure that the rights of a great many, namely women, are equally and genuinely guaranteed throughout the world." But there is little acknowledgement about the specific ways that women have backslid in recent years or what specifically we should do to ensure equity.

I'll be honest here. I'm really worried about how people who identify as women are showing up in this new world. Starting in the mid 2010s, we worked at the grass roots to build community, launch initiatives, press companies for diversity programming, and create inclusive education. Today I'm seeing women-focused grass-roots orgs shut down or sucked into a corporation completely divorced from their grass-roots origin (WWC, I'm looking at you). In today's climate of oligarchy, technocracy, bare-knuckled corporate competition, and the dominance of silicon valley in AI discourse, I'm hard pressed to name 20+ visible female leaders who are influencing how AI is being built from an engineering standpoint. We all saw that awful photo of the Trump/Xi summit, with ZERO women at the table. This image says 1000 words. It's time to muscle back in to make sure we have a seat at the table so that we can build the kind of AI reality the Pope is envisioning.

We are in fact entering a perfect storm of underrepresentation, gaps in perception, and disproportional impact of AI on women's careers. According to Forbes, Axios, and panels at Davos, growth is slow, gaps remain large, and women are especially hard-hit by AI disruption.

Women in AI engineering and research: slowly increasing but still underrepresented
Women in AI leadership: Increasing, but leadership gap remains large
Women using GenAI at work: Lower adoption than men
Women receiving recognition for AI use: Lower than men, even when usage is similar
Jobs most exposed to AI disruption: Disproportionately female-dominated occupations

So what are we going to do to close this gender gap?

A New City

Pope Leo leans on a comparison between two polar opposite models of building. But I propose that there's a third model that was described in the late Middle Ages by one of the first feminist writers in the West: Christine de Pizan, who wrote a rebuttal to the current fashionable narrative of her times, the Roman de la Rose. Rejecting this misogynistic (albeit wildly popular) book, she wrote her own vision of a new city: The City of Ladies.

Christine listens, learns, and builds

In Christine's vision, completed around 1405, the goddesses Reason, Rectitude and Justice all confer with the author to construct a new city populated by the virtuous women of history. Armed with the 'spade of intelligence' Christine sets to work to build the city, telling the stories of righteous women while building the walls, houses, and appointing a queen to rule them all.

These positive examplars of women of noble character continue the biblical tradition of providing instructive stories - and we can use this late medieval vision to provide a roadmap into something that I'm proud to launch as of today: a new nonprofit initiative that I'm calling Her AI Studio.

https://heraistudio.org

As an experienced nonprofit and educational founder (Wellesley Chinese Language School Co-Founder, Vue Vixens, Inc. Founder and CEO, Front-End Foxes School Founder and CEO, Beanpot Studio CEO) I know what it takes to launch nonprofits and keep them going through funding and mission challenges (hello COVID). So what will we build, exactly?

I'm inspired with a conversation with my daughter about the new interest in Cyber decks that's causing a renewed grass roots community to build hardware projects. I want this nonprofit organization to go global, opening cohorts for high-school aged students who identify as women mentored by college-aged students (and older) who will get girls building, fast. Staying on device, offline, and local, we will learn about protecting data, building ethically with locally-hosted models, and conserving our energy. We will focus on a four-beat cadence:

Beginners: Discover - learn about AI by discovering the women who influenced and built the field, while building your first locally powered AI app.
Intermediate: Create - build a local AI project bridging hardware and software focusing on image, text, and voice.
Advanced: Engineer - build your cyber deck with your own kit, learning to program with AI and using AI to program.
Capstone: Showcase your project in international celebrations - you're now ready to pay it forward!

What are we looking for?

Interest - do you want to mentor? would you like to join me in crafting curriculum? are you a teacher curious about the initiative, or a student who'd like to potentially join? Sign the interest form at heraistudio.org.
Funding - we can't go it alone. Each student kit is going to cost about $250 - we are looking for sponsors. Please reach out!
Expertise - I've been working with hardware for years but chatting with you helps me stay up to date. I'd love to chat and learn your perspective on building with this model.

Join our Discord: https://discord.gg/jRkR2t4UpC and let's chat.

Get in, losers, we're gonna build a nonprofit

Say It With Flowers: BouqAIs with the Tussie-Mussie Generator

Jen Looper — Sat, 09 May 2026 17:19:01 +0000

The Tussie-Mussie Generator is a web app for anyone who wants to send a meaningful floral e-card with an AI-generated "tussie mussie", a type of small nosegay. It uses the Victorian language of flowers to compose a bouquet, generates an image with Gemini, and sends it via Resend. This post covers
a Mother's Day relaunch: fixing a broken email integration and swapping the AI image model.

What changed in this relaunch

Migrated email sending from Mailgun to Resend, including a Cloudflare serverless function
Fixed DNS configuration across Porkbun, Netlify, and Resend for a custom subdomain
Replaced the previous image generator with Gemini for accurate tussie mussie generation
Refactored the UI with Astro + Vue and impeccable.style for AI-assisted critique

Have you ever wanted to build an e-card system that would allow you to send little ai-generated bouquets to your friends? No? Yes? Read on, gentle reader!

Last year, I onboarded to my new job by building this sample app that lets you use the Victorian language of flowers to compose a bouquet. An image-heavy app like this is a great candidate for hosting and optimizing via Cloudinary, so all the flower images are stored there. An image of the composed bouquet is generated by Gemini, and then sent via Resend to the recipient of your choice. The app looks like this:

and the generated e-card looks like this:

I launched this app a year ago, and it's had an interesting lifespan. I wanted to relaunch it for Mother's Day and realized there was some refactoring to do!

Here are a few of the gotchas I dealt with:

Keeping the core: The basis of this app is its dataset, which I created a while ago on Kaggle as a useful version of the Victorian "Language of Flowers", scraped from the Farmer's Almanac. Here's an example of what that looks like:

If your idea is centered around a solid dataset, you can't go wrong. Once I had the list, it took me a while to scrape images of the flowers in question and store them, optimized, on Cloudinary. But that work was done a year ago. So two things remained for the relaunch: refactoring the UI and fixing the bits that stopped working, namely the e-card generator.

Refactoring the UI

This app is built using my preferred stack, namely Astro + Vue. After a year, it was definitely time to upgrade, including fixing the tailwind integration which relied on an outdated package. Cursor made short work of that - it's one of the best uses of AI software agents.

Tip: periodically ask your AI to plan the removal of any redundant files or code while you complete refactors. There are usually vestiges that can be deleted.

I used a wildly useful AI skill to refactor my admittedly basic UI: impeccable.style. Install these skills on your machine and as you work with any AI generated UI suggestions, run /impeccable critique to reality-check your work for taste and style. I'm now using impeccable on all my UIs - it also helped me tidy my portfolio. The UI went from this:

...to the UI shown above. I like it a lot.

Fixing the E-Card functionality

This app caused me a horrible panic after launch last year, ruining an anniversary dinner, due to a kerfuffle with Mailgun, the original e-card sending mechanism. I was shocked by an enormous overage charge due to hacking of their systems, and I shut the entire thing down as fast as I could. To relaunch, I needed to find a new service to send email via API. Once again, Cursor to the rescue.

Enter Resend, a new email service that is much more solid than my previous choice. Let us hope that we have smooth sailing from now on! The integration includes a serverless function that you can host on Cloudflare, and works well as soon as you verify a domain. That last part took me the longest time - the gotcha is that since I bought the domain on Porkbun, I had to edit DNS records there to serve emails from a subdomain. The site is hosted on Netlify, so I had to build the subdomain there, and then the DNS verified on Resend. It's the kind of task that you don't do often, so it's easy to miss a step. But all is set now, and the emails are sending!

I also had to reconsider how to build the AI generated bouquets. I'm out of credits on the service I previously chose to generate the bouquets, and they were never quite right anyway (generated as standard bouquets rather than true tussie mussies which have a silver filigree holder). It's crazy to see how AI has evolved for this esoteric imagery over the past year - now Gemini can accurately compose a tussie mussie in its holder, given a specific prompt.

Enjoy these little bouquets! Send one to your Mom today!

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

How to Win a Hackathon

Jen Looper — Sun, 03 May 2026 03:43:08 +0000

A sponsor’s perspective

This blogpost is written on the heels of a few amazing weekends spent knee-deep in students in Toronto and Los Angeles at Hack Canada and LA Hacks, engaging almost 2000 students in person in total. Managing a sponsor track, I have some thoughts on good ways to present yourselves when angling your project towards a sponsor prize.

For those not as familiar with how student hackathons work, they are usually comprised of an organized weekend populated by college undergrads (or older, or younger! high schoolers are increasingly getting into the mix). Over about 36 hours, students form teams and try to build software that meets a need, solves a problem, or proves a point. Some hackathons focus on themes around social good, like Hack Canada which challenged students to build something of special interest to Canada. Others have several themes and a full roster of sponsored options.

Hackathons are a bastion of the cozy web! It’s a delight to see students embracing the freedom to create weird, useless, and wildly creative apps like AeroMaxx, a way to gauge influencers’ aerodynamic-maxxing (Taylor Swift is more aerodynamic than Clavicular, did you know?). LA Hacks even had a track embracing the “most questionable” hack, won by “Yes? Or Yes!”, a hack that had literal goldfish helping make decisions and trigger AI agents to do things like break up with a girl friend, quit a job, and post to social media. Great projects. Please keep building this kind of weird stuff.

a cozy interface for roommates to manage their shopping lists: MagByte

It’s a great moment to let your creativity run wild:

Yes? Or Yes! LA Hacks most unhinged hack winner - goldfish help you make decisions and then trigger agentic workflows. Good luck!

I’ve been working the hackathon circuit as a developer advocate for at least ten years, including the mess during COVID, and the major difference nowadays between the earlier events is, unsurprisingly, the heavy use of AI tooling that both speeds up delivery, polishes the final product, and gets more software shipped, way faster. Instead of watching demo videos, judges can actively interact with an almost production-ready app, shockingly quickly.

Still, there are some tips and tricks that I’d like to share based on a few recent observations of these very fun events. Here are five things to keep in mind as you go for a win!

Who’s it for?

A lot of folks are attracted to social-good type projects, and that’s very laudable. I love them, personally, and tend to mark them highly in my judging rubric. I just want to caution hackathon participants against going after this vector with a “tech savior complex”. It’s easy to think that tech can solve all the things. And tech has made great strides on devices such as most smart phones to help people with various accessibility issues such as those who are blind, color blind, experience hearing loss, or are mobility-challenged.

But if you are going to create a project for a given sector of users, it’s critical to come at these projects with an open mindset and humility, and to work with people who have these actual challenges. Working on an app for older people? Call your Grandma or Grandpa before you start building. It’s likely they can guide you to refining your app to make it much more useful.

At Hack Canada, teams succeeded who spent time talking to local security guards as they built, to ensure that their safety-oriented hack would be useful. It’s all about finding your customer and/or user, and building backwards from that.

Power to the People

Sponsors and mentors are often available to help you all the way through the event, so make use of them! Take some time before you start working to talk to sponsors and see if they can help you start to ideate. Learn about the various sponsors and what they are looking for. Some are looking for product feedback, some are hiring, others may have another agenda.

Maybe you’ll find a product that you never heard of and will make a nice professional connection. Get your LinkedIn app ready to scan codes! This is a great moment to network.

At your service at the booth!

Skill Up

The use of AI tools has accelerated the build phase of a hackathon almost beyond recognition. When I was judging hackathons around 2016 or so, the projects produced were super shaky - often the hacker created a video at the moment that the app worked, and showed that to a judge as it was highly unlikely they could ever get it working again! This has all changed when AI has become such an important build partner.

The use of AI, however, shifts the focus of a hackathon away from the software engineering tasks that now can be offloaded to agents (with supervision, of course!). Now, you need to spend a good amount of time getting set up to make your AI as successful and efficient as you can. Many vendors have created tools to help; we at Cloudinary produced a Skills Pack for this purpose: https://github.com/cloudinary-devs/skills. Using tools such as these will effectively give official context to your app, preventing hallucinations and other wasting of time.

Sponsormaxxing and platformmaxxing

There’s a trend towards “sponsormaxxing” - LA Hacks even had a track for this. The term refers to the incorporation of as many sponsors’ platforms as possible in a given hack. I think it’s a fun challenge, but there’s a risk: if you want to win a sponsor track, you’ll likely be judged on deep integration with their platform.

In our case at Cloudinary, I’m looking for not just the use of the platform as a place to dump images and video, but a deep use of the APIs, for example optimizing and transforming images in an AI pipeline with the goal of constructing videos (as you can do with our winning hack from LA Hacks, StudyO!). Going for a sponsor track prize? Focus on deep integrations.

Going deep, however, can also be risky! There’s the risk of “platformmaxxing” - using every bell and whistle of a platform to try it out. You may need to be a bit strategic here, as you might max out your credits by piling on as many platform aspects as you can. Watch out for signs of maxing out your credits and plan accordingly.

Speaking of maxxing: AeroMaxx

Perfect the Pitch

Judges have only a few minutes per team so you need to make your best impression right away. Come ready to demo with your storytelling skills well in hand. Do some trial runs prior, and get feedback on your presentation skills. Lead with the use case, show the demo, and field questions. A good strategy for a 2-3 minute hackathon pitch is to focus on the problem you see, the solution you propose, and the impact you predict.

Hook (15 seconds): Introduce yourself, state the problem you are solving, and share a relatable scenario or story.
Demo (60-90 seconds): Walk the audience through your core feature
Tech (30 seconds): Briefly explain the most impressive technical hurdle you overcame or the tech stack that powers the hack.

Tip: Consider recording a video of your demo just in case there’s a horrible glitch, and practice getting over a glitchy demo. You can do it!

Pitching can be intense!

Winning a hackathon is a great goal, but don’t forget that being accepted into some of these selective hackathons, participating, and building a piece of software that you can be proud of is very laudable as well. Wishing you the best of luck! And maybe we will see you there.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

6 Free Cloudinary Courses That Teach You to Build Media-Optimized Apps

Jen Looper — Thu, 30 Apr 2026 18:33:51 +0000

The Cloud to Crowd (C2C) curriculum is Cloudinary's free 6-course learning suite for developers who want to build and ship applications with production-quality image and video handling. It covers everything from Cloudinary basics to AI-powered transformations paired with hands-on projects at every step and a free certificate when you complete each course.

Fun fact: community member Jerome Hardaway of Vets Who Code, one of our nonprofit partners in the Creators Community program, coined the "Cloud to Crowd" term!

What You'll Be Able to Build After This Curriculum

Upload, manage, and transform media assets using the Cloudinary API
Optimize images and video for performance in a Next.js app
Apply AI-powered features: background removal, generative fill, auto-tagging
Use the Python SDK to automate media workflows on the backend
Deliver video efficiently with format and quality auto-selection
Ship a real portfolio project that demonstrates all of the above
Earn a Cloudinary certificate and qualify for the Creators Community

Why We Built This

Getting images and video right in a production app is harder than most tutorials suggest. Resize, format, optimize, deliver — each step has tradeoffs, and most learning resources skip the messy middle. The C2C courses are designed to fill that gap: structured, project-driven, and free.

The 6 Free Courses

All courses are self-paced and free at https://training.cloudinary.com/pages/c2c.

Course 1: Media IQ for Developers

Enroll: https://training.cloudinary.com/learn/course/devrel-c2c-intro

The starting point for the first three courses in this suite. This course covers the core Cloudinary concepts: cloud name, API keys, the Media Library, and your first upload and transformation. No prior Cloudinary experience needed. By the end, you'll have a free account set up and understand how assets move through the Cloudinary pipeline.

You'll learn to:

Choose the right image formats for your use case, understanding when to use JPEG, PNG, WebP, AVIF, or SVG based on content type, browser support, and performance trade-offs
Apply strategic optimization techniques including responsive images with automatic format/quality selection and intelligent cropping with gravity detection

Course 2: Media IQ for Developers with Next.js

Enroll: https://training.cloudinary.com/learn/course/devrel-c2c-next

The flagship course of the C2C curriculum. You'll build a storefront application (the "CapZone" e-commerce store) using Next.js and the Cloudinary Next.js SDK, applying real-world image optimization patterns throughout.

You'll learn to:

Build an image-optimized web application using Cloudinary to upload, store, transform, and deliver images on-the-fly through URL-based transformations and CDN delivery
Apply strategic optimization techniques including responsive images with automatic format/quality selection and intelligent cropping with gravity detection
Create Next.js components that handle image uploading, display optimized images with overlays and watermarks, and serve different sizes for different contexts

The kind of component you'll be writing by the end of this course:

import { CldImage } from 'next-cloudinary';

export function ProductImage({ publicId, alt }: { publicId: string; alt: string }) {
  return (
    <CldImage
      src={publicId}
      width={600}
      height={400}
      crop="fill"
      gravity="auto"
      format="auto"
      quality="auto"
      alt={alt}
    />
  );
}

Course 3: Media IQ for Developers with AI

Enroll: https://training.cloudinary.com/learn/course/devrel-c2c-ai

Cloudinary's AI-powered transformation features are some of its most practical and useful. This course covers the tools that save the most time in real projects: background removal, generative fill, object-aware cropping, and auto-tagging. This course follows the Next.js course, building AI into the CapZone store by adding a color picker to colorize the hats.

You'll learn to:

Remove or replace backgrounds using e_background_removal
Use generative fill to extend or recompose images
Apply smart cropping with gravity: "auto" for face- and object-aware results
Auto-tag assets using AI analysis to make large libraries searchable

Course 4: Media IQ for Developers with Video

Enroll: https://training.cloudinary.com/learn/course/devrel-c2c-video

Video is a different beast from images; you manage larger files, adaptive bitrates, more delivery complexity. This course covers the Cloudinary video pipeline from upload to playback. It's the third and final part of the progressive enhancement of the CapZone e-commerce web app that you started prior. In this course you'll add a video to one of the products.

You'll learn to:

Upload and transcode video using the Cloudinary API
Apply video transformations: trim, resize, overlay, add subtitles
Build playlists and seekbars with subtitles

Course 5: Media IQ for Developers with Python

For less JavaScript-focused developers, this course covers Cloudinary's Python SDK: uploading, managing, and transforming assets from any Python environment.
Enroll: https://training.cloudinary.com/learn/course/devrel-c2c-python

You'll learn to:

Authenticate and configure the Python SDK
Upload and tag assets for organization
Build a small pet store app

Course 6: Building a Developer Portfolio with Cloudinary and Next.js

Enroll: https://training.cloudinary.com/learn/course/devrel-c2c-portfolio

The capstone course. You'll apply everything from the earlier modules: upload, transformation, optimization, and AI features — to build a complete portfolio site using React and TypeScript that demonstrates your Cloudinary skills to employers. Focus on your own skills and show them off to the world in a media-rich website.

You'll learn to:

Architect a media-rich portfolio app from scratch
Combine multiple Cloudinary transformations into a polished UI
Optimize for performance: lazy loading, responsive breakpoints, format auto-selection
Deploy a production-ready app you can link from your resume

Who's this for?

The C2C curriculum works for:

Early-career developers who want structured, project-based learning beyond "hello world" tutorials
Career changers building a portfolio they can point to during job interviews
Frontend developers who've used Cloudinary but want to understand the optimization and AI layers
Backend developers looking to add media handling to their Python projects
Bootcamp graduates who want to go from tutorial-follower to someone who can build production media pipelines

How to Enroll for Free

Go to training.cloudinary.com/pages/c2c
Create a free Cloudinary Academy account — you just need an email address
Start with Course 1 or jump to the course that matches your current skill level

All 6 courses are free. Each comes with a completion certificate. Finishing any course and passing its final assessment at 80%+ earns you a credential that qualifies you to apply to the Cloudinary Creators Community, a network with mentorship, Discord access, mini-hack events, and connections to developers worldwide.

About the Cloudinary Creators Community

The Cloudinary Creators Community (CCC) is a selective, cohort-based program for developers who've completed the C2C curriculum.

It includes:

Access to private Discord channels with Cloudinary's Developer Relations team
Monthly mini-hack challenges to apply and extend your skills
Peer review and mentorship from a global network of developers
Badges, certificates, and holopins with social media shout-outs

You can join the Discord server now and participate in community activities even while you're working through the curriculum.

Ready to start? → training.cloudinary.com/pages/c2c

This blogpost was crafted with the help of Claude. Banner image by Nano Banana.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

Surviving as a Human in the Age of AI

Jen Looper — Tue, 31 Mar 2026 02:43:37 +0000

This is a submission for the 2026 WeCoded Challenge: Echoes of Experience

There's a palpable feeling of anxiety in developer communities right now as concrete programming skills that we have painstakingly built either through study or experience appear to now be ... kaput. Outdated. Irrelevant. Passé.

Andrej Karpathy described the feeling of watching his manual coding ability "slowly degenerating," as a personal sense of loss as AI tools take over coding work: "I've already noticed that I am slowly starting to atrophy my ability to write code manually".source

Ex-Google CEO Eric Schmitt expresses shock at watching AI zip through programming tasks that he used to have to hand-code: "I've been doing programming for 55 years. To see something something start and end in front of your own life is really profound." source

Developers of all stripes are coming to the realization that being "just a coder" is no longer enough; new skills of systems thinking and architecture, plus that vague concept of 'taste' are starting to factor heavily in success in this industry. Students, as usual, are quickest to come to this realization, and Computer Science programs are rapidly either evolving or depopulating. Students are also feeling the brunt of this rapid change as narratives they were told as freshmen no longer hold true by the time they reach their senior year.

It's a tough time to [just] code.

Laughs in Humanities PhD.

Plus ça change, plus c'est la même chose [The more things change, the more they remain the same]

A tale of two pathways

Let me tell you a little story. It's the tale of someone who followed her heart her entire career.

When I was 16, I went to France, and was swept away while visiting Chartres cathedral. True story. Growing up in a pretty privileged environment, with parents encouraging me to follow my dream, I studied for 6 years post-bachelors degree before achieving my PhD in French literature from Cal Berkeley in 1998.

Even during my tenure in graduate school in the 90s, it was clear that Silicon Valley was the hub of some really exciting stuff and that a seismic shift was occurring in the dot-com-boom. But we in our ivory tower looked slightly askance at the fellow in Scandinavian Studies who ditched his PhD program to join a hot startup way back then. We were that confident that our skills would be valued. Anyway Scandinavian Studies is far less relevant than French Studies, everybody knows that.

We of course didn't realize that humanities PhD programs in the languages are primarily designed to ensure a stream of cost-effective [read: crazy cheap] TAs (GSIs - graduate student instructors, as we called ourselves after unionizing). We were on the front lines of language learning, teaching a section of French 1 or 2 every day, coupled with mandatory pedagogy training, so that Cal undergrads could get through their language requirement. With the hope that we'd be able to graduate and land a tenure-track position, we put up with a lot, relying on this scanty income to keep food on the table and rent checks covered for a room in a West Berkeley two-storey.

Here is some lore: that house on Roosevelt Ave had a can of peaches that had to have been a decade old, a gift from every successive wave of grad students who rented the house. I wonder if it's still there.

Most of us were unwilling to understand that the academic job market was weak and getting weaker by the year, although there were signs.

We really didn't want to hear the gospel

One wake-up call to me was watching a colleague and her husband, after graduating, accept one teaching job between them. Another was watching another colleague getting thinner and thinner as he was quite literally going hungry to cover his family's expenses while part-time teaching.

Unsurprisingly, given our blinders, the bottom falling out from what was left of the job market, and the other considerable headwinds (I see you, Adjuncting!), the academic job market kicked my rear. Within a few years I threw in the towel and retrained as a web developer, catching that dot-com-boom at its tail end, restarting from scratch. In those days, you could take courses in web design online from Macromedia University, an early training program, and find an entry-level job in a completely new industry.

I worked my way up the corporate ladder (stories for another day) over the subsequent 25 years, but I won't say that I haven't yearned every day for what I gave up. Mourning the loss of a dream. Wondering "what might have been". Reconsidering the choice to pivot every time I hit a career bump, and being tempted to try to go back to some form of teaching. Coping with accusations of having sold out.

Ubi Sunt

This long preamble is meant to emphasize that where you come from will most likely have very little relationship to where you are going in your career in the long run, especially in this fast-moving age of dramatic technical change - much faster and probably even more disruptive than the dot-com-boom of the early 2000s.

The current anxiety and nostalgia permeating the tech discourse boils down to this tweet:

One benefit of having a background in a field other than where you wind up working is that you can lean on your previous knowledge base to bring insights to your work. Because really, there is nothing new here. The sentiment of loss and nostalgic mourning is explored over and over again in literature - the motif even has a name, 'Ubi sunt'. The 10th century poem The Wanderer expresses this trope with exquisite sadness:

"Where is the horse gone? Where the rider? Where the giver of treasure?
Where are the seats at the feast? Where are the revels in the hall?
[...] How that time has passed away,
grown dark under cover of night, as if it had never been."

In a world grown old and dark, where is the greatness of our past? And was the past great at all, if it can disappear without a trace, as if it had never existed?

The 10th century manuscript containing The Wanderer, the Exeter Book. The word "Eardsteppan" translates to "Wanderer", in the usual Old English "kenning" where two words are put together to refer to one thing. In this case the "earth stepper" is the wanderer.

In the 15th century in Middle French, François Villon borrows the Ubi Sunt trope to mourn the great ladies of the past, comparing them to those of the present day:

"Where is the very wise Héloïse,
For whom was castrated, and then made a monk,
Peter Abelard in Saint-Denis?
For his love he suffered this sentence.
Similarly, where is the Queen
Who ordered that Buridan
Be thrown in a sack into the Seine?
Oh, where are the snows of yesteryear!"

Villon was a slippery character who had several run-ins with the law, and he seems to be not so much mourning the past as reminding us that returning to it might get you chucked into the Seine.

"Student, poet, housebreaker" - an early print manuscript of Villon's works from 1489, in Paris BNF.

Still, if 10th century Anglo Saxon poets dwelling in a much more uncomfortable world felt a profound sense of regret for a (probably) even more uncomfortable past, we in our ergonometric chairs battling Cursor also have the right to feel a degree of loss, a "slow degeneration" à la Karpathy. We can perhaps express ourselves using a literary trope that's over 1000 years old. But we ought to be able to put this anxiety into perspective, as Villon insinuates that we should. This brings me to my second point.

All The Feels

We have the right to feel all the feels that AI is making us feel - sad, useless, confused, stressed at its speed-of-light implementations, upset at the instability in the job market as we are threatened with AI-powered [sic] wave after wave of layoffs, worried for the next generation of early-career folks clawing their way up through the ranks in a very different world.

But I would posit that we, the dispossessed diaspora of ex-Humanities academics, have something to contribute here. We, too, trained for years only to be met with a job market that resolutely turned its back on us. And there isn't a day that I don't mourn that this happened, as I mentioned above. But I found ways to cope, and that has been to bring the skills of my own lived and learned experience to bear on an ever-evolving professional landscape.

One coping mechanism for me has been to attempt to bridge these two worlds by bringing the humanities into tech, because the lessons I learned there apply universally - such as those lessons around close reading, translating syntax, and the power of interdisciplinarity.

The Interdisciplinarian

Consider your past experience as a way to inform your present situation. In the near future, tech is going to look very different from how it does now. The job of the programmer will lean into more architecture than hand-coding. But your hard-won skills will still resonate in your day to day activities; rather than becoming obsolete, your programming skills will simply be applied in a different context.

You will have to lean into your accumulation of knowledge. Know that parts of it will apply, be ready to learn anew, and accept that the only thing that never changes is the fact that things will change. Well, and also death. And probably taxes.

As Emily Dickinson (whose poetry is well-studied from a data science context) well knew:

All but Death can be
Adjusted ;
Dynasties repaired,
Systems settled in their
Sockets,
Centuries removed, —

Wastes of lives resown
With colors
By superior springs,
Death — unto itself exception —
Is exempt from change.

-- 89

To put a corporate stamp on it, the old exhortation to bring your whole self to work applies, now more than ever. The workplace has need of all of us with all of our interesting, strange, diverse, warty, emotional, and overwhelmingly human perspectives as our professions will be shaped increasingly by the collective that is AI. Embrace your interdisciplinarity, lean into it. I wish you great success. And please take care of yourself and each other.

Improve Web Performance: Image Formats, Responsive Images, and Core Web Vitals

Jen Looper — Wed, 11 Mar 2026 18:43:45 +0000

Because images typically account for the majority of total page weight, this technical guide provides actionable strategies for web performance optimization. It details modern image formats like WebP and AVIF, implements responsive delivery via srcset, establishes lazy loading best practices, and explains the impact of media on Core Web Vitals (LCP, CLS, and INP) for production-level development.

What you’ll get

A mental model: how bytes (file size) relate to what you see (pixels on screen) and to LCP / CLS / INP.
A format cheat sheet (photos, UI, icons, fallbacks) and when lossy vs lossless makes sense.
When to lazy-load (and when not to—so you don’t hurt LCP).
Three fixes to try first on a real page (largest image, format mix, mobile percentiles).
How to use Cloudinary’s Web Speed Test to turn gut feel into numbers.

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

The hidden performance problem on most websites

This article explains how image bytes affect LCP, CLS, and INP, and what to change first.

Open Chrome DevTools on almost any modern site and check the Network tab.

What you’ll usually see is something surprising:

Images dominate the payload.

The average homepage ships around 1 MB of images, often more than JavaScript, CSS, and HTML combined.

A super heavy page with a lot of big product images. Lazy loading and optimization would help here.

That product page with 20 images?
Each one is an opportunity to either:

Deliver a fast, polished experience
Or frustrate users with slow loading and layout shifts

If you care about Core Web Vitals, SEO, and user experience, image optimization is one of the highest-impact improvements you can make.

This article was generated from our Cloud to Crowd: Media IQ with Next.js curriculum, built by Cloudinary Developer Relations. Go through this curriculum and pass the certification exam to qualify to become an official Cloudinary Creator!

Why images matter (and when they don’t)

Humans process images much faster than text.

A well-chosen image can:

Explain a product instantly
Replace paragraphs of documentation
Capture attention in fast-scrolling feeds

But images can also hurt your product experience when used poorly:

Too many images slow down page loads
Poor cropping hides important information
Large files damage Core Web Vitals
Undisclosed AI or edited images reduce user trust

So you need to follow this simple rule:

Right format + right size + smart delivery

Check out the way these images are delivered to the browser

Images and Core Web Vitals

Images heavily influence Google's Core Web Vitals, particularly:

Largest Contentful Paint (LCP)

Measures how long it takes for the largest visible element on the page to load.

This is often your hero image.

A good LCP target is under 2.5 seconds.

Cumulative Layout Shift (CLS)

Images without defined dimensions can cause layout shifts while loading.

Interaction to Next Paint (INP)

Heavy pages delay responsiveness.

Optimizing images can dramatically improve all three metrics.

The current state of images on the web

Nearly every webpage (99.9%) loads at least one image.

Average number of images per page:

Device	Avg Images
Desktop	14
Mobile	13

Common formats used across the web:

Format	Usage
JPEG	32.4%
PNG	28.4%
GIF	16.8%
WebP	12%
SVG	6.4%
AVIF	1%

But these numbers reflect habit, not best practices.

Performance-focused teams are already shifting toward modern formats.

Example data from optimized platforms shows:

Format	Usage
WebP	49.5%
JPEG	19.9%
AVIF	13.3%
HEIC / PNG	8.7%

The takeaway:

Modern image formats are replacing JPEG-first strategies.

Choosing the right image format

Different formats solve different problems.

Lossy compression

Reduces file size by permanently discarding some data.

Formats:

JPEG
WebP
AVIF

Pros:

Much smaller file sizes
Ideal for photos

Cons:

Slight quality loss

Lossless compression

Reduces size without losing data.

Formats:

Pros:

Perfect image quality
Ideal for UI graphics

Cons:

Larger file sizes

Check out the difference between a lower res image vs JPEG XL

Quick developer cheat sheet

Use case	Best format
Photos	WebP / AVIF
Graphics	PNG
Icons	SVG
Legacy fallback	JPEG

Modern formats like WebP and AVIF can reduce file size by 40–60% compared to JPEG while keeping similar visual quality.

Delivering images efficiently

Choosing the right format is only part of the story.
Delivery strategy matters just as much.

Cloudinary can automate format and size selection for delivery so you’re not hand-tuning every URL. It helps you optimize, transform, and deliver images for your users. See how on the Developers Hub.

1. Use responsive images

Don't force mobile users to download desktop-sized images.

Use srcset and <picture>:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Product hero image">
</picture>

The browser automatically chooses the best supported format and size.

2. Use a CDN

A Content Delivery Network (CDN) reduces the physical distance between your users and your images.

Modern image CDNs can also:

Resize images automatically
Convert formats (WebP / AVIF)
Adjust compression
Crop dynamically

This allows you to store one high-quality original while serving optimized versions.

3. Lazy-load images (strategically)

Lazy loading delays images until they approach the viewport.

Example:

<img src="gallery.jpg" loading="lazy" alt="Gallery image">

But there is one important rule:

⚠️ Never lazy-load above-the-fold images.

Doing so hurts Largest Contentful Paint.

Lazy loading should only be used for below-the-fold content. Do not lazy-load the hero or other above-the-fold LCP candidates.

Responsible image usage

Performance isn't the only consideration.

Developers should also use images ethically and accessibly.

1. Avoid misleading visuals

Don't use edited or cropped images that misrepresent a product.

2. Disclose AI-generated images

Transparency builds trust with users.
The banner at the top of this article was generated using Nano Banana.

3. Make images accessible

Always include descriptive alt text.

<img src="dashboard.png" alt="Analytics dashboard showing user growth trends">

4. Respect privacy and licensing

Check image licenses
Get consent when photographing people
Remove sensitive EXIF metadata

5. Balance aesthetics and performance

A beautiful image that takes 8 seconds to load isn't beautiful.

It's broken.

Common image optimization myths

“A CDN replaces responsive images”

False.

Responsive images help the browser choose the correct size, while CDNs deliver optimized assets.

You need both.

“More images mean more engagement”

Not necessarily.

Images should help users make decisions, not clutter the interface.

Three practical tips for developers

1. Start with your largest image

Open DevTools → Network and find the biggest image.

Check if delivered size == display size.

A common mistake: 3000px image displayed in a 600px container.

That’s wasted bandwidth.

2. Measure your format mix

Check what formats your pipeline actually delivers.

If you're still mostly serving JPEG, there's likely a huge optimization opportunity.

3. Don’t assume mobile is optimized

Mobile networks amplify performance problems.

Check your 75th and 90th percentile metrics, not just averages.

Try this: Analyze a website’s image performance

You can test any website using Cloudinary’s Web Speed Test.

Visit https://webspeedtest.cloudinary.com

Then analyze:

Performance score
Total image weight
Largest Contentful Paint
Potential size reductions

You'll often discover massive performance gains from simple fixes.

Final thoughts

Images are often the largest performance lever on a webpage.

If you remember only three things:

1️⃣ Optimize your largest image first

2️⃣ Use modern formats like WebP and AVIF

3️⃣ Deliver responsive images with proper sizing and explicit dimensions when you can (helps CLS)

Small improvements in image delivery can produce huge gains in performance and user experience.

What’s the biggest image optimization issue you’ve found on a website?