sqip
loading-attribute-polyfill
Our great sponsors
sqip | loading-attribute-polyfill | |
---|---|---|
4 | 4 | |
3,363 | 614 | |
- | - | |
9.0 | 5.5 | |
18 days ago | 5 days ago | |
TypeScript | JavaScript | |
The Unlicense | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
sqip
- Stepped image compression API?
-
Show HN: I built a tool to generate triangulated art from images
I think OP's project would be great to add as a new entry to the SQIP demo site [2].
In the thumbnail demo, the LQIP-custom approach (simple resize to low-res jpg thumbail+optimize jpg) approach preserves the more salient features better and has compression on-par-or-better than SQIP with lower processing times. So in my opinion the simple extreme resize+jpgoptim is preferable for thumbnails.
Thumbnails are only small part of LQIP story though and I can imagine RH12503/Triangula working much better for larger images.
1. https://github.com/axe312ger/sqip
2. https://axe312ger.github.io/sqip/
-
🔥 Native lazy loading is here!
Alright, so SQIP generates an SVG from an image, see here and here.
loading-attribute-polyfill
- The best approach to lazy load images for maximum performance
-
Improving your web performance
If you want to know which browsers accept this new attribute you can check it out at CanIuse In case most of your users use a browser that doesn't have this attribute implemented yet you can always use a polyfill, I recommend this Polyfill
-
Native lazy-loading of images with zero Javascript
Browsers that do not support the loading attribute simply ignore it without any side-effects. Fortunately, there is a polyfill at Github available named loading-attribute-polyfill which can be used in those cases.
-
🔥 Native lazy loading is here!
I recommend using a polyfill in addition to this: https://github.com/mfranzke/loading-attribute-polyfill
What are some alternatives?
blurhash-to-css - Convert a BlurHash to a CSS Object using TypeScript, Rust, and WebAssembly.
Glide.js - A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
Primitive Pictures - Reproducing images with geometric primitives.
vanilla-lazyload - LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
triangula - Generate high-quality triangulated and polygonal art from images.
QCObjects - Full Stack Javascript Framework for Modern Software Development
tauri - Build smaller, faster, and more secure desktop applications with a web frontend.
details-element-polyfill - <details>
triangle - Convert images to computer generated art using delaunay triangulation.
zuix - zuix.js is a JavaScript library for creating component-based websites and applications.
shapeme - Evolve images using simulated annealing
ailog - An attendance log for Kizuna AIs' videos for when love-pii held the AI identity.