Image Transparency Explained for Web and Design

Image transparency is one of those features that we don’t think much about until we need it. We want image transparency for tasks like placing a logo on a colored background, or creating layered product images on our sites. Transparent pixels give us flexibility to make images work in just about any context without us needing to manually edit different versions for different backgrounds.

That is why understanding how transparency works is so important at the pixel level. In this guide, we’ll explore how browsers handle transparent pixels and which formats support transparency. We’ll learn how Cloudinary automates the complexity of managing transparent images at scale.

Key Takeaways

• Transparency uses alpha channels that define opacity levels, starting with 0, which is fully transparent, and ending with 255, which is fully opaque
• PNG and WebP formats preserve full transparency, but JPEG doesn’t support alpha channels at all
• Common use cases for transparency are logos, overlays, icons, and product photos with their backgrounds removed

In this article:

• What Image Transparency Really Means
• How Browsers Render Transparent Images
• Image Formats That Support Transparency
• Common Use Cases for Image Transparency
• Adding and Editing Transparency in Images
• Managing Transparent Images for the Web
• How Cloudinary Handles Image Transparency
• Delivering Transparent Images at Scale With Cloudinary

What Image Transparency Really Means

Image transparency allows parts of an image to be see-through; whatever sits behind it shows through those pixels.

The technical workings of transparency are controlled by something called an alpha channel. Each pixel in a transparent image has four values instead of three: we get the usual red, green, and blue color values, plus an extra alpha value that decides how opaque that pixel is.

Alpha values range from 0 (completely transparent) to 255 (completely opaque). When we set a pixel’s alpha to 0, it becomes invisible, and the background shows through completely. A value of 128 gives us 50% transparency, blending the pixel’s color with whatever sits behind it.

This pixel-level control gives us smooth edges and gradual transparency effects. Logos with anti-aliased edges use partially transparent pixels along the borders to provide us with smooth curves that blend naturally with any background color.

How Browsers Render Transparent Images

When a browser comes across a transparent image, it needs to figure out what to show for each pixel. For fully opaque pixels, the answer is nice and easy; just display the image’s color. For fully transparent pixels, it shows only the background.

The interesting part happens with partially transparent pixels. Browsers use something called “alpha compositing” to blend semi-transparent pixels with their backgrounds. If we have a red pixel set at 60% opacity over a white background, the browser uses some math and calculates: (red × 0.6) + (white × 0.4) to get the final color.

The amazing part is that this happens millions of times per second as we scroll and interact with web pages. The browser handles all the mathematical blending for us quickly behind the scenes, which is why transparent images are used so seamlessly with modern CSS layouts.

We can also layer transparent PNGs over gradient backgrounds, apply CSS filters without having to worry about ugly borders, and even animate opacity changes smoothly. The rendering approach makes transparent images feel natural in responsive web designs where our background colors might change based on user preferences or dark mode settings.

Image Formats That Support Transparency

The annoying part is that not all image formats can handle transparency, and the ones that do each have their own way of storing it. PNG has been the transparency king for years because PNG-24 supports full alpha channel transparency with 256 levels of opacity per pixel.

What this gives us are smooth edges and partial transparency that blends beautifully with any background. PNG files are also lossless, which means the transparency data stays crisp no matter how many times we save or edit the file.

WebP is a newer format that also supports full transparency. What makes it impressive is that WebP normally creates smaller file sizes than PNG while still maintaining the same transparency quality. When we convert PNG files to the WebP format, we usually see file size reductions of 25-35% without losing any transparency data.

Our old friend JPEG doesn’t support transparency at all. When we save a transparent image as JPEG, the format replaces all transparent pixels with a solid color; usually white or black. This is why we see solid boxes around logos that were converted from PNG to JPEG.

SVG handles transparency through its XML structure. Since SVG is vector-based, we can set opacity values on individual shapes and paths within the file itself. SVG transparency is perfect for icons and logos because the files stay tiny and scale to any size without losing quality.

Here’s how different formats preserve (or lose) transparency:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PNG vs JPEG Transparency</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(to bottom right, #e9d5ff, #dbeafe);
            min-height: 100vh;
            padding: 2rem;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        h1 {
            font-size: 2rem;
            color: #1f2937;
            text-align: center;
            margin-bottom: 2rem;
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        @media (min-width: 768px) {
            .grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .card {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
        }

        h2 {
            font-size: 1.25rem;
            color: #374151;
            margin-bottom: 1rem;
        }

        .description {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 1rem;
        }

        .image-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 16rem;
            border-radius: 0.5rem;
            background-image: 
                repeating-conic-gradient(
                    #dddddd 0% 25%, 
                    white 0% 50%
                );
            background-size: 20px 20px;
            background-position: 50% 50%;
        }

        .note {
            font-size: 0.75rem;
            color: #6b7280;
            font-style: italic;
            margin-top: 1rem;
        }

        .info-box {
            margin-top: 2rem;
            background: #eff6ff;
            border-left: 4px solid #3b82f6;
            padding: 1rem;
            border-radius: 0.25rem;
        }

        .info-box p {
            font-size: 0.875rem;
            color: #374151;
        }

        .info-box strong {
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>PNG vs JPEG Transparency</h1>


        <div class="grid">
            <!-- PNG preserves full transparency -->
            <div class="card">
                <h2>PNG Format</h2>
                <p class="description">Preserves full transparency</p>
                <div class="image-container">
                    <svg width="150" height="150" viewBox="0 0 150 150">
                        <circle cx="75" cy="75" r="60" fill="#667eea" opacity="0.85"/>
                        <circle cx="60" cy="65" r="12" fill="white"/>
                        <circle cx="90" cy="65" r="12" fill="white"/>
                    </svg>
                </div>
                <p class="note">
                    Notice the checkered background shows through the semi-transparent circle?
                </p>
            </div>

            <!-- JPEG loses transparency (adds white background) -->
            <div class="card">
                <h2>JPEG Format</h2>
                <p class="description">Loses transparency (adds white background)</p>
                <div class="image-container">
                    <svg width="150" height="150" viewBox="0 0 150 150">
                        <rect width="150" height="150" fill="white"/>
                        <circle cx="75" cy="75" r="60" fill="#667eea"/>
                        <circle cx="60" cy="65" r="12" fill="white"/>
                        <circle cx="90" cy="65" r="12" fill="white"/>
                    </svg>
                </div>
                <p class="note">
                    White background is added, transparency is lost
                </p>
            </div>
        </div>


    </div>
</body>
</html>

You can see the difference instantly when we put these formats on patterned or colored backgrounds. PNG blends perfectly and JPEG shows a solid rectangle around the subject.

Common Use Cases for Image Transparency

Logos are probably one of the most common places where we use image transparency. A logo with a transparent background works on websites, presentations, and anything else that needs unique branding visuals.

We can create a logo once with transparency and drop it anywhere without worrying about clashing backgrounds. This is a massive time saver compared to manually creating matching backgrounds for multiple versions of a logo.

Image overlays rely heavily on transparency to create watermarks, badges, and decorative elements. E-commerce sites often add “Sale” or “New” badges to product images using transparent PNGs. The badge sits on top of the product photo, and the transparency lets the product show through around the badge’s edges.

Here’s how we could structure an overlay with HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Image Demo</title>
    <style>
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: Arial, sans-serif;
        }
        .product-image {
            position: relative;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="product-image">
        <svg width="300" height="200" viewBox="0 0 300 200">
            <defs>
                <linearGradient id="productGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#ff6b6b"/>
                    <stop offset="100%" style="stop-color:#feca57"/>
                </linearGradient>
            </defs>
            <rect width="300" height="200" fill="url(#productGradient)" rx="8"/>
            <g opacity="0.8" transform="translate(200, 150)">
                <circle r="30" fill="white" opacity="0.3"/>
                <text y="8" text-anchor="middle" font-weight="bold" font-size="16" fill="white">SALE</text>
            </g>
        </svg>
    </div>
</body>
</html>

UI icons and interface elements need transparency to work properly across different themes. A dark mode toggle icon needs to look good on both light and dark backgrounds. Transparent SVGs or PNGs let us use the same icon asset even if the surrounding interface colors change.

Product photography sees a huge benefit with transparency. Instead of photographing products on white backgrounds and hoping the website’s background color matches, we can remove the background entirely. This creates a clean and professional look where products appear to float on the page.

Adding and Editing Transparency in Images

Creating transparency starts during the design process in image editing tools like Photoshop, Figma, or Illustrator. When we export graphics from these tools, we choose file formats that support transparency (like PNG, WebP, or SVG) and make sure the “preserve transparency” option is enabled.

If we forget this step, we’ll end up with white backgrounds instead of transparency, so the export settings matter just as much as the design itself.

For existing images that need transparency, we have a few options. With photo editing software we can manually remove backgrounds using selection tools, but this takes a long time for large batches. The magic wand and pen tools work well for simple edits for objects with clear edges, but more complicated images like hair or fuzzy textures need way more effort to edit properly.

Cloudinary’s background removal feature automates this process using AI. Instead of manually tracing around a subject, we just add transformation parameters directly to the image URL. This approach works very well when we need to process dozens or hundreds of product photos.

The background removal happens on-demand through the URL, so we don’t need to manually edit files or maintain multiple versions. Cloudinary’s AI detects the main subject and removes everything else, creating a transparent background automatically.

We can also add colored backgrounds back if we need to for certain images. Some e-commerce platforms prefer products on white backgrounds for consistency, but others want transparency so that they can use the images in multiple places. With URL-based transformations, we can serve both versions from a single source image.

Managing Transparent Images for the Web

File size can get tricky with transparent images because the alpha channel adds extra data for each pixel. A PNG with transparency is usually around 20% to 40% larger than the JPEG version without transparency.

Where this matters is for page load performance, especially for devices that have slower internet connections. We need to balance transparency support with acceptable file sizes that won’t overwhelm the average user’s bandwidth..

Format conversion can really help reduce file sizes. If we convert PNG to WebP, we can preserve transparency and sometimes cut file sizes by 25% to 35%. The main challenge that we face is browser support. Older browsers don’t understand WebP, so we need a fallback strategy if the user that is visiting our site can’t render that image type.

We want modern browsers to get WebP’s smaller sizes without excluding older browsers, so we need them to fall back to PNG if they can’t render WebP. To implement this manually we’ll need browser detection and multiple file versions along with server-side logic to handle different scenarios and serve the right format.

Another issue we need to be aware of is how transparent images interact with CSS. If we apply certain CSS filters or transforms to transparent images, the final image might not look how we want it to. Brightness filters affect the alpha channel along with the colors, which can occasionally give us unintended visual effects.

Responsive images add yet another layer of complexity into the mix. We want different sized versions of transparent images for different screen sizes, but we also need to maintain transparency across all those versions. Creating and managing multiple sizes manually takes way too long and isn’t perfect.

What we really want is automated image management. We need a system that can handle format conversions, image resizing, file size optimization, and serve the right version of each image to every device; all while still keeping transparency data perfect.

How Cloudinary Handles Image Transparency

Cloudinary preserves transparency automatically during most transformations. When we resize, crop, or adjust a transparent PNG, the alpha channel data stays intact without any special parameters.

This becomes especially powerful when we chain multiple transformations together. We can remove backgrounds, convert formats, optimize quality, and adjust opacity in a single URL.

Here’s how we build transformation URLs with multiple parameters:

function buildCloudinaryUrl(cloudName, transformations, imagePath) {
    const baseUrl = `https://res.cloudinary.com/${cloudName}/image/upload`;
    const transformString = transformations.join(',');
    return `${baseUrl}/${transformString}/${imagePath}`;
}

// Example: Multiple transformations while preserving transparency
const url = buildCloudinaryUrl('demo', [
    'w_300',              // Resize to 300px width
    'e_bgremoval',        // Remove background
    'f_webp',             // Convert to WebP
    'q_auto',             // Auto quality
    'o_85'                // Set 85% opacity
], 'product.jpg');

// Result: https://res.cloudinary.com/demo/image/upload/w_300,e_bgremoval,f_webp,q_auto,o_85/product.jpg

Each transformation in the chain keeps the alpha channel from the previous step:

• The w_300 parameter resizes and maintains transparency.
• The e_bgremoval parameter creates transparency where the background was.
• The f_webp parameter converts the image to WebP format and preserves the alpha channel.
• The o_85 parameter adjusts overall opacity of the image

Background removal with e_bgremoval uses AI to detect items, objects and people, making it very effective at detecting unwanted backgrounds. After it highlights the things that we want to keep, it creates transparency around our objects and the background magically disappears. This works on most images where the subject is distinguishable from the background and not blended in too much.

The AI handles complex edges like a champ. Hair and fuzzy textures are no challenge for AI, and it’s way better than using manual selection tools. We get clean images that look professional without spending hours tracing selections in Photoshop.

Intelligent format conversion with f_auto chooses WebP for supported browsers and PNG for older ones. This gives us WebP’s smaller file sizes automatically without worrying about browser compatibility.

// Auto format picks the best option for each browser
const autoFormatUrl = 'https://res.cloudinary.com/demo/image/upload/f_auto,q_auto/logo.png';

// Modern browsers get WebP, older browsers get PNG
// All maintain full transparency

Opacity adjustments with the o_ parameter control the overall transparency levels of our images. Setting o_50 makes the entire image 50% transparent, which is really useful for watermarks and overlay effects:

// Create a watermark overlay at 60% opacity
const watermarkUrl = 'https://res.cloudinary.com/demo/image/upload/w_200,o_60/watermark.png';

The great thing about this is that it works independently of the image’s built-in alpha channel, so we can make an already transparent logo even more transparent for subtle effects or adding branding.

Delivering Transparent Images at Scale With Cloudinary

Automated format selection takes the chore of manually creating WebP versions of transparent images and takes care of everything for us. The f_auto parameter is smart enough to detect the user’s browser and serve WebP to modern versions while falling back to PNG for older ones.

This happens automatically at the CDN level, so we don’t even need any client-side JavaScript or server logic. One URL works for all browsers, and each gets the correct format, every time.

Quality optimization with q_auto balances our file size against the visual quality for transparent images. Cloudinary analyzes each image and applies the best compression level to maintain visual quality while minimizing the file size.

This works differently for PNG and WebP because they use different compression algorithms, but what we end up with is consistently smaller files without any noticeable quality loss. The system adapts based on the image’s content, so photos get different compression than graphics or text.

Then there’s responsive image delivery that adapts transparent images to different screen sizes and pixel densities. The w_auto and dpr_auto parameters automatically serve the right size images based on the requesting device:

// Responsive transparent image that adapts to device
const responsiveUrl = 'https://res.cloudinary.com/demo/image/upload/w_auto,dpr_auto,f_auto,q_auto/transparent_logo.png';

This single URL gives us:

• Small images for phones (maybe 200px wide)
• Larger versions for tablets (400-600px wide)
• High-DPI versions for Retina displays (2x or 3x resolution)
• WebP for modern browsers
• PNG to older browsers

What’s even better is that all image versions keep their transparency, and they’re automatically optimized for their target device. That means that we just need to write one URL and Cloudinary handles all the variations for us.

Cloudinary’s built-in multi-CDN caches these transformed images globally, so future requests for the same transformation load instantly from the nearest edge location. The first request generates the transformation, and every request after that uses the cached version.

This means we get both automated optimization and fast delivery without managing our own infrastructure. The CDN handles the massive tasks of serving the right images to the right devices from the right locations.

Some projects have thousands of transparent images, which would take a lot of effort to sort and edit on our own. Cloudinary’s batch transformation features can process our entire libraries all at once. That means that we can automate and apply background removal, format conversion, and optimization to mountains of images with API calls instead of manual work.

Here’s an interactive example where we can adjust the transformation parameters and see the generated URL change in real-time:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloudinary Transformation Demo</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        h1 {
            color: #333;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
        }
        .control {
            margin-bottom: 1.5rem;
        }
        label {
            display: block;
            color: #555;
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        input[type="range"] {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #ddd;
            outline: none;
        }
        select {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            background: white;
            cursor: pointer;
        }
        .value-display {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-left: 0.5rem;
        }
        .preview {
            margin-top: 2rem;
            padding: 1.5rem;
            background: #f8f9fa;
            border-radius: 8px;
            text-align: center;
        }
        .preview h2 {
            font-size: 1rem;
            color: #555;
            margin-bottom: 1rem;
        }
        .url-display {
            background: #2d3748;
            color: #68d391;
            padding: 1rem;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 0.75rem;
            word-break: break-all;
            line-height: 1.5;
            margin-top: 1rem;
        }
        .image-preview {
            margin-top: 1rem;
            padding: 1rem;
            background: repeating-conic-gradient(#ddd 0% 25%, white 0% 50%);
            background-size: 20px 20px;
            border-radius: 6px;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sample-image {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            color: white;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1> Cloudinary Transformation Playground</h1>


        <div class="control">
            <label>
                Width (px)
                <span class="value-display" id="width-value">300</span>
            </label>
            <input type="range" id="image-width" min="100" max="600" value="300" step="50">
        </div>

        <div class="control">
            <label>
                Opacity (%)
                <span class="value-display" id="opacity-value">100</span>
            </label>
            <input type="range" id="image-opacity" min="10" max="100" value="100" step="10">
        </div>

        <div class="control">
            <label>Output Format</label>
            <select id="output-format">
                <option value="auto">Auto (f_auto)</option>
                <option value="webp">WebP (f_webp)</option>
                <option value="png">PNG (f_png)</option>
                <option value="jpg">JPEG (f_jpg)</option>
                <option value="avif">AVIF (f_avif)</option>
            </select>
        </div>

        <div class="preview">
            <h2>Generated URL:</h2>
            <div class="url-display" id="url-output"></div>


            <div class="image-preview">
                <div class="sample-image" id="sample-image">
                    Sample Image
                </div>
            </div>
        </div>
    </div>

    <script>
        function updatePlaygroundImage() {
            const transformations = [];


            // Width (responsive sizing)
            const width = document.getElementById('image-width').value || 150;
            transformations.push(`w_${width}`);


            // Opacity for watermarks or overlays
            const opacity = document.getElementById('image-opacity').value;
            transformations.push(`o_${opacity}`);


            // Format optimization
            const format = document.getElementById('output-format').value;
            transformations.push(`f_${format}`);


            // Build the final URL
            const transformString = transformations.join(',');
            const url = `https://res.cloudinary.com/demo/image/upload/${transformString}/your_image.png`;


            // Update display
            document.getElementById('url-output').textContent = url;


            // Update sample image size and opacity
            const sampleImage = document.getElementById('sample-image');
            sampleImage.style.width = width + 'px';
            sampleImage.style.height = Math.round(width * 0.67) + 'px';
            sampleImage.style.opacity = opacity / 100;


            return url;
        }

        // Update value displays
        document.getElementById('image-width').addEventListener('input', (e) => {
            document.getElementById('width-value').textContent = e.target.value;
            updatePlaygroundImage();
        });

        document.getElementById('image-opacity').addEventListener('input', (e) => {
            document.getElementById('opacity-value').textContent = e.target.value;
            updatePlaygroundImage();
        });

        document.getElementById('output-format').addEventListener('change', updatePlaygroundImage);

        // Initial update
        updatePlaygroundImage();
    </script>
</body>
</html>

This same pattern scales from a single image to thousands. All we need to do is define the transformations we want, and Cloudinary applies them across our entire image library.

Use Image Transparency With Confidence

Image transparency opens up design possibilities that would be difficult or impossible with opaque images. We can place logos on any background, create layered effects with overlays, build flexible UI components, and show off our products without backgrounds.

The alpha channel in formats like PNG and WebP gives us pixel-level control over what renders and what doesn’t. We’ve learned how browsers render transparency and which formats support it, so we can optimize transparent images and help us make better technical decisions.

Managing transparency properly means using the right tools. Cloudinary handles everything on the backend for us like preserving alpha channels through transformations, converting between formats, removing backgrounds, and delivering optimized images to different devices.

We can focus on design decisions instead of worrying about file formats, browser compatibility, or performance optimization. The URL-based transformation approach is a game changer, and it means that we can maintain a single source image and serve infinite variations.

If we’re ready to simplify transparent image workflows, we can sign up with Cloudinary and register for a free account. The free tier includes plenty of transformation credits and storage to get started with fundamental tasks like automated background removal, format conversion, and responsive delivery for transparent images.

Frequently Asked Questions

Can I Convert JPEG Images to PNG and Add Transparency?

Converting JPEG to PNG doesn’t magically create transparency. JPEG files have solid backgrounds that become opaque pixels in the PNG format. We need to actually remove the background using tools like Photoshop or Cloudinary’s background removal (e_bgremoval) to get us the transparency that we’re after. Changing the file extension or format won’t work because the alpha channel data has to be generated from scratch by identifying which pixels should be transparent and which should be opaque.

Why Do My Transparent PNGs Look Bigger Than JPEGs?

PNG files include alpha channel data for every pixel, which adds roughly 25% to the file size compared to RGB-only formats. JPEG has no transparency support, so it doesn’t need this extra data. Converting transparent PNGs to WebP usually reduces file size by 25-35% and still preserves full transparency, giving us a good balance between transparency support and file size. Using Cloudinary’s f_auto,q_auto parameters can give us the smallest possible file while keeping visual quality across all formats.

Do All Browsers Support Transparent WebP Images?

Modern browsers (Chrome, Firefox, Edge, Safari 14+) all support WebP with transparency. For older browsers, we need PNG fallbacks. Cloudinary’s f_auto parameter handles this automatically by detecting browser capabilities and serving WebP to supported browsers while falling back to PNG for others. This gives us WebP’s file size benefits without breaking compatibility. We don’t need to detect browsers or maintain multiple versions manually ourselves. The CDN serves the right format automatically based on the request headers from the browser.