Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy load videos wormeyman #400

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

wormeyman
Copy link
Contributor

Fixes #399

Kind of a hack but it totally works, file sizes only increased a tiny bit but since they are now lazy loaded the overall page speed is better. The page went from 2.8MB of resources to 1.6MB of resources loaded.

@deniszholob
Copy link
Owner

deniszholob commented Sep 12, 2024

Oh interesting, i guess the only downside is that you cant pause or scrub if you really needed to but thats probably a very tiny usecase if at all (maybe for the refinery/chem plant to see the i/o)
Too bad about the size, seems avif is supposed to be better for compression, but all i see is images, so maybe not as great for animations.

Looks like AVIF maybe the future though?
https://medium.com/@julienetienne/why-you-should-use-avif-over-jpeg-webp-png-and-gif-in-2024-5603ac9d8781
Just putting link for reference
https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/

If we can get more compressed images without perceptible loss of quality, then maybe converting all to avif would be good
Backwards compatibility can be candled with the picture tag
https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/#progressive-enhancement

<picture>
 <source srcset="img/photo.avif" type="image/avif">
 <source srcset="img/photo.webp" type="image/webp">
 <img src="img/photo.jpg" alt="Description">
</picture>

I'll check this out on my comp to make sure i can see the new files ok

@wormeyman
Copy link
Contributor Author

I could add webP animations as well via a picture tag. The WebP files were much larger. I also converted these via FFMPEG which took a surprisingly long time on my poor MacBook air M1. I COULD NOT get the video files to play on chrome/edge only firefox for some reason. Even though they were muted they refused to play.

It also looks like iOS safari doesn't support AVIF animations so I can include WebP fallback.

https://caniuse.com/avif

@deniszholob deniszholob force-pushed the master branch 2 times, most recently from 5e00431 to ff29feb Compare November 9, 2024 20:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Lazy load videos that are offscreen
2 participants