There is a website that I use that uses XenForo. They don't allow GIF avatars but you can upload it and it saves it as original (maybe downsized to a point). XenForo servers images as o, l, m, s; respectively original, large, medium, small. It resizes it on the server and if it's a GIF, it makes it as JPEG for the s, m, l versions. They always use .jpg as file extension so detecting if an image is GIF or not is also an issue.

I want to make a Chrome extension to resize and save the images locally. The image URL's have timestamps, so I can detect if it's changed or not. The issue is resizing animated GIFs in JS. All I could find is Node.JS. Sharp is pretty good about this. I wrote this but couldn't find anything that allows me to do it on the extension itself.

The userbase of the website isn't that big. Also not everyone uses GIFs. It would take lots of space but shouldn't kill a computer.

This is the Sharp code. With the GIFs I've tried, WebP produces smaller output. I can use sharpInstance.metadata() to detect the image format.

import fetch from "node-fetch";
import sharp from "sharp";
function f(imageURL, size) {
    return fetch(imageURL)
        .then(response => response.arrayBuffer())
        .then(buffer => sharp(buffer, { animated: true }))
        .then(sharpInstance => sharpInstance
            .resize(size, size)
            .webp()
            .toBuffer()
            .then(data => `data:image/webp;base64,${ data.toString('base64') }`));
}

I’m looking for suggestions on how to resize animated GIFs directly in a browser environment, specifically within a Chrome extension. The solution needs to be efficient and handle the conversion to WebP if possible. Any advice or library recommendations would be greatly appreciated. Thanks in advance.

I tried using canvas but couldn't figure it out with GIFs. The rest used Node.js and as far as I know you can't use it in Chrome extensions.