This question already has an answer here:
Resize image from input to upload
(1 answer)
Closed 3 years ago.
I built a chat app using reactJs and firebase when I upload images which size in kb it successfully uploading but when I want to upload images even sizes can be in MB,s But I want to degrade the size of these images before uploading. What is the best way I can achieve this by using reactjs?
WEBP format of image is designed to reduce image file sizes over standard JPEG compression while maintaining the same or similar quality. So you can convert large image files to smaller size.
You can use webp-converter,a npm package for converting JPG, JPEG and other image formats to WEBP format.
Install package npm i webp-converter
Import module as import webp from 'webp-converter';.
Implement as in a function:-
webp.cwebp("input.jpg","output.webp","-q 80",function(status,error){
console.log(status,error);
});
Push output.webp to firebase database.
Detailed package implementation details:-
webp-converter
Related
Hi is there a way to use https://threejs.org/ for Image processing?
Convert raw image from camera and phone camera to compressed JPEG
Resize images and save as compressed JPEG
three.js is probably not the right library to use for that sort of image processing. I would start by looking for a JS library that reads RAW image files from cameras, like dcraw or raw-decoder, depending on what input formats you need to support. Then compress the data with a dedicated compression library like sharp or mozjpeg-js.
I am working on an application where I have lot of images and icons(all png), I found out that the image folder's total size is close to 15MB, which is too much, as I am new to react-native so not sure how this size is impacting the total app size and also I am not sure about the best way to reduce this folder size(i.e., images/icons), should I use svg or any other format for this or is there any other way(i.e., compressing the image/icon size etc.)?
I can see that we can't able to use svg directly, we need to use some library and I don't want to burden my app with any libraries as it's already quite heavy
Thanks and looking for the best solution
You have three options to minimize your image assets bundle size.
Using an image URL - instead of storing images on your app. You can upload images to a server and refer the link to App. some image provider servers.
Cloudinary
Firebase Storage
Using SVG - you said that you don't want to include any libraries check the bundle size of react-native-svg it's a pretty lightweight package.
Use any image compressor - compress your image and use it. you can use
TinyJPG
Compress all images at build time using react-native-imagemin-asset-plugin
I am working on a website using reactjs and i want to compress the PDF files which are more than 5MB size. I have tried on Windows 10/ Chrome/Firefox. Is there any way we can reduce the size of PDF using javascript or any React library?
I am building an application which allows users to upload images to a post.
My issue is that some of these images are 10MB plus. I am currently optimising these using a Node.js module which lowers the file size. It does this by re-creating the image with a quality score of 70.
The issue I have is that some users optimize images before uploading. If an image has already been optimized I don't want to lower the quality any further.
Is there anyway I can detect the quality of an image before it is processed?
If you use multer, you can see that in size field, if you have only buffer you can use .length method, example:
buffer.length() // return 255bytes or 255000 255Kb
with imagemagick you can first identify the size and then convert it into small size or crop it
I have around 30 image files and 30 audio files in my Windows 8 Modern(Metro) UI app.Currently my application size is around 30MB.I want to reduce the size of my app.
So is there a way to repesent image files and aduio files in the format of the text/strings using any WinJS API ,so that it reduces size of the application.
If your images or audio are uncompressed for some reason, you could certainly use a compressed format (jpeg or mp3 for example). But, one methodology you might follow to reduce the size of your appx would be to only include images and audio that you immediately need and download the rest from a web service when the app first runs or when the files are actually needed. There is a Compressor Class in WinRT, but it will not give you any real compression benefit over an already compressed image type like jpeg or audio type like mp3.
30MB is an acceptable size for a Windows 8 App. Why are you concerned about the size?
Storing your images as zipped resources won't help because .appx packages are already compressed so all you would do is CPU overhead at runtime because you need to uncompress unnecessarily.
I wouldn't worry about it too much. 30MB is okay but of course you should always strive to keep your size to a minimum. One sure way to reduce size is to be smart on how you store your images and audio files.
For audio files
Check that you don't have uncompressed files (.wav).
Check that your .mp3 files or similar use an appropriate bitrate. You probably only need 128kbps
For image files
Check that your image files use an appropriate compression method. Some files might be okay to store as JPEG, others are best stored as GIF while still others might be best to be stored as PNG.
Optimize your PNG files with tools like PNG Gauntlet. These tools bring down file sizes substantially without reducing quality of the PNG files.
Windows 8 Scaling support
Also, make sure that your images properly support windows 8 image scaling. More information can be found here.