Comment by initramfs

11 hours ago

I've noticed that GIFS with several frames in them tend to be quite large files. I like that these use dithering, which can reduce the file size. Ideally it would be not larger than 2-3 lightweight photos juxtaposed together, and less than 300KB. I also wish there was a pause button on them because sometimes reading articles on the web with them persistent can get tedious. I suppose disabling images can mediate that, or copying the text to another document.

"In Web Browsers (Chrome, Edge, Firefox): Install browser extensions like GIF Scrubber on Chrome or GIF Blocker on Firefox, which add playback controls to any web page.

On iPhone/iPad: Go to Settings > Accessibility > Motion, and turn off Animated Images to pause all GIFs in Safari.

On Mac: Go to System Settings > Accessibility > Display, and toggle off Animated Images.

In PowerPoint: Press the 1 key on your keyboard during a presentation to pause the GIF."

9 comments

initramfs

Reply
RobotToaster  10 hours ago

There's been a move towards using MP4 files instead of GIFs because the filesize is smaller, despite MP4 being patent encumbered.

  • initramfs  10 hours ago

    I found APNG suffer the same issue, but there may be some workarounds:

    https://share.google/aimode/X1Q5rp3z2tEbtDSPf

    "Yes, but not natively just by using a standard <img> tag in web browsers. Because native APNGs play continuously like a traditional GIF, you need to use one of the following methods to pause them: [1, 2, 3, 4]

    1. The Canvas Method (Best for Web Controls) To add play/pause functionality, you cannot use an <img> tag. Instead, you need to render the APNG onto an HTML <canvas> element and control it using a JavaScript library like apng-js. This provides precise, video-like control over the frames. [1, 2, 3, 4]

    2. The Cover Method (Simplest Fallback) If you just want to freeze an APNG on its first frame, you can layer a static .png of the first frame directly over the APNG. When you uncover or hide the static image, the underlying APNG will be revealed and play as normal. [1]

    3. Use CSS Animation Alternatives [1] If you are designing the animation yourself, an alternative is to build it as a single static image (a filmstrip of all frames side-by-side) and animate it using CSS background-position. This allows you to pause the image natively using the CSS animation-play-state property. [1, 2, 3]"