blurhash
thumbhash
blurhash | thumbhash | |
---|---|---|
43 | 11 | |
16,051 | 3,663 | |
0.6% | 1.1% | |
4.3 | 2.1 | |
7 months ago | 9 months ago | |
C | Swift | |
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.
blurhash
-
Show HN: AvifHash v0 – Compact and efficient image placeholders
AvifHash leverages the power of AVIF to create image placeholders that are both compact and efficient.
This Proof of Concept shows promising results: at 28 characters, AvifHash outperforms BlurHash https://blurha.sh/ (using 4x3 components) in quality and detail retention. At a similar quality, BlurHash needs 54 (5x5) to 76 characters (6x6 components).
Given that AVIF decoding is done by the web engine, AvifHash is very small: the entire demo page (including parsing and re-hydration code) is only 2.3 kB gzipped.
-
Rendering Images The Good Way In Your React Application
BlurHash website: blurha.sh
-
BlurHash: An Alternative to Generic Image Placeholders
Blogspam, including just taking over the source images.
Original: https://blurha.sh/ and https://blog.wolt.com/hq/2019/07/01/how-we-came-to-create-a-... (2019)
-
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):
- How do you do these placeholder for loading images based on color?
-
How to make a hash of the images with blurhash python package and react
Package Link - https://blurha.sh
-
blurred layer on top of other content using react-native-skia
If you do go this way, you can use https://blurha.sh
-
Migrating my website from Gatsby to Astro
No blurhash for images like Next or Gatsby
- A very compact representation of a placeholder for an image.
- Blurhash: A compact representation of a placeholder for an image
thumbhash
-
Show HN: Next.js Thumbhash – Show a placeholder while image loads
https://nextjs-thumbhash.vercel.app/
A ready to use ThumbHash implementation for Next.JS based on Evan Wallace project https://github.com/evanw/thumbhash
Show a placeholder while images are loading to avoid layout shift.
-
Optimizing Image Loading with AVIF Placeholders for Enhanced Performance
This LQIP has been generated using ThumbHash. Compared to other implementations of LQIP (like BlurHash or Potato WebP), this one encodes more details in the same space.
-
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
What are some alternatives?
swup - Versatile and extensible page transition library for server-rendered websites 🎉
azure-storage-fuse-aur - AUR package for Azure Storage Blobfuse
flutter_gen - The Flutter code generator for your assets, fonts, colors, … — Get rid of all String-based APIs.
mindcastle.io - Massively scalable, cloud-backed distributed block device for Linux and VMs
engine - The Flutter engine
azurefs - Mount Microsoft Azure Blob Storage as local filesystem in Linux (inactive)
clipview - Titanium Module for Android ClipView
extfuse - Extension Framework for FUSE
titaniium.android.bottomsheet
mountpoint-s3 - A simple, high-throughput file client for mounting an Amazon S3 bucket as a local file system.
randimage - Create random images
pica - Resize image in browser with high quality and high speed