thumbhash
pica
thumbhash | pica | |
---|---|---|
9 | 11 | |
3,251 | 3,619 | |
- | 0.7% | |
2.5 | 0.0 | |
about 2 months ago | 11 months 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
pica
-
Generate thumbhash at edge for tiny progressive images
Then pica to resize it and a simple function I wrote to crop it:
-
Can I specify the camera resolution when prompting the user to upload a selfie using JS?
Take a look at pica (Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technologies: webworkers, webassembly, createImageBitmap, pure JS.)
-
Client side image processing? Package like 'Sharp' but for frontend webdev?
You can use the pica library for browser resizing - https://www.npmjs.com/package/pica - it's a really great tool. It can also reduce upload size for large images. And some library like this for merging images - https://www.npmjs.com/package/merge-images.
-
Cool & useful JavaScript libraries
Pica : resize image in browser with high quality and high speed.
- I made an online image resizer tool
-
How to include APIs in TamperMonkey?
I want to use this in my TamperMonkey script: https://github.com/nodeca/pica
-
Resizing and Compressing Photos Before Upload to Django
this sounds promising, though I've never used it before https://github.com/nodeca/pica
-
Test Ishan
Sample text here... Syntax highlighting js var foo = function (bar) { return bar++; }; console.log(foo(5)); ## Tables | Option | Description | | ------ | ----------- | | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | Right aligned columns | Option | Description | | ------:| -----------:| | data | path to data files to supply the data that will be passed into templates. | | engine | engine to be used for processing templates. Handlebars is the default. | | ext | extension to be used for dest files. | ## Links link text link with title Autoconverted link https://github.com/nodeca/pica (enable linkify to see) ## Images Like links, Images also have a footnote style syntax ![Alt text][id] With a reference later in the document defining the URL location: [id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" ## Plugins The killer feature of markdown-it is very effective support of syntax plugins. ### Emojies > Classic markup: π :crush: π’ :tear: π π > > Shortcuts (emoticons): :-) :-( 8-) ;) see how to change output with twemoji. ### Subscript / Superscript - 19^th^ - H~2~O ### ++Inserted text++ ### ==Marked text== ### Footnotes Footnote 1 link[^first]. Footnote 2 link[^second]. Inline footnote^[Text of inline footnote] definition. Duplicated footnote reference[^second]. [^first]: Footnote can have markup and multiple paragraphs. [^second]: Footnote text. ### Definition lists Term 1 : Definition 1 with lazy continuation. Term 2 with inline markup : Definition 2 { some code, part of Definition 2 } Third paragraph of definition 2. Compact style: Term 1 ~ Definition 1 Term 2 ~ Definition 2a ~ Definition 2b ### Abbreviations This is HTML abbreviation example. It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. [HTML]: Hyper Text Markup Language ### Custom containers ::: warning *here be dragons :::
-
Stop sending uncompressed images to servers for resizing (slow!)
this is a sort of similar one https://github.com/nodeca/pica (i found it hard to use with create-react-app tho had to skip over its use of webworkers, tho that would be cool to use, code to use pica here https://github.com/cmdcolin/aws\_serverless\_photo\_gallery/blob/master/frontend/src/App.tsx#L20-L25)
-
Building Your Own Blog with Nuxt Content and Tailwind
link with title
What are some alternatives?
blurhash - A very compact representation of a placeholder for an image.
sharp - High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
azurefs - Mount Microsoft Azure Blob Storage as local filesystem in Linux (inactive)
jimp - An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
mindcastle.io - Massively scalable, cloud-backed distributed block device for Linux and VMs
cropper
mountpoint-s3 - A simple, high-throughput file client for mounting an Amazon S3 bucket as a local file system.
lena.js - :woman: Library for image processing
azure-storage-fuse-aur - AUR package for Azure Storage Blobfuse
fastimage - A module that finds the size and type of an image by fetching and reading as little data as needed.
lazysizes - High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
probe-image-size - Get image size without full download. Supported image types: JPG, GIF, PNG, WebP, BMP, TIFF, SVG, PSD, ICO.