4 ms·

Web color is somehow still a garbage fire. About a decade ago I was hearing that web-safe color was effectively obsolete. Today Firefox chokes on P3 color, and

Web color is somehow still a garbage fire. About a decade ago I was hearing that web-safe color was effectively obsolete. Today Firefox chokes on P3 color, and Chrome doesn't appear to care at all about display color profiles. I recently launched a website that had a fire-engine red background and was expected to have a rotating animation above the fold (https://worldparkinsonsday.com https://worldparkinsonsday.com). Even once we got the animation synced perfectly between Chrome and Safari, it turned out that iOS Safari was rendering the video differently. Eventually I gave up and replaced a 128kb mp4 video with a 5mb transparent animated GIF. Shameful. And I had this lil' fellah on my desk smiling at me the whole time https://100soft.shop/collections/dumpster-fire/products/dumpster-fire-vinyl-figure https://100soft.shop/collections/dumpster-fire/products/dump...

wbobeirne 5y ago
A transparent webm probably would have worked for your use case. Or if you were willing to rebuild the animation, it looks simple enough for SVG.
- ekkeke 5y ago
  Unfortunately, I don't think iOS safari has webm support yet.
  - postalrat 5y ago
    Will it break the page if this support is missing?
  - Wevah 5y ago
    HEVC video with transparency is apparently possible[1], though I’m not sure if it’s supported on non-Apple platforms. [1]: https://developer.apple.com/videos/play/wwdc2019/506/ https://developer.apple.com/videos/play/wwdc2019/506/
    - woojoo666 5y ago
      I really hope Apple doesn't use this as an excuse not to support WebM, which is a web standard
  - zanny 5y ago
    All the modern media formats are unsupported by Apple. We could be using avif for images and webm av1 streaming and video if not for Apple products. Its intentional sabotage by Apple at this point on behalf of MPEG-LA, it seems.
    - ksec 5y ago
      So 99.99% of times on HN people seems to think Apple is an AOM founding member and hence they will definitely support AVIF and AV1 ( not true ). On another day Apple is working on behalf of MPEG-LA when its VVC patent pool doesn't even include Apple.
- Eric_WVGG 5y ago
  Yeah but the fx guys certainly didn't have the js or css chops to make most of that work. I think the real correct solution would have been a Lottie animation, but there was no time to train the fx guys.
Hello71 5y ago
setting aside whether a gif is really necessary, it was surprising to me that your gif is so large, considering it's mostly flat colors, albeit at a fairly high frame rate. running it through gifsicle -O3 takes off 1 MB, and -O3 --lossy takes off another MB. -O3 --colors 4 drops it by another 2 MB, for a total of 69% file size reduction, at the cost of some minor fringing only visible when displayed full-screen.
hombre_fatal 5y ago
I love loud background colors like that.
spartanatreyu 5y ago
I have a technique I use to get around videos that are supposed to be seamless with their backgrounds. First I figure out which edges of the video will have website background next to them. Some video edges won't need any if the video itself is touching the side of the webpage. Inside the video, do either or both of these two things: a) Make the background of the video the same as the background of the website (impossible for live action, useful for product spin-arounds / pull-apart animations) b) Place a gradient layer over the video to make the edges of the video that meet the website content blend into the website's background color. The gradient should go from transparent to the website's color. Render out the video. Now comes the part where people usually get frustrated. The video either doesn't blend in with the website's background, or only blends in on certain browsers. (This is due to a combination of the video losing color information when it is rendered and due to the whole web color spacing issues the Original Post goes into. Now to fix it: Place a css/svg gradient over the <video> element itself that also goes from transparent to the website's color. Why put the original gradient over the video? Two reasons: 1. Depending on the css/svg gradient shape and stopping points, some browsers will render a hard edge through the gradient, allowing the border of the video to still be seen. Human eyes are great at seeing very minute changes in brightness/color when they're next to each other, especially when they're arranged in a straight line. Baking a gradient into the video itself actually helps out the css/svg gradient to hide the video's edge 2. Rendering a colored transparent gradient inside a video actually lowers the amount of colors in the final video, leading to a smaller file size and faster loading time. If the user's aren't actually going to see the original colours, there's no point rendering out the original video and all its much larger amount of color information if the user's aren't going to see it. Example time: Here's the last website I achieved this effect on: https://myoresearch.com/en-au https://myoresearch.com/en-au (Yes I'm aware there are some other issues with the website, but this is more to demonstrate the video effect itself)

wbobeirne 5y ago

A transparent webm probably would have worked for your use case. Or if you were willing to rebuild the animation, it looks simple enough for SVG.

ekkeke 5y ago
Unfortunately, I don't think iOS safari has webm support yet.
- postalrat 5y ago
  Will it break the page if this support is missing?
- Wevah 5y ago
  HEVC video with transparency is apparently possible[1], though I’m not sure if it’s supported on non-Apple platforms. [1]: https://developer.apple.com/videos/play/wwdc2019/506/ https://developer.apple.com/videos/play/wwdc2019/506/
  - woojoo666 5y ago
    I really hope Apple doesn't use this as an excuse not to support WebM, which is a web standard
- zanny 5y ago
  All the modern media formats are unsupported by Apple. We could be using avif for images and webm av1 streaming and video if not for Apple products. Its intentional sabotage by Apple at this point on behalf of MPEG-LA, it seems.
  - ksec 5y ago
    So 99.99% of times on HN people seems to think Apple is an AOM founding member and hence they will definitely support AVIF and AV1 ( not true ). On another day Apple is working on behalf of MPEG-LA when its VVC patent pool doesn't even include Apple.
Eric_WVGG 5y ago
Yeah but the fx guys certainly didn't have the js or css chops to make most of that work. I think the real correct solution would have been a Lottie animation, but there was no time to train the fx guys.

Hello71 5y ago

setting aside whether a gif is really necessary, it was surprising to me that your gif is so large, considering it's mostly flat colors, albeit at a fairly high frame rate. running it through gifsicle -O3 takes off 1 MB, and -O3 --lossy takes off another MB. -O3 --colors 4 drops it by another 2 MB, for a total of 69% file size reduction, at the cost of some minor fringing only visible when displayed full-screen.

hombre_fatal 5y ago

I love loud background colors like that.

spartanatreyu 5y ago

I have a technique I use to get around videos that are supposed to be seamless with their backgrounds. First I figure out which edges of the video will have website background next to them. Some video edges won't need any if the video itself is touching the side of the webpage. Inside the video, do either or both of these two things: a) Make the background of the video the same as the background of the website (impossible for live action, useful for product spin-arounds / pull-apart animations) b) Place a gradient layer over the video to make the edges of the video that meet the website content blend into the website's background color. The gradient should go from transparent to the website's color. Render out the video. Now comes the part where people usually get frustrated. The video either doesn't blend in with the website's background, or only blends in on certain browsers. (This is due to a combination of the video losing color information when it is rendered and due to the whole web color spacing issues the Original Post goes into. Now to fix it: Place a css/svg gradient over the <video> element itself that also goes from transparent to the website's color. Why put the original gradient over the video? Two reasons: 1. Depending on the css/svg gradient shape and stopping points, some browsers will render a hard edge through the gradient, allowing the border of the video to still be seen. Human eyes are great at seeing very minute changes in brightness/color when they're next to each other, especially when they're arranged in a straight line. Baking a gradient into the video itself actually helps out the css/svg gradient to hide the video's edge 2. Rendering a colored transparent gradient inside a video actually lowers the amount of colors in the final video, leading to a smaller file size and faster loading time. If the user's aren't actually going to see the original colours, there's no point rendering out the original video and all its much larger amount of color information if the user's aren't going to see it. Example time: Here's the last website I achieved this effect on: https://myoresearch.com/en-au https://myoresearch.com/en-au (Yes I'm aware there are some other issues with the website, but this is more to demonstrate the video effect itself)