Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Here you go - problem solved - maybe? This link shows animated transparent webp:

https://static.crowdwave.link/transparentanimatedwebp.html

Seems to work on Chrome, Firefox and Safari.

The video file is here: https://static.crowdwave.link/transparentanimatedwebp.webp

I put the result of the code below here:

This python program will generate webp frames and if you have ffmpeg will convert them to transparent animated webp:

    from PIL import Image, ImageDraw
    import random
    import subprocess
    
    # Image parameters
    width, height = 640, 480
    frames = 1000
    shapes = 10
    
    def random_color():
        # Generate a random RGBA color with varying levels of transparency (alpha)
        return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255), random.randint(50, 200))
    
    def random_position():
        return random.randint(0, width - 80), random.randint(0, height - 80)
    
    def random_size():
        return random.randint(20, 80)
    
    def create_gradient(width, height):
        base = Image.new('RGBA', (width, height))
        top = Image.new('RGBA', (width, height))
        for y in range(height):
            alpha = int((y / height) * 255)  # Alpha varies from 0 to 255
            for x in range(width):
                top.putpixel((x, y), (255, 255, 255, alpha))  # White gradient
        return Image.alpha_composite(base, top)
    
    # Create a series of images
    for i in range(frames):
        # Create an image with a transparent gradient background
        img = create_gradient(width, height)
        draw = ImageDraw.Draw(img)
    
        for _ in range(shapes):
            shape_type = random.choice(['rectangle', 'ellipse'])
            x1, y1 = random_position()
            x2, y2 = x1 + random_size(), y1 + random_size()
            color = random_color()
    
            if shape_type == 'rectangle':
                draw.rectangle([x1, y1, x2, y2], fill=color)
            elif shape_type == 'ellipse':
                draw.ellipse([x1, y1, x2, y2], fill=color)
    
        # Save each frame as a PNG file
        img.save(f'frame_{i:04d}.png')
    
    print("Frames created successfully.")
    
    # Create an animated WebP from the generated frames
    subprocess.run([
        'ffmpeg', '-y', '-i', 'frame_%04d.png', '-vf', 'fps=30,scale=320:-1:flags=lanczos',
        '-loop', '0', '-pix_fmt', 'yuva420p', 'output.webp'
    ])
    
    print("Animated WebP created successfully.")
Then put the output.webp and this index.html on your local disk somewhere and load the index.html in a browser.

Pull the slider to change the background so you can see it is transparent.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Animated WebP Display with Background Image</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
                background-image: url('transparentanimatedwebp.jpg');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
            img {
                max-width: 100%;
                height: auto;
            }
        </style>
    </head>
    <body>
    
        <img src="transparentanimatedwebp.webp" alt="Animated WebP">
    
    </body>
    </html>


Animated WebP is based on VP8. However, the alpha channel is stored losslessly, which makes compression even worse than VP8.

VP8 is of course a generation behind VP9, so the results will be significantly worse than the VP9 example in the article, which is significantly worse than AV1.

Also, the demo crashes Safari for me (it plays progressively slower and slower).


Animated WebP is an absolute dumpster fire on mobile safari (and thus all iOS derived browsers based on WebKit), with the animation often stuttering and dropping frames before it corrects itself.

I had to revert back to autoplaying no-audio MP4 files for this reason.


TFA did mention using animated AVIF, but not WebP for some reason. The issues still stand though, no playback controls, no programmatic playback, no audio. For my use case, I was not able to get an animated WebP to just play once and stop.

Edit: also no desktop Safari support for transparent animated WebP.


Can be done but requires a server.

>> Edit: also no desktop Safari support for transparent animated WebP.

Do you mean the link above that I posted? Works fine in my desktop Safari.

https://static.crowdwave.link/transparentanimatedwebp.html




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: