4 ms·
Beware if you load this on a mobile device with metered data! This animation is implemented by loading a large number of ~200KB PNG files, each 800x800px, such
by jffry 5y ago
Beware if you load this on a mobile device with metered data!
This animation is implemented by loading a large number of ~200KB PNG files, each 800x800px, such as this one [1] and then drawing them into a <canvas> as you scroll.
Having scrolled through the entirety of the animations, Firefox reports that it transferred about 220MB of PNGs on top of the 3.4MB of JS and an inexplicable 202KB of CSS.
Maybe I do not understand some key requirement. Shouldn't it be possible to encode a high quality video file, embed it with <video>, and control it from JS, and still come out with a much smaller file size? Perhaps there's just a requirement I'm missing but that's an eye watering amount of data being served by Cloudfront to every visitor, and Cloudfront isn't exactly the cheapest.
[1] https://d11poao410tx6l.cloudfront.net/616f05008e9fa70027fff38e/5631508e-8450-45c3-b2d3-ead1b554bc36/000001.png https://d11poao410tx6l.cloudfront.net/616f05008e9fa70027fff3...
edit: I got nerd sniped and downloaded all the frames. Considering only the largest animation (da2783d9-383d-43ec-8778-9b52f984c35a):
- 230 PNG frames: 51MB
- WebM (VP9, alpha, lossless): 6.7MB (-86.7%)
- WebM (VP9, alpha, crf15): 2.3MB (-95.5%)
Instead if I use all the frames in one big video:
- 1087 PNG frames: 271MB
- WebM (VP9, alpha, lossless): 39.0MB (-85.6%)
- WebM (VP9, alpha, crf15): 12.0MB (-95.6%)
I used ffmpeg 4.4.1 with the following commands:
ffmpeg -i 'frames/%6d.png' -c:v libvpx-vp9 -lossless 1 lossless.webm
ffmpeg -i 'frames/%6d.png' -c:v libvpx-vp9 -b:v 0 -crf 15 crf15.webm
To my eye, crf15 is very very good quality, but I included lossless encoding so there can be no quibble about quality differences :)
And yes I know Safari can't do VP9 but there's no reason you couldn't also encode a HEVC and AV1 version and list multiple <source> elements and let the browser decide which format it prefers
edit to the edit: It seems that smoothly scrubbing through a <video> element is more tricky than I originally knew. Still, a lot of mileage could be gained by encoding the individual frames as AVIF or WebP and using them in supported browsers
- capableweb 5y ago> This animation is implemented by loading a large number of ~200KB PNG files Wow, you're not joking! I counted ~1000 requests for PNG files. Not only expensive for the user, that has to be expensive for the people who built this too. 1000 visitors scrolling through the site and promptly forgetting about it's content would mean 180GB, that's ~10 USD per month just for that page (according to https://calculator.s3.amazonaws.com/index.html https://calculator.s3.amazonaws.com/index.html).
- charcircuit 5y agoIf you use something like Cloudflare you can eliminate bandwidth costs. AWS way overcharges people on bandwith in general.
- sbierwagen 5y agoCloudflare absolutely does not eliminate bandwidth cost. There is a transfer cap, and if you go over it, you will be asked to upgrade to a paid plan or be dropped.
- charcircuit 5y ago>There is a transfer cap What is the transfer cap? Based off searching it seems that it is unlimited. You can also avoid paying for bandwidth by using other services.
- ccheney 5y agoVery possible to attach an event listener to the scroll event and use that to scrub a video
- unclebucknasty 5y agoFrom the console: All 181 images loaded. All 230 images loaded. All 154 images loaded. All 50 images loaded. All 230 images loaded. All 242 images loaded.
- Karawebnetwork 5y agoInterestingly, apps like TinyPNG are able to bring down the size of that file by −74% (255.3 KB -> 67.5 KB) in a way that is invisible to the eye. Someone should have compressed their files better.
- wdfx 5y agoI was wondering why the text I was reading didn't match up with the background image - it hasnt fully loaded and there's no indication ! grr
- deleted 5y ago[deleted]