compressorjs
squoosh
Our great sponsors
compressorjs | squoosh | |
---|---|---|
8 | 266 | |
4,969 | 20,888 | |
- | 1.6% | |
2.1 | 6.2 | |
11 months ago | 10 days ago | |
JavaScript | TypeScript | |
MIT License | Apache License 2.0 |
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.
compressorjs
-
Client-side image compression with Supabase Storage
After researching a couple of different options, what I landed on was a package called compressorjs written by Chen Fengyuan. This library performs compression and resizing of images in the browser. I was a bit skeptical at first, but it's a cool project and has good browser support. How Compressorjs works is that it uses the HTML5 canvas element to read the original image data and perform lossy transformations to compress and resize the image. There's a whole bunch of transformation options. For my project, what I have found is simply changing the maximum width of the image to 600px and slightly reducing the quality has greatly reduced the file sizes.
-
One Click to Optimize Images, Create Repo and Making Commit
You can change image quality or pass different options. I set customized mimeType and width by passing option parameter here. You can find more usages from compressor.js original documentation.
-
How to compress images on client-side
I will use compressorjs, a tiny librarie (3.8 kB minzipped). Compressor.js uses the Browser's native HTMLCanvasElement.toBlob() API to do the compression work, which means it is lossy compression.
-
Compressing images on client side before upload
(I checked out : imagemin, compress.js, compressorjs and some small others)
-
Django CK editor with client side image shrinker
Django CK editor comes with default image shrinker based on Pillow, But Pillow sucks at image shrinking, A frontend library called compressorjs does 5 times the Image quality with 5 times smaller the size.
-
12 JavaScript Image Manipulation Libraries For Your Next Web App
MORE INFO
-
Made a Web App to reduce Image Size by up to 90%, No file Size Limit & Works Offline | compressimage.io
You don't actually need any web services. Just import the compressorjs library and the UPNG.js library on client side(frontend) and then before uploading the data to server compress the image. These libraries were actually written for frontend compression by their respective owners. https://github.com/photopea/UPNG.js (25kb) https://github.com/fengyuanchen/compressorjs (8kb)
squoosh
- Jpegli: A New JPEG Coding Library
-
Optimizing Images for Developer Blogs
Squoosh: A webpage that allows you to quickly optimize images for your blog.
-
Building an online image compressor
One of the most complete image compressor out there, squoosh.app by Google, uses web assembly for decoding/encoding images and it works pretty well.
-
Improve performance of Go serving a React frontend
First off you want to shrink your images. Every mb your page is the more it will hurt your score. I use https://squoosh.app/
-
Power Consumption of JPEG, WebP, and AVIF
https://squoosh.app/
Having a quick look at squoosh, it uses lossy compression of webp by default.
-
What makes a page rank well?
Size images appropriately (https://squoosh.app/ can be used for this). Ideally, the size of the image should be kept below 100 KB.
-
my live site keeps jumping back to the top of the page while I'm using it
if your images a large file size, remove them from the page, reduce file size, and place new reduced file size images in their place - publish the site to bring the new pics live - clear your cache - go the page and test it (good tool to reduce image file size is Google Squoosh - https://squoosh.app/ )
-
Can anyone recommend any decent plugins that let me adjust jpg quality on export for web,
I'm just exporting normally from Figma, but then using squoosh.app (browser based) to adjust quality/compression and even for making sure png files are optimized for prod.
-
Clan creating invalid photo [HELP]
Hey I see your friend made a clan, but this guy found a workaround here if you still need it. I just used https://squoosh.app/ to basically save a new copy of the image and that worked
- Squoosh – Simple image optimizer that does all the work locally
What are some alternatives?
cropperjs - JavaScript image cropper.
sharp - High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
oxipng - Multithreaded PNG optimizer written in Rust
pica - Resize image in browser with high quality and high speed
ImageOptim - GUI image optimizer for Mac
UPNG.js - Fast and advanced PNG (APNG) decoder and encoder (lossy / lossless)
go-unsplash - Go Client for the Unsplash API
jimp - An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
Mono - Mono open source ECMA CLI, C# and .NET implementation.
blurify - blurify.js is a tiny(~2kb) library to blurred pictures, support graceful downgrade from `css` mode to `canvas` mode.
devilbox - A modern Docker LAMP stack and MEAN stack for local development