Question 184074 in Html Question posted in
Some basic documentation can be found here.

Html – Is a gif or a moving image better for permormance?

I’m making a button on the background with a .webp image moving back and forth using CSS keyframes.

Would putting a gif in there be more effective performance-wise?

Here’s a video for visibility:
https://imgur.com/a/AFlJdat

Tags:

2

Answers


  1. 0

    No, the current approach is better because:

    • There’s significantly less data downloaded by the browser.
    • The browser doesn’t need to decompress and store all frames of the GIF.
    • This effect can probably be done exclusively in the compositor.

    Also, GIF is a rather bad format for today’s standards. It only supports 256 different colors for each frame and there are much better image compression schemes than the one used by GIF. An animated WebP/AVIF or an H.264/VP9/AV1 video would be a much better alternative, but in this simple case CSS animations are the most efficient method.

    Login or Signup to reply.
  2. 0

    Using a WebP image for your moving button would generally be a better choice. It provides smaller file sizes and better animation capabilities compared to GIF.

    Here are some references and resources related to using WebP and GIF images for web development:

    WebP References:

    Google Developers – WebP: https://developers.google.com/speed/webp

    Official documentation from Google about the WebP image format, including details about compression, supported features, and usage.
    Can I Use – WebP: https://caniuse.com/webp

    GIF References:

    MDN Web Docs – GIF: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#gif

    Detailed information about the GIF image format, its features, limitations, and usage considerations.
    GIPHY – GIF Guide: https://giphy.com/gifguide

    Performance Optimization:

    Smashing Magazine – "Image Optimization": https://www.smashingmagazine.com/2020/05/image-optimization-webp-avif/#using-the-webp-format

    Google Developers – "Optimize images": https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search