Image and Media Optimization With Cloudinary

On most marketing pages, the single largest thing on the page is not the copy, the code, or the tracking scripts. It is the images. A hero photo, a few product shots, a couple of logos, and a background texture can easily add up to more weight than everything else combined. Yet media is almost always the last thing anyone looks at when a page feels slow, because images are invisible as a performance problem. They look fine. They render. Nobody notices the three seconds of waiting that a 4MB uncompressed JPEG quietly costs on a phone over a mobile network.

I have spent a lot of time inside this problem. At Chegg I owned a landing system of 200+ pages and ran the A/B testing program on it, and one of the things that kept surfacing was that our speed problems traced back to media far more often than to anything glamorous. Marketers wanted to add images, which is exactly what they should be doing, and every image they added made the page a little heavier. The fix was not to stop them. The fix was to build a media pipeline, in our case Cloudinary, into the martech stack so that anyone could add an image without tanking page performance.

This post is about how that works, why it matters more than most teams think, and where people go wrong. Cloudinary image optimization is not a niche engineering concern. It is one of the highest-return, lowest-drama improvements available to a growth team, because it improves conversion and search rankings at the same time, and once it is set up correctly it keeps working without anyone babysitting it.

Why media is the biggest ignored performance problem

Open the network tab on almost any marketing page and sort by size. The heaviest requests are nearly always images and, increasingly, video. A single lifestyle photo shot on a modern camera can be several megabytes before anyone touches it. Multiply that by a page with six or eight images and you are shipping tens of megabytes to a visitor who is going to decide in the first couple of seconds whether to stay.

The reason this gets ignored is organizational, not technical. Images feel like content, and content feels like the marketer’s domain, so nobody treats image weight as a system problem. A designer exports a beautiful asset, a marketer drops it into the page, and the page ships. Everyone did their job. The 4MB payload is nobody’s explicit responsibility, so it survives. I have watched this pattern repeat across teams, and it is always the same shape: no single person owns the weight, so the weight grows.

The other reason it gets ignored is that it does not show up on a fast connection at a desk. The people building the page usually have good hardware and good internet. The visitor on a mid-range phone on a patchy connection is the one paying the cost, and that visitor is not in the room. This is why measurement matters so much later in this piece. You cannot manage what you only experience under ideal conditions.

How slow media costs you conversion and rankings at once

Speed is not a vanity metric. It sits directly on top of two things a growth team cares about, and it affects both through the same mechanism.

The first is conversion. Every additional second before a page becomes usable pushes more people to leave before they see the offer. The relationship is not linear and it is not gentle, especially on mobile, where a slow page competes with the visitor’s patience and their thumb hovering over the back button. When I was running experiments on our landing system, page speed was one of the variables that moved conversion reliably, and media weight was the biggest lever on page speed. If you care about landing page optimization, you are already, whether you name it or not, in the business of media optimization.

The second is search. Google’s Core Web Vitals bake page experience into ranking signals, and the metric most sensitive to images is Largest Contentful Paint, or LCP. On a huge number of marketing pages the largest contentful element is the hero image. That means your LCP, one of the metrics Google watches, is often determined almost entirely by how fast your biggest image loads. A slow hero image is a direct, measurable drag on both your conversion rate and your organic visibility. Fixing it improves both at once, which is rare. Most growth trade-offs pit one goal against another. This one does not.

What a media pipeline actually does

When I say media pipeline, I mean a layer that sits between the raw asset a person uploads and the optimized file a browser eventually receives. Cloudinary is the tool we used, and its job is to take a single high-quality source file and produce, on demand, whatever variant a given visitor actually needs, then deliver it fast.

Think of it as separating two things that teams usually conflate: the master asset and the delivered asset. The master is the big, pristine file you want to keep so you never lose quality. The delivered asset is a small, format-appropriate, correctly-sized version generated for a specific context. In a raw workflow these are the same file, which is why the master’s weight ends up on the visitor’s phone. A pipeline breaks that link. You store one high-quality master and let the pipeline generate the right delivered version for each request.

That layer also functions as a digital asset management system, or DAM. Instead of images scattered across drives, email threads, and CMS uploads, there is one place where media lives, with versioning and a consistent way to reference each asset. That single source of truth becomes important the moment more than one person is adding media, which is to say almost immediately on any real team.

Automatic format and quality selection

The first thing a good pipeline does is choose the format for you. Modern formats like WebP and AVIF compress dramatically better than the JPEG and PNG files most people still upload. AVIF in particular can cut file size substantially at the same visual quality. But you cannot simply convert everything to AVIF and forget it, because not every browser and context handles every format identically.

This is where automatic format selection earns its keep. Cloudinary can inspect the request and serve the best format that particular browser supports, falling back gracefully when needed. You set the delivery to automatic format and automatic quality, and the pipeline decides per request. The marketer uploads a normal file. The visitor receives WebP or AVIF without anyone thinking about it. Automatic quality goes a step further by analyzing the image and choosing a compression level that stays visually clean while stripping bytes the eye will not miss. The gap between a raw upload and an auto-optimized delivery is often the difference between a multi-megabyte file and one a fraction of that size, with no visible loss.

Responsive sizing, compression, and lazy loading

Format is only part of the story. The other big waste is dimension. A page frequently loads a 3000-pixel-wide image into a slot that is 600 pixels wide on a phone. The browser scales it down to fit, but it still downloaded every one of those extra pixels. Responsive sizing means generating the image at the dimensions actually needed for each viewport, so a phone gets a phone-sized file and a desktop gets a larger one.

A pipeline handles this by producing a set of sized variants from the single master and serving the right one based on the device and layout. Combined with compression tuned to each variant, you stop shipping pixels nobody will see. Then lazy loading closes the loop on timing: images below the fold do not load until the visitor scrolls near them, so the initial load only pays for what is visible. That keeps the first paint fast and defers the rest, which is exactly what you want for LCP and for perceived speed.

The important part is that none of this requires the marketer to do anything special. The sizing, the compression, and the lazy-loading behavior are configured once at the system level. The person adding an image to a page does not choose a format, calculate dimensions, or set a quality value. They add an image, and the pipeline applies the rules.

Transformations by URL so marketers self-serve

The feature that changes how a team operates is transformation through the URL or API. With Cloudinary, the transformation you want is expressed in the delivery URL itself. Want the image cropped to a specific aspect ratio, resized to a given width, auto-formatted, and auto-compressed? Those instructions live in the URL as parameters, and the pipeline generates and caches that exact variant the first time it is requested.

The practical effect is that marketers stop filing tickets. In the old model, a marketer who needed a hero cropped differently or a thumbnail at a new size had to ask a designer to export it or an engineer to wire it up. Every image change was a small dependency on another team, and those dependencies pile up into a slow content operation. When transformations are parameters, the marketer can produce the variant they need from the master asset without touching design or engineering. That is real self-service, and it is the thing that makes the whole system scale across a big page count.

This is also where a media pipeline connects to the rest of a modern stack. If your content lives in a headless system like the setup I describe in how a headless CMS changes content operations, the CMS references the pipeline’s optimized delivery URLs rather than storing heavy files itself. Content and media each sit in the tool built for them, and the page assembles fast, optimized assets from both. It is a pattern I lean on when building the broader martech stack a team will actually use, because it removes a whole category of bottleneck.

Consistency and CDN delivery across a large page system

Once you are past a handful of pages, consistency becomes its own problem. On a system of 200+ pages, every hero, every card thumbnail, every logo should follow the same rules. If each page treats media differently, you get a patchwork where some pages are fast and clean and others are slow and heavy, and nobody can tell you why without auditing each one by hand.

A pipeline gives you a way to encode the rules once and apply them everywhere. Define named transformations for your common contexts, the hero, the card, the inline figure, and reference those named presets across the system. When you want to change how heroes behave, you change the preset, not 200 pages. That single point of control is what keeps a large system coherent as it grows and as different people work on it.

Delivery is the last mile, and it is handled by a content delivery network. Optimized files are served from edge locations close to the visitor and cached aggressively, so the second and every subsequent request for a given variant is fast no matter where in the world the visitor is. The combination matters: optimization shrinks the file, and the CDN shortens the distance it travels. Do only one and you leave speed on the table. Do both and a page that used to crawl on a phone in another country loads quickly.

Governance so quality does not rot

Here is the failure mode that catches teams by surprise. You set up the pipeline, speed improves, everyone is happy, and then six months later the pages are heavy again. Not because the pipeline broke, but because governance never existed. When many hands add media and there are no guardrails, entropy wins. Someone bypasses the preset. Someone uploads directly to the CMS. Someone hard-codes a raw URL because they were in a hurry. Each shortcut is small, and together they quietly undo the system.

Governance is the boring work that protects the gains. In practice it means a few things. There is one sanctioned path for adding media, and it goes through the pipeline, not around it. Presets exist for the common cases so people rarely need to improvise. There is a review habit, even a light one, that catches raw uploads before they ship. And someone owns media weight as an explicit responsibility, so it is not the orphan it was in the raw workflow. This is the same change-management thinking that decides whether any martech tool succeeds. The technology is the easy part. Getting people to use the sanctioned path, consistently, is what makes it stick.

Measuring the impact on speed and conversion

None of this is worth doing if you cannot show it worked, and the good news is that media optimization is unusually measurable. On the speed side, track Core Web Vitals, LCP above all, using field data from real visitors rather than only lab tests run on fast machines. Watch total page weight and the number of image bytes shipped. When you roll out auto-format, auto-quality, and responsive sizing, these numbers move, and they move in a direction you can point to.

On the outcome side, connect speed to behavior. Faster pages should show up as lower bounce and higher conversion, and if you run a disciplined experimentation program you can isolate the media change from everything else happening on the page. A clean A/B testing program is what turns a speed improvement into a credible conversion claim instead of a hopeful correlation. On the landing system I owned, treating speed as a variable in that program was part of how we reached a 34% conversion lift, and media weight was one of the levers we pulled to get there. Measure both ends, speed and conversion, and you can defend the investment and know when it is slipping.

Where teams go wrong

A few mistakes show up again and again, and all of them are avoidable.

The first is uploading raw, huge images and assuming the platform will sort it out. Modern tools do a lot automatically, but if you never turn on auto-format and auto-quality or never generate responsive sizes, you are shipping the master file to every visitor. The pipeline can only help if you actually route media through its optimization.

The second is having no automation at all, relying on people to manually export and compress each image. Manual optimization works for a landing page or two and collapses at scale. It is slow, it is inconsistent, and it breaks the moment the person who knew the process leaves. The whole point of a pipeline is that the rules run without a human in the loop.

The third mistake runs the other way: over-optimizing until quality visibly degrades. Compress too aggressively and hero images turn muddy, product shots lose the detail that sells them, and text inside graphics gets fuzzy. That undermines trust and can cost you more conversion than the speed gained. The goal is not the smallest possible file. It is the smallest file that still looks right, which is exactly the balance automatic quality is designed to find. Set it, spot-check the results on real screens, and resist the urge to crank compression past the point where the eye can tell.

Get these three right and Cloudinary image optimization stops being a project and becomes infrastructure, the kind that quietly does its job while your team ships pages, adds media freely, and watches both speed and conversion hold steady.

The short version

Media, not code, is usually the heaviest thing on a marketing page, and its weight is ignored because no one owns it and it hides on fast connections.
Slow media hurts conversion and search rankings at the same time, because the hero image often determines your Largest Contentful Paint.
A media pipeline separates the pristine master asset from the small, optimized version each visitor actually receives.
Automatic format selection (WebP/AVIF), automatic quality, responsive sizing, compression, and lazy loading do the heavy lifting without the marketer thinking about any of it.
URL and API transformations let marketers self-serve variants without waiting on design or engineering.
Named presets keep a large page system consistent, and CDN delivery makes optimized files fast everywhere.
Governance is what keeps quality from rotting when many hands add media; without a sanctioned path, entropy wins.
Measure Core Web Vitals and conversion together, and avoid the three classic mistakes: raw huge uploads, no automation, and over-compression that degrades quality.

I am Deepanshu Grover, a Growth Product Manager in Paris. If images and media are quietly slowing your pages and eroding conversion, connect on LinkedIn or get in touch.