Reduce React-Native image asset size - javascript

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

Related

How to use multiple images in ReactJS application?

I have a ReactJS application. I have 100 images(icons) of country flags. I need to use them in my application. I have 2 ways to do so, want to know best way to do so such that -
1) I only have to make 1 hhtp call to get the images
2) It is the most optimum way to handle this scenario.
Method 1 - I can sprite all the 100 images. And then make 1 http call to get the image and make use of background positions to get correct image.
In this method I wanted to know if
a) If using CSS Sprites is the modern way of doing so? Any better way?
b) If using CSS sprites, any tool to create a Sprite image and get the correct position values?
Method 2 - In my project, currently all images are inside a /src/images folder. If I put the 100 images inside this folder, it will make 100 http calls. Correct me if I am wrong. Can I put them inside /public/images folder so that the images are bundled and not excess http call is to be made? (If I reference any image file in public folder I get the error - 'Relative imports outside of src/ are not supported.') Anyway, where do you usually place images, inside /src/images or /public/images? What are the advantages in either?
I would go with the second option. Depending on the tooling, you can use Webpack or other bundlers to compress (gzip or Brotli compression).
You can optimize images to make sure they are not overly large and properly formatted, then compress and serve from a reverse proxy server.
To further boost performance, you can defer off-screen assets so that the images that you need are loaded as they are needed which lowers the initial fetch size.
Lastly, you can use in-memory caching, S3 (or other cloud storage), and a Content Delivery Network (like Cloudforce, Akkimai, and others), to store images in the cloud in close proximity to the user. CDNs are optimized to deliver such static assets and might be something to consider incorporating.
With such a heavy usage of images, I would suggest that you LazyLoad the images with option 2.
Consider a case where you have 100 products on your web page. If you request all the 100 product images at the same time and at the very beginning, it would slow down the load time. With lazy loading, we would only load, let’s say, 30 images that are visible to the user initially. Then, when the user starts scrolling down the page, we will keep loading more images. This would help improve the initial load time and the user experience. There will be cases where the user doesn’t scroll down the entire page and hence some images would not get loaded at all. Thus, you also end up saving on bandwidth costs for image delivery.
Since you are using reactjs, there are many packages available for this. Here I'll suggest one of them but feel free to explore more: React-Lazyload
You can even deliver the images through some CDN to further fasten the loading. Also, resizing them to actual needed size is a good way. Moreover you can also use JPG encoded at 80-90 quality as it won't make much of a difference in image quality, but reduce the file size dramatically.

Clearing image cache by adding timestamp

We have a ASP.NET/HTML5 web application. To make sure that after every release, new js and css files are used, we add a parameter to the urls
http://myapp.com/public/app.js?rdyyyymmdd
http://myapp.com/public/app.css?rdyyyymmdd
But what about image cache which is causing issues. Images are added using <img> tag as well as they are being added though css (background-image) property.
Now, it is not feasible to add timestamps in css files to all the images. We have hundreds of css files each referencing some images.
So how does one fix this issue?
You could still use a datestamp or GUID. Just add a script to your deployment process which looks for image urls in your compiled css using regex and changes their query string.
Personally I've used Python to do something kind of similar, but I'm sure Grunt / Gulp would be a good candidate if you use them.

Node.js - Detecting Image Optimization

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

How to resize images on server-side

I’m writing webpage that will display hundreds of pictures. Problem is size of image(+-5MB). This images are background-image of div. I use JS for changing this background-image.(sometimes 1 per sec.) Is there any way how to shrink those images or how to speed up loading? (I can't modify this images by Photoshop or another similar SW. I must use the original.)
What do you mean you must use the original if you wish to shrink the images? In my opinion the file size is not suitable for a web application and you must decrease the file size of these. If you have access to a server side technology like PHP or ASP.NET you can modify the images before displaying them using libraries like ImageMagick (http://php.net/manual/en/book.imagick.php) or ASP.NET Sprite and Image Optimization Library (see http://www.hanselman.com/blog/NuGetPackageOfTheWeek1ASPNETSpriteAndImageOptimization.aspx) but these will use resources to process and thus your site will still have an performance overhead.
I advise you to modify your images using a tool and don't have the server or browser modify these. If you don't have access to a tool like Photoshop or GIMP you can use online tools to create reduced versions of your originals like Yahoo's smush.it - http://www.smushit.com/ysmush.it/
Not the best answer but I hope it helps.

What is the way to store image files and audio files in a Windows Modern(Metro) UI apps?

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.

Categories

Resources