thumbhash
lazysizes
thumbhash | lazysizes | |
---|---|---|
9 | 19 | |
3,251 | 17,299 | |
- | - | |
2.5 | 0.0 | |
about 2 months ago | about 1 month ago | |
Swift | JavaScript | |
MIT License | 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.
thumbhash
-
Gcsfuse: A user-space file system for interacting with Google Cloud Storage
You may wish to investigate cloudflare's image API: https://developers.cloudflare.com/images/cloudflare-images/
If the reason you were unable to use a CDN cache was because your access patterns require a lot of varying end serializations (due to things like image manipulation, resizing, cropping, watermarking, etc.), then this API could be a huge money saver for you. It was for me.
OTOH if the cost was because compute isn't free and the corresponding cloudflare worker compute cost is too much, then yeah, that's a tough one... I don't have a packaged answer for you, but I would investigate something like ThumbHash: https://evanw.github.io/thumbhash/ - my intuition is that you can probably serve some highly optimized/interlaced/"hashed" placeholder. The advantage of thumbhash here could be that you can optimize the access pattern to be less spendy by simply storing all of your hashes in an optimized way, since they will be extremely small, like small enough to be included in an index for index-only scans ("covering indexes").
-
We have backed up the world’s largest comics shadow library
note: I haven't had time but I would live to investigate into keeping tiny thumbnails hashes in my db as mentioned in https://evanw.github.io/thumbhash/
-
How can you use this package (ThumbHash) that makes small representation of your image?
Check the script here: https://github.com/evanw/thumbhash/blob/main/examples/browser/index.html
-
Generate thumbhash at edge for tiny progressive images
While it's similar to BlurHash, the color performance is much better for the same filesize. Here's a a demonstration of this from the demo page (with ThumbHash in the middle and BlurHash on the right):
-
Google's decision to deprecate JPEG-XL emphasizes the need for browser choice and free formats
Webp took a long time to get some broader adoption but it fulfills the roll of jpeg: a decent enough quality looking picture but at a reduced file size. However, it is based on the VP8 video codec. So in other words, you can think of it as a still frame of a VP8 video. This has some disadvantages because it can only load the image line by line from top to bottom (as opposed to a kind of blurry but progressively improving picture like a slow loading jpeg). So this leads to tricks like storing a very small thumbnails version and loading the actual original image. But tricks are tricks, and they're a bit annoying to deal with. For a very advanced version of this "store a small version and load that first" check this out https://evanw.github.io/thumbhash/ (it creates a blur that has the the appearance of the photo that's loading but it can do it within bytes of data).
- thumbhash: A very compact representation of an image placeholder
- Thumbhash: A compact representation of an image placeholder
lazysizes
-
Optimizing Images for Developer Blogs
Use a JavaScript library to implement lazy loading. There are a number of JavaScript libraries available that can help you implement lazy loading, such as Lazysizes and Lozad.
-
Generate thumbhash at edge for tiny progressive images
Normally I would write some client-side JS to do this but as this project is solely server-rendered I opted to use a simple tried-and-true library for this: lazysizes.
-
Tell HN: I was tired of being a perfectionist so I built an app within 24 hours
I recently did some optimizations on my personal website to make the images load “lazily.” In other words it only loads stuff once it hits the viewport. I think that’s what you’re looking for. I tried two techniques:
1. There is an HTML attribute to do just this and it seems to work for iframes too: https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...
2. There is a simple library called “lazy sizes” (https://github.com/aFarkas/lazysizes)
I tried to avoid the lib and use the native HTML… but for whatever reason the lib worked more reliably/effectively in manual tests as well as in my benchmarking via PageSpeed / Lighthouse. YMMV!
-
What unpopular webdev opinions do you have?
lazysizes is better than loading="lazy"
-
Native lazyload images vs other libraries
Since browsers support native lazy-loading, do we need libraries like this https://github.com/aFarkas/lazysizes?
-
Few tips to improve WebPage Performance
Use Lazy loading for below-the-fold images. (You can use different 3rd party libraries like Unveil, lazysizes, etc.)
-
The Ultimate Eleventy Template for your blog with a FREE minimalist theme [Open Source]
⚡️ Lazy load images with lazysizes
-
Best CLS Practices for Images
You can also use this really great library for handling the loading of images in a holistic and well-supported way or you can look at manually implementing the LQIP technique.
-
HTML tips you might not have been aware of
And, lazyloading is only for images. If you use e.g. lazysizes you can do anything with it. I'm a digital publisher so I use it for ads and embedded tweets/IGs and so on.
- LazyLoad not loading all the times the images. Fix or change lazyload mode? Angular project
What are some alternatives?
blurhash - A very compact representation of a placeholder for an image.
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.
azurefs - Mount Microsoft Azure Blob Storage as local filesystem in Linux (inactive)
ng-bootstrap - Angular powered Bootstrap
mindcastle.io - Massively scalable, cloud-backed distributed block device for Linux and VMs
react-lazy-load - React component that renders children elements when they enter the viewport.
pica - Resize image in browser with high quality and high speed
Tailwind CSS - A utility-first CSS framework for rapid UI development.
mountpoint-s3 - A simple, high-throughput file client for mounting an Amazon S3 bucket as a local file system.
select2 - Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
azure-storage-fuse-aur - AUR package for Azure Storage Blobfuse
webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.