To detect if an image is an SVG and conditionally apply the ?format=webp parameter, you can check the file extension. Here’s a simple approach using JavaScript:
function getImageUrlWithFormat(url) {
if (url.endsWith(‘.svg’)) {
return url;
}
return ${url}?format=webp;
}
// Usage
let imageUrl = ‘https://example.com/image.png’;
let formattedUrl = getImageUrlWithFormat(imageUrl);
console.log(formattedUrl); // Outputs: https://example.com/image.png?format=webp
imageUrl = ‘https://example.com/image.svg’;
formattedUrl = getImageUrlWithFormat(imageUrl);
console.log(formattedUrl); // Outputs: https://example.com/image.svg
This function appends ?format=webp to the URL if the file is not an SVG. For further customization within Builder.io, you can override built-in components to add this logic . (Builder.io Forum) (Builder.io Forum).
Thank you