I'm optimizing images on a codebase. Currently the image pulled from the supabase bucket is returning a blob. For example, when I go to open the image in a new tab in the browser, this is the url: blob:http://localhost:5173/11b8b903-9584-43b6-8d95-a7f45e4c8d3f and the image is in the format the user uploaded it in - jpeg or png Is it possible to instead return the images as a webp file? If so, how do I do that? (We are using SvelteKit in this app). fyi I'm a junior dev. This is the function in our api

/**
 *
 * @param url <string> - the Supabase URL string of the image to fetch
 * @returns <string> - a URL object string that can be used in an <img src={getImageSm('someImage')}> tag
 *
 * TODO: string validation
 *       better return object error handling
 */
export const getPostImage = async (url: string) => {
    const { data, error: downloadError } = await imageBucket('images').download(url, {
        transform: {
            width: 384
        }
    });
    if (downloadError) {
        throw downloadError;
    }
    return URL.createObjectURL(data);
};

https://supabase.com/docs/guides/storage/image-transformations#automatic-image-optimisation-webp Seems like Supabase will return the webp format automatically if it detects the browser can support it. Can't help anymore than providing that link though as not really used it.

Yes but it's definitely not doing that in our case. I suppose I just need to figure out how to not use the blob and instead return the image path so I can use the picture element?

You have a transform there, so I assume that confirms you are on a Pro plan that actually supports the transforms. If so you may need to generate an issue in github if another user here does not have advice for you.

Do I need to be pushing the image (from the uploader) to the supabase bucket in both its original file format and webp, for the automatic transformation to work?

I don't see how uploading both would work as they would have to be different path names (even if just the extension) and stored as two different rows in storage.objects. You think they would have mentioned that....