DEV Community: Jen Looper

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?

DRY January: Demotivational Posters with the TanStack or Next.js

Jen Looper — Mon, 26 Jan 2026 18:18:58 +0000

January can be a time when we make all the resolutions to do and be better in the shiny new year. We resolve to do more... more exercise, a more rigorous diet, even more mindfulness, doggone it. But what if we (and hear me out) instead thought about doing LESS. Less struggling against those 4PM sugar cravings, less fighting to not take an after-lunch nap, less battling frozen driveways to back the car out so you can make it to pilates.

I don't know if this is creepy or inspiring, but let's build it anyway

What if we embraced our inner zen and simply...did the best we could? After all, isn’t all the productivity that AI is bestowing upon us freeing up our time to do less, rather than more? I’m only half-kidding here.

To encourage us to embrace a reductionist mentality, I did a little experiment to see if I could rethink some popular messaging that I’m sure you encountered if you ever worked in an American corporate office in the early 2000s: motivational posters.

These little gems were plastered on the walls to exhort us to Bring Our Best Selves To Work, Achieve More, and Be Bold. Here’s an example from the “Successories” company:

As you can see, they have a particular format of a black background, an inspiring photo, an uplifting word with a lot of kerning, and a blurb at the bottom to drive the message home. A Whole Vibe was created as you walked down a poster-adorned corridor in order to toss your bag lunch into the office fridge.

I particularly like this wolf. This is me.

Even back in those days, people made fun of these posters, and I remember being employed in one company packed with sarcastic Eastern Europeans that was instead decorated with demotivational posters such as those crafted by the brilliant Despair.inc. Here’s a good one:

The problem with all of these posters is that, well, you have to buy them, and that’s no fun. So let’s see if we can build something like this ourselves, and actually make it a more surprising experience by connecting two APIs to generate shady messaging like this at random.

not sure what 'this' is, but you got it!

Temporarily shelve that resolution against unproductive and negative thinking and let’s see what we can build using:

The Affirmations API
Unsplash API
TanStack for a web frontend
Cloudinary image storage to display the image so you can print off a PDF of your poster

You'll need two API keys, one for the ever-useful affirmations.dev API and one for Unsplash images. You'll also need a Cloudinary account, so create one for free here if you aren't already setup. You then need to gather your Cloudinary API key, secret, cloud name and build an upload preset so that you can upload images neatly into Cloudinary. Learn how to get credentials here and how to create an upload preset here.

We’re going to grab one of the pithy affirmations from the API, extract the longest word as the central message to display with plenty of kerning, and then send that word to Unsplash to find a match. Store the image returned in Cloudinary and display the lot a as a printable poster, as a stacked image, word, and affirmation on a black background, like this one:

The miracle of survival

Continuing my tradition of building useless things to try new stacks, let’s give TANStack a whirl. TanStack is a React framework that's pitched as a less 'magical' alternative to Next.js. I also built this same app using Next.js, to compare the two codebases, for learning purposes. Check out the GitHub repo with the two apps here

Disclosure; I used Cursor to help build the two comparable apps in the demo repo. According to Cursor, the difference between the two boils down to your personal dev preference: "Next.js is a full-stack framework with conventions and a large ecosystem. TanStack Router/Start is a type-safe, flexible routing solution that can be extended to full-stack. The choice often comes down to preferring conventions (Next.js) vs. flexibility and type safety (TanStack)."

Some differences between these two frameworks in the context of this app include:

Server-side data fetching architecture

Next.js:

Uses Server Actions ('use server') and async Server Components
Server actions in actions.ts are callable from both server and client TanStack:
Uses route loaders and createServerFn for server functions
Data fetching happens in the route's loader function
Loaders run on the server before the component renders

Environment variable access

Next.js:

Uses process.env.* for environment variables
Variables are available on the server by default TanStack:
Uses import.meta.env.VITE_* (Vite convention)
Only variables prefixed with VITE_ are exposed to the client buildCloudinaryUrl.ts, because this app was built with Vite as its build tool.

Difference in image handling

Next.js:

Images are displayed using the built-in optimized component TanStack:
TanStack doesn't have such a component built-in, so you need to make sure to optimize your images! This is consistent with its 'magic-free' approach.

Guess what! You can easily optimize your images in Cloudinary. While there are other ways to do this, I decided to just add some URL transformations to the Cloudinary URL returned once the Unsplash image is uploaded:

export function buildCloudinaryImageUrl(publicId: string): string {
  const cloudName = import.meta.env.VITE_CLOUDINARY_CLOUD_NAME

  if (!cloudName) {
    throw new Error('Cloudinary cloud name not configured')
  }

  const plainPublicId = publicId

  const transformations = [
    `c_fill,w_1200,h_800`, // Fill to 1200x800 for poster feel
    `f_auto`, // Auto format
    `q_auto`, // Auto quality
  ].join('/')

  // Return the complete Cloudinary URL with transformations `https://res.cloudinary.com/${cloudName}/image/upload/${transformations}/${plainPublicId}`
}

Now you're able to grab an affirmation from the API and use it to query Unsplash, storing the result into Cloudinary and using it to build your poster. In TANStack it looks like this:

export const fetchNewAffirmationData = createServerFn({
  method: 'GET',
}).handler(async (): Promise<AffirmationData> => {
  // First fetch the affirmation
  const affirmationData = await getAffirmation()

  // Extract the longest word from the affirmation to use as image search query
  const words = affirmationData.affirmation.split(' ').filter(word => word.length > 0)
  const longestWord = words.reduce((longest, current) => 
    current.length > longest.length ? current : longest, ''
  ).toLowerCase()

  // Fetch an image based on the longest word
  const accessKey = import.meta.env.VITE_UNSPLASH_ACCESS_KEY
  if (!accessKey) {
    throw new Error('Unsplash access key not configured')
  }

  const unsplashResponse = await fetch(
    `https://api.unsplash.com/photos/random?client_id=${accessKey}&orientation=landscape&query=${encodeURIComponent(longestWord)}`
  )
  if (!unsplashResponse.ok) {
    throw new Error('Failed to fetch Unsplash photo')
  }
  const unsplashData = await unsplashResponse.json() as { id: string; urls: { full: string } }

  // Upload the Unsplash image to Cloudinary
  const publicId = await uploadToCloudinary(unsplashData.urls.full)

  // Build the Cloudinary URL with transformations
  const cloudinaryUrl = buildCloudinaryImageUrl(publicId)

  return {
    affirmation: affirmationData.affirmation,
    longestWord,
    cloudinaryUrl,
    photoId: unsplashData.id,
    publicId,
  }
})

And once you have all your pieces in place, you'll be able to view that matching affirmation, image, and printable styling all in one place so you can build a PDF poster:

const handlePrint = () => {
    if (posterRef.current) {
      const printWindow = window.open('', '_blank')
      if (printWindow) {
        printWindow.document.write(`
          <!DOCTYPE html>
          <html>
            <head>
              <title>Affirmation Poster</title>
              <style>
                ...some fancy styling
              </style>
            </head>
            <body>
              <div class="poster-container">
                <img src="${imageUrl}" alt="${affirmation}" class="poster-image" />
                <h1>${longestWordWithDots}</h1>
                <div class="poster-line"></div>
                <h2>${affirmation}</h2>
              </div>
            </body>
          </html>
        `)
        printWindow.document.close()

        // Wait for image to load before printing
        setTimeout(() => {
          printWindow.focus()
          printWindow.print()
          printWindow.onafterprint = () => printWindow.close()
        }, 250)
      }
    }
  }

So there you have it...you've built a delightfully useless little app that combines a few API calls with optimized image presentation to make you feel a little less seasonally-affected, we hope.

Happy New Year! If you liked this little app, there are plenty more where it comes from from your friends at Cloudinary Developer Relations.

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

Build Holiday Card Collages with One Line of Code

Jen Looper — Thu, 04 Dec 2025 14:48:59 +0000

In this article, I'm not going to show you much code. Instead, I'm going to show you how you can build a holiday card collage, complete with a ribbon footer with text, a background, and 5 styled photos with rounded, colored borders in one line using the magic of Cloudinary's transformations.

This is way cool, so buckle up and let me show you how I built this URL-generating app for your holiday card-sending needs. You can try it right now here; it generates cards that look like this:

Maybe this tool will even save you some money as printing photo-quality holiday cards can get expensive!

Build an app, any app

I have been enjoying building Astro apps, and, let's face it, using Cursor makes architecting this sort of thing a real breeze. Use your favorite AI tool to craft an app that will allow you to upload five photos to Cloudinary, rearrange them, and generate a URL to build the holiday card.

💡 Here's a tip. If you are looking to quickly scaffold an app via prompting in Cursor or your IDE of choice, you can get better results by using two tools: ChatGPT to build the prompt, and Cursor to execute it.

My initial lazy half-baked idea sent over to ChatGPT:

what kind of demo could I build to create a holiday photo card maker for cloudinary

ChatGPT, of course, thought I wanted it to build an app for me, and went straight to scaffolding a Next.js app with code everywhere. A few clarifications later, after requesting Astro for use in Cursor...

create this as a prompt I can give to cursor

...ChatGPT generated a really nice, detailed prompt ready for building which you can read in full here

By having this kind of very detailed prompt, Cursor is able to build a perfectly reasonable app on the first try. Then it's up to the engineer to tweak it, redesign it, and add elements while keeping the core functionality of uploading and URL-building intact.

Add some extras and get ready to upload

I went ahead and changed the app colors for a wintry, cozy look, adding some falling snow, a popup elf with changing holiday messages (can you find him?), glowing lights, and a candy cane border, mostly borrowed from CodePen. Just because we use AI doesn't mean we can't continue to make interesting interfaces! And AI can help you do that, too.

After those fun things are complete, you can start making sure that you're set up to use Cloudinary's image upload and image transformation capabilities. To make this work, you need to ensure that you have some environment variables set up. Create an account on Cloudinary (there's a generous free tier) and grab your API keys from the console by clicking the "⚙️" gear icon in the left nav and selecting 'API Keys':

You want to add those keys to your .env file locally, and then make sure they're available on your hosting service when you push your app to the cloud. I use Netlify so I add these keys into the Netlify console before publishing.

PUBLIC_CLOUDINARY_CLOUD_NAME=<your cloud name>
PUBLIC_CLOUDINARY_UPLOAD_PRESET=christmas-collage

This app also needs what's called an 'Upload Preset', which is essentially a placeholder that helps your app figure out where your uploaded images should go.

Set up that preset by clicking the 'Uploads' navigation link that's right under the 'API Keys' navigation on the left. This will let you set up an unsigned preset.
Call it 'christmas-collage' (or something else, and make sure to update your app).

Make sure you have a folder set up by clicking Assets > folders on the left nav in the Cloudinary console. Call this folder 'collages'.
Also create a folder called 'holiday-assets' and add a collage background image and a background image for your ribbon element on the card. I used a white pixel image and a fancy holiday background like this:

Photo by JESHOOTS.COM on Unsplash

Watch the URL builder work

Now here's the interesting bit. Once you're done messing with your interface to make it look cute, take a look at the very clever way that your card is generated. First, you upload a series of 5 photos of your family to the app, and the interface lets you rearrange them into the order in the card that you want.

True story, my daughter asked me what the difference is between this and PicCollage, the answer being "Mom made it!"

The URL that is generated, packed with Cloudinary image transformations, looks something like this:

https://res.cloudinary.com/jen-demos/image/upload/w_1600,h_900,c_fill,q_auto,f_auto
/l_holiday-assets:jhi9cpio4ahxomhagwvs/c_fill,w_473,h_680/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_50,y_50
/l_holiday-assets:d9njoekpa1zzzepy2y5d/c_fill,w_473,h_426/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_563,y_50
/l_holiday-assets:nm9i3sjh6c3mkfj0ari1/c_fill,w_473,h_214/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_563,y_516
/l_holiday-assets:rg0c1ul7ux1gcgl8c2lr/c_fill,w_473,h_214/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_1076,y_50
/l_holiday-assets:d0brmcfuqfyzwtelsiyt/c_fill,w_473,h_426/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_1076,y_304
/l_holiday-assets:white-pixel/c_fill,w_1600,h_100/o_70/fl_layer_apply,g_south,y_20
/l_text:Pacifico_70:Our%20Family%20-%20Holiday%202025,co_rgb:000000/fl_layer_apply,g_center,y_380
/holiday-assets/collage-bg

Yes, that one line created this card:

Let's break down that one-liner.

Step 1: Set up the base “card” background:

.../image/upload/w_1600,h_900,c_fill,q_auto,f_auto/ ... /holiday-assets/collage-bg

w_1600,h_900 – make the final image 1600×900.
c_fill – crop/resize to fill that aspect ratio.
q_auto,f_auto – optimize quality and format automatically (WebP/AVIF/etc).
holiday-assets/collage-bg – this is the base background image for the card.

Step 2: Add the first photo (top left)

/l_holiday-assets:uzfzkx8d5xd0jr1jxzyo/c_fill,w_473,h_680
/r_25,bo_8px_solid_rgb:FFD700/fl_layer_apply,g_north_west,x_50,y_50

l_holiday-assets:... – load this image as a layer.
c_fill,w_473,h_680 – size it to 473×680, cropping to fill.
r_25 – rounded corners (radius 25).
bo_8px_solid_rgb:FFD700 – 8px solid gold (#FFD700) border.
fl_layer_apply,g_north_west,x_50,y_50 – apply the layer at the top-left, offset 50px from the top and left.

Add the remaining images, some taller than others and placed in different areas of the card.

Step 3: Add a semi-transparent footer bar

/l_holiday-assets:white-pixel/c_fill,w_1600,h_100/o_70
/fl_layer_apply,g_south,y_20

This bar uses a white-pixel asset as a tiny base and stretches it to w_1600,h_100 to form a strip which is o_70 – 70% opacity (semi-transparent). It's then applied at the bottom (g_south) with a small vertical offset (y_20).

Step 4: Finally, add the holiday greeting text

/l_text:Pacifico_70:Our%20Family%20-%20Holiday%202025,co_rgb:000000
/fl_layer_apply,g_center,y_380

l_text:Pacifico_70:... – create a text layer with Font: Pacifico in size: 70. Give it the text: Our Family - Holiday 2025 with co_rgb:000000 – black text color.
fl_layer_apply,g_center,y_380 – center the text horizontally and shift it vertically to overlay the footer.

In short, this monster URL

starts with a festive background
lays out five photos in a collage with rounded corners and gold frames
adds a semi-transparent white bar at the bottom
and writes “Our Family - Holiday 2025” in a script font on top of that bar

...rendering the whole card on demand in a single Cloudinary transformation URL. Really nice!

Tip: you can make edits right in the URL to change elements on the card - try adding your own family name and changing the border color.

Enjoy the results

You could save this image and print it for snail mail, or send it right away via email to the folks who are eager to hear from you this holiday season. And you did it in one line. That's awesome!

Try this in Cloudinary today, and get one more item checked off your holiday to-do list. Learn more about image transformations here.

Happy holidays from Cloudinary Developer Relations to you.

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

Clara Denari: Learn Cloudinary Image Transformations Through a Boston Mystery Game

Jen Looper — Tue, 30 Sep 2025 20:51:16 +0000

Excerpt: Clara Denari is a browser game for developers who want hands-on practice with Cloudinary image transforms, C2PA-style provenance, and multi-language support—set in a Boston mystery. It replaces long tutorials with short labs.

At a glance

Five challenges—each one forces you to use the transform pipeline, not just read about it.
Quizzes and a Holopin badge when you show you’ve learned the ropes.
Four languages (English, French, Spanish, and Brazilian Portuguese).
A free Cloudinary account for the embedded labs (add your cloud name and image public ID in the Lab to experiment).
Content Credentials (C2PA-style) so you can inspect an image’s history as it changes through its lifecycle.

Tired of plowing through long tutorials? Done with 🔥Tutorial Hell🔥? This is gamified, hands-on Cloudinary training—a mystery first, a lab second.

The gameplay loop

Clara Denari is a narrative game that teaches Cloudinary image transformations: you solve clues, clean string artifacts, brighten an image to reveal hidden text, and use image refiners in short embedded labs, with quizzes and a Holopin at the end. We built a narrative game you can play at claradenari.com—so you can explore the toolset without another passive screencast.

Introducing a new heroine for the ages: Clara Denari, Master Detective. Join her as she prowls through Boston, recovering stolen property by solving the mysteries left by the nefarious Dr. Chiaro Obscuro.

This villain, who is both a meticulous kleptomaniac and someone with considerable long-term memory issues, has done it again. His habit is to hide his ill-gotten gains in obscure places, leaving a trail of clues that only he will understand. This time he’s stolen something valuable and has hidden it—but where?

It’s up to Clara to save the day. By deciphering each clue, she may be able to find the stolen property—but it’s up to you to help her.

Start your adventure here.

Follow the trail in the story, picking up objects and storing them in your inventory.

What you practice (transformations, labs, Content Credentials)

You’ll use Cloudinary transformations to clean a piece of string, brighten an image to reveal hidden text, and apply refiners to tidy up lost keys, then discover the secret hiding place of the lost treasure. You’ll also dig into Content Credentials—a C2PA-aligned view of how an image’s provenance and edits appear over its lifecycle:

Content Credentials using C2PA standards.

You’ll need to get hands-on with these ideas to finish the case. Solve all 5 challenges and reach the end with the key. Try transforms yourself with a free Cloudinary account; in the Lab, plug in your cloud name and the image’s public ID and adjust transformations until the clue makes sense.

Here is one example of a Cloudinary delivery URL (public demo asset). You change the transformation chain right after upload/, before the public ID (here, sample).

https://res.cloudinary.com/demo/image/upload/c_scale,w_400/sample

c_scale,w_400 resizes the delivered image; in the game’s Lab you will swap in brightness, refiner, and other tokens that match each clue.

Clara’s Lab

Localization and setting

Préférez-vous le français ? ¿Qué tal el español? Português brasileiro? We have you covered: the app is fully localized in four languages. This first Clara Denari Adventure is set on the gritty underside of Boston, USA—cannoli and all. If you’d like Clara to come to your city to solve a mystery, say the word in the community discussion.

How to start

The app is built to teach: short embedded quizzes check what you’ve picked up, and you can earn a custom Holopin to show detective mastery on your social profiles.

Earn your limited edition Holopin.

Trench coat on, glass polished? Join the inaugural Clara Denari release from Developer Relations at Cloudinary. Start the game: claradenari.com.

“It is a happy talent to know how to play.” — Ralph Waldo Emerson, 1803–1882

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

What To Do if Your Web Site Is as Slow as Molasses in January

Jen Looper — Wed, 30 Jul 2025 17:50:00 +0000

Image from the 1982 version of the CandyLand board game.

Web performance is one of those topics that simmers on the back burner for some developers; something that, unless well-regulated and occasionally stirred (read: fine-tuned) can easily boil over. It’s a well-worn mantra that for each second of wait time experienced by a user, revenue is lost. Bounce rates, e.g. how quickly a user will leave your site, increase 32% as a page’s load time increases from one second to three seconds [source]. Given today’s attention spans, it’s likely that users’ patience is becoming ever shorter.

Fixing your website’s performance is not a one-time activity. As it grows and changes, performance should always be top of mind for the careful developer. Nor is a slow website repaired by focusing on just one aspect. Slow web speed can be caused by, in general, three elements: heavy design, clunky server infrastructure, or a user's slow internet connection. These factors can be broadly categorized into issues with the website itself (unoptimized code, huge images, video), server performance, and network conditions. Let’s focus on the first of those problems.

Attack of the Mega-Image

The use of giant images is often a culprit in site slow-downs. Even if you’re not a specialist in making your sites blazingly fast, there are a few helpers that can at the very least reduce your image load time to a reasonable level. In this article, I’d like to show how I used a tool developed by Cloudinary to measurably speed up an image-heavy site I built - not that my site will ever generate revenue, but the process became a test of how to balance image quality with site speed.

Consider this site which I built using Astro, with a way to pick flowers and build custom bouquets reflecting the Victorian language of flowers. It looks like this:

Once you choose the flowers you like, Gemini AI is used to create virtual ‘tussie mussies’, a favorite parlor game in the Victorian era, sending coded messages to enemies and admirers alike. In our case, you can send your AI-generated ‘bouquAI’ via an e-card powered by Mailgun. Here’s an example of a generated bouquet:

Pretty? Yes! Useful? Well, not so much. Monetizable? Hardly! And fast? Given that there are 118 high-resolution images in the flower database, which I originally downloaded as Creative-Commons licensed flower images and stored locally, not at all!

The Need for Speed

Can we speed up this site a little simply by using Cloudinary’s image CDN and some optimizations suggested as best practices? As it turns out, there’s a useful tool that we can use to get a baseline, and then progressively optimize. It’s called https://webspeedtest.cloudinary.com/ and is a great way to work through your image optimization challenges.

I first started by analyzing the page speed without any optimizations, and was unpleasantly surprised to discover that the images I used were heavy as heck - while pagination stops the bulk of them from loading all at once, the six plus the logo that show on the home page totaled almost 3 megabytes. Helpfully, the webspeedtest tool offers hints on how to better follow best practices on image load: smart compression, alongside the use of Cloudinary’s CDN, should make a difference!

I uploaded all 100+ flower images used by this site up to Cloudinary’s Assets area, keeping their original names so as to continue to be callable using the .json file in my codebase that retains the image names and the flower’s meaning. Then, focusing on the images loaded into the image cards on the homepage, I changed the image’s url to reflect their new residence in the CDN:

<img   :src="`https://res.cloudinary.com/${cloudName}/image/upload/flowers/${flower.image}`"
:alt="flower.name"
 class="w-full h-full object-cover"
 />

For those new to this domain, a CDN (Content Delivery Network) is “a geographically distributed group of servers that caches content close to end users. A CDN allows for the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos.” according to Cloudflare. Assets geographically closer to users are delivered more quickly to their browser.

Then, it was time to try some of Cloudinary’s image transformations to optimize the delivery. Adding an f_auto parameter allows my images to be delivered in the fastest way to a given client. A scorecard offered by the webspeedtest tool shows the potential for speeding up delivery given different image formats:

Following best practices to enable image compression, I then started tweaking the q_auto parameter via the URL to see how I could improve my page score. I found that by using a width setting for my responsive cards and adding q_auto:eco, I was able to compress the images to a reasonable size. By changing the :eco parameter to other options such as :good or :best you can fiddle with the amount of image loss that you can tolerate (the site has to be fast and look good, after all).

<img   :src="`https://res.cloudinary.com/${cloudName}/image/upload/w_250/f_auto,q_auto:eco/flowers/${flower.image}`"
:alt="flower.name"
class="w-full h-full object-cover"
/>

I experimented a bit with how the images looked using q_auto (which is the same as q_auto:good) by trying ‘best’ and ‘eco’ settings. There’s a clear tradeoff on image quality and page load times, so use your best judgement on what is an acceptable quality level for your images for your use case. The Cloudinary docs offer a good example of how images look when this parameter changes: https://cloudinary.com/documentation/image_optimization.

By doing this tweak, I managed to get a better score - from C to B:

Mediocre to Good isn’t bad! And I get a 100% score on Lighthouse:

What other things could I do to speed the image load even more? One thing would be to create a more complex responsive design that would deliver only the smallest images to the smallest screens. Another would be to make sure that all images are meticulously cropped and resized. For the time being, however, I’m satisfied with having speeded up my site a bit.

Stay tuned for esoteric demos and sign up to enjoy the generous free tier of this top-notch image and video platform!

What are you doing to make your site wicked fast? Let me know in the comments!

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

About me: I'm the Director of Developer Relations at Cloudinary. Stay tuned for esoteric demos and sign up to enjoy the generous free tier of this top-notch image and video platform!

Uncovering Family History with Cloudinary’s Image Transformations, Goose, and MCP Servers

Jen Looper — Thu, 24 Jul 2025 15:21:21 +0000

There’s a peculiar human desire to reconnect with their past by looking for clues in family trees. Did you get that sass from Great-Aunt Edna, who, to her dying day, declined to share her prized German Potato Salad recipe? Did you get those baby blue eyes from your Mom’s side of the family? In a country like the US, shaped by waves of immigration and where people tend to move frequently in search of opportunity, it’s easy to lose track of where we came from in pursuit of where we are going (next).

Recently I’ve been digging through archives to flesh out my family’s genealogical history a bit, using the interesting software offered by Ancestry.com, a company that helps you build out your family tree. One thing I found was photos attached to the tree are few and far between - they are a pain to scan and upload, and these paper fragments often are damaged. For this reason I’ve been happy to experiment with ways to upscale and enhance these images using AI - and I discovered a little key to the past while doing so!

I also found that my ninth great-grandmother was the famous Rebecca Nurse Towne, hanged as a witch during the Salem Witch Trials in the 1690s. So there’s that.

Sample of what family trees look like on Ancestry.com

Something Old, Something New

While digging through Ancestry’s pages, I discovered an image I hadn’t seen before of my Great Grandparents, Elmer Dove and Blanche Bartlett Dove:

While the image is pretty crisp, I put it through a workflow that I built to help my research: enhancing the images using AI to get a few more details from them. To do this, I used Goose, a new tool by Block to interface with LLMs and MCP servers so that you can simply do your work locally without battling tooling. This was exactly what I needed to enhance the images I found on Ancestry right from a desktop app, chatting with Goose via Gemini, my LLM of choice. Cloudinary’s MCP servers work very well with Goose; here’s how to start using them.

To get setup to use Goose with Cloudinary’s MCPs, there are a few steps:

Download Goose for free and take a look at how it interfaces with Cloudinary’s MCP servers: https://block.github.io/goose/docs/mcp/cloudinary-asset-management-mcp/
Install the Cloudinary extension by searching for Cloudinary at https://block.github.io/goose/extensions/ and pressing ‘install’.
Add your Cloudinary URL to the extension’s settings (find the URL by going to the console in Cloudinary and looking for the API key section, where the URL is listed: CLOUDINARY_URL=cloudinary://<your_api_key>:<your_api_secret>@<your_account_name>.
For ease of upload, I added an upload preset so that all the images in this task will go to a specific folder.

Configure your LLM of choice using an appropriate API key as outlined by Goose (I use Gemini)

Now you can start chatting with Goose via your LLM. Tell it to upload images straight from Ancestry paths (which you can get by right-clicking on an image in Ancestry) and transform them to bring these pictures into better focus.

I was amazed by the image quality, and even learned something about Great-Grandfather Elmer:

With this enhanced image, my eye was caught by the little silver axe pinned to the lapel. Some research using ChatGPT found that this signifies membership in the ‘Modern Woodmen’ Association, a proto life-insurance type organization still in existence that pooled members’ assets in case of death, so that the widow would be taken care of. Given that this photo was taken in the 1890s in Nebraska, and documentation mentions his membership in this organization, this checks out, but I never would have made the connection without the little symbol that shows clearly in the enhanced photo. It’s delightful to see these little humanizing elements pop out from the past. Also that’s a cool moustache.

Next I tried a transformation of my formidable Great Grandmother Schoenleber, née Isermann, on the other side of the family. This lady went on to be the mother of twelve, including a set of twins, one of whom was my Grandfather. German farm wives do not mess around. I was thrilled to use Goose and the Cloudinary MCP server to go from this grainy photo…

…to this with some AI enhancement, restoration and brightening, with her amazing spit curls, elaborate lace and earrings on full display:

In conclusion, it’s a wonderful experience to “speak” to your ancestors via these old photographs. Using an MCP server allows you to get tooling out of the way and simply interface with an AI agent that will let you see your past just a little more clearly.

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

About me: I'm the Director of Developer Relations at Cloudinary. Stay tuned for esoteric demos and sign up to enjoy the generous free tier of this top-notch image and video platform!

Using Cloudinary's New MCP Server to Scrape Mozzarella, Camembert and Parmesan

Jen Looper — Sun, 22 Jun 2025 01:16:22 +0000

image from Midjourney, amusingly prompted as 'cheesecore'

I'm always interested in how new technology can help us make our esoteric tasks a little less manual. Speaking of esoteric tasks, did you know that I curate a machine learning model to classify types of cheese? It was done to power a mobile app like this:

The trick with creating custom ML models is that you need to train a model with a bunch of good-quality images so that it can learn about the categories you want to test. In this case, I wanted to be able to walk into a cheese shop and, via my custom ML-enabled mobile app, determine the type of cheese that was available out of the six standard categories of cheese worldwide: bloomy, semi-soft, hard, fresh, blue, and washed-rind. Yes, this is important work.

But digging through images online and manually dumping them into folders is a pain. Alternately, walking into your local cheese shop and shooting video to later split up into images using ffmp, all the while telling the sales people that "I'm fine, just building up a dataset for my ML model", is kind of embarassing. Isn't there a better way?

Live action view of Jerry impersonating a ML model

Turns out ... YES! Recently, Cloudinary released an MCP server solution that would allow me to perform a quick web scrape to gather images of types of cheese that I can curate and upload, tagged, to my account. It's the perfect use case! Make the images come to you using an agent, and make that agent work nicely with Cloudinary, your friend for media management. All while never leaving the comfort and safety of your IDE!

Meet the Cheesy MCP — the AI-powered agent that scrapes free, Creative-Commons licensed, high-quality cheese photos and delivers them straight to your Cloudinary account.

Of course, this system can be used with images other than cheese! Use it for a sweet way to curate other image categories too.

What Is this MCP thing?

The Model Context Protocol, launched by Anthropic last November, is the ~~new hotness~~ power behind AI agents, enabling them to independently function to perform actions set by a user using an agreed-upon protocol. An example is asking an agent to crawl your mailbox periodically to gather receipts to build a monthly expense report, or periodically prowl the web for images of wedding cakes to add to a Pinterest board.

Cloudinary has entered the field with an offering allowing you to connect your AI tools like Claude or Cursor to the Cloudinary service for automated asset management. Take a look at the open source, free servers listed on GitHub as they continue to develop and evolve.

What Does This Have To Do With Cheese?

Honestly, what a question. What doesn't have to do with cheese? Still, glad you asked! I built a Python project to leverage this MCP tool from within Cursor, my IDE of choice. The agent surfs Google, bringing me images that I can curate ad hoc, with a nice automation workflow done via chat in Cursor. Once the images are available, I approve them and check their metadata for proper tagging, and say 'upload' in chat. The images are then uploaded right on up to my Cloudinary account, all tagged up and with metadata intact.

Up and Running

There are a few things you need to do to leverage these servers and a few different ways you can do it. As a Cursor user, I was happy to simply use the 'add to Cursor' buttons available for us:

For Cursor users, you can install MCP servers with one click using Cursor deeplinks:

The following MCP servers are available for Cloudinary:

Server Name	Description	GitHub Repo
Asset Management	Upload, manage, and transform your media assets with advanced search and organization capabilities	@cloudinary/asset-management
Environment Config	Configure and manage your Cloudinary environment settings, upload presets, and transformations	@cloudinary/environment-config
Structured Metadata	Create, manage, and query structured metadata fields for enhanced asset organization and searchability	@cloudinary/structured-metadata
Analysis	Leverage AI-powered content analysis, moderation, and auto-tagging capabilities for your media assets	@cloudinary/analysis
MediaFlows	Build and manage low-code workflow automations for images and videos with AI-powered assistance	MediaFlows MCP

Make sure you have your Cloudinary account ready with your API credentials handy as you'll need to update the environment variables with your actual credentials after installation.

Start Your Engines

Once I installed the MCP JSON into Cursor, it was picked up and I was invited to configure the server. Add your credentials right into the MCP settings:

Once ready, Cursor helped me create a Python script to scrape images and dump them into my local folder. By far this was the most finicky bit - web scraping is an inexact science. Once that is done, the system prompts me to curate them:

After the scrape is done and 'candidates' are offered for upload, I am invited to interact with the system via chat, telling the agent to 'upload'. I can check and, if necessary, overwrite any tags for the images.

And once I give it the go-ahead, the system makes the handshake with my Cloudinary account and uploads the tagged images after I ensure they are correct:

Fresh, not moldy!

It's a new experience for me to be able to use my IDE as an agent, making handshakes between systems that I can control using code and this protocol. And honestly it took a bit of a mindshift to understand that web scraping can be done this way, rather than a plain cron job + Python or web app. But it's rather powerful, wouldn't you say?

Give the new Cloudinary MCP servers a try, and let me know what you build. You can check out my codebase on GitHub.

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

About me: I'm the Director of Developer Relations at Cloudinary. Stay tuned for esoteric demos and sign up to enjoy the generous free tier of this top-notch image and video platform!

Guys, I created the most useful AI Agent: the Egg Price-o-matic!

Jen Looper — Tue, 18 Mar 2025 15:43:58 +0000

Ever since I heard about Agentic AI and the ability that we now have to send little helpers all through the internet to save us some trouble with pesky automations, I've been racking my brains for that killer use case for an AI Agent. I don't really like the idea of an agent creating my entire vacation for me (although helping me get out of my restaurant rut by suggesting a 'surprise' restaurant each weekend would be helpful). Vacations need to be highly personalized and carefully planned, in my opinion, and errors can be costly. I think I'd rather book my own flights, tyvm.

If an AI Agent could be customized to scroll through my tax history and file them for me, with zero chance of errors, that would be amazing. But until we have such a killer app available, let's try something simple to see if we can create both a killer app AND something that's really easy to build.

Recently I took the AI Agents course on Hugging Face, and to be perfectly honest, building these bits of software from scratch is a little onerous. I instead turned to a leader in automations that I've used for years to see what Zapier could teach me about building an app that solves a crucial problem for me: finding the best price of eggs in my local area.

You can test this yourself - it's set to my zip code but you can customize it:
https://agents.zapier.com/copy/75490b5c-c35b-4526-a944-b1e2189603cf.
You'll need a Zapier account.

Creating an agent in Zapier is a quick three-step process, although you will want to fine-tune the resultant agent based on your needs. I found it best to make a hyperlocal agent, rather than a bot that would allow you to input your zip code to find egg prices, so as to reduce manual input needs.

First, login to Zapier and create an agent using the button on the left nav:

You are presented with a few sample agents that you can edit, or offered the option to create your own. For a really special use case like this one, you can create a custom agent:

Then, you can configure it in the configuration tab, inserting any data source or data connection and adding any actions you want the agent to take. In my case, I wanted rows added to a Google spreadsheet when the agent runs, asking it to scrape the internet in a 20 mile radius of local grocery stores, to find and email me the price of a dozen eggs. You can ask the agent to run ad hoc or on a schedule.

With this simple example, you can get a regular email like this:

... and a spreadsheet progressively populated with data. Then, you could create some visualizations around that data as the prices fluctuate, the sky's the limit!

Have you tried any AI Agent creation software recently? Let me know what worked for you in the comments, and any pain points you found. If you are interested in following my adventures in AI, subscribe to my weekly LinkedIn newsletter, AI Drops!