Compress Images Using Browser Image Compression
The browser-image-compression library is a handy NPM package that runs in a web browser. You can use the module to compress jpeg and png images by either reducing the image resolution or storage size before uploading to the server.
The package supports multi-threaded, non-blocking compression through web workers.
First, download the package from NPM.
Next, import the module into your React component.
Compress an Image File
Add the following code block to your component to use browser image compression in an async/await context.
As you can see, the image compressor logic is very straightforward. Simply pass the image file to be compressed, along with an object specifying the options for image quality and image size. The compressed file can then be uploaded to a server, saved, or forwarded to another image manipulation function.
The options object allows you to specify multiple different extensions for the image compressor, including whether or not to use web workers, a callback function to run once compression is complete, a signal to indicate whether the process has been completed or has been aborted, and advanced configuration options.
The complete options API is as follows:
The only required parameters are maxSizeMB or maxWidthOrHeight.
Compress an Image File Using AbstractAPI
Libraries and packages are great, but they do add to your bundle size and ultimately make your app larger. If you're looking for a way to compress an image file without installing an additional package, consider using an API service.
Image compression APIs expose endpoints that allow you to upload an image, specify the way an uploaded image should be compressed, and then return either the compressed image or a link to a hosted image file.
Let's look at one such API: the AbstractAPI Image Processing and Optimization API.
To use the API, you'll need to sign up for a free account and get an API key. All of the Abstract API endpoints are secured by HTTPS and protected by API keys. They are all free to use and signing up for an account will not add you to any mailing or spam lists.
Acquire an API Key
Go to the API home page and click “Get Started.” If you’ve never used AbstractAPI before, you’ll need to input an email and password to create an account. If you have an account, you may need to log in.
You’ll be taken to the Images API test page, where you'll see links to documentation and pricing, as well as your unique API key.
Make an API Request
To compress an image file, we'll send an HTTP request to the API endpoint. AbstractAPI provides two methods for image upload: multipart form upload so you can send the complete image file, and regular POST request, where you specify the image to be compressed by providing a URL.
In both cases, AbstractAPI will process the image and return a url for the resized image path, hosted at an Amazon S3 bucket.
We’ll use this example image from AbstractAPI to send a regular POST request with an image URL:
Here, we've told the API to compress the image by setting the lossy option to true. The API uses lossy compression to massively shrink the image file size while slightly reducing resolution quality.
Receive the Compressed Image
The API returns a JSON object with information about the original image and a URL to the new image. The data looks something like this:
As you can see, the image width and height have not changed, but we have decreased the file size by about 130500 bytes.
In this post, we took a look at two different methods for compressing all your images in a React app. First, we checked out the Browser Image Compression package, which allows us to compress images right in the browser. We then took a look at AbstractAPI's Image Processing and Optimization API, which exposes an endpoint where we can send images for compression.
Does React Optimize Images?
React does not optimize images on its own. To optimize images in React, you can use Webpack - specifically the webpack-image-loader module. By adding this module and configuring it correctly in your webpack.config.js file, you can tell React to serve compressed images from the public folder.
The module can be configured to handle SVG, WEBP, GIF and JPEG files separately.
How Do I Set the Width and Height of an Image in React?
The easiest way to specify the width and height of an image in React is to use the width and height attributes on an HTML image tag, or use CSS to adjust the width and height of the image container. You can specify the height in pixels, a percentage of the parent container, ems, or rems.
Does React Lazy Load Images?
To lazy load images in React, install the react-lazy-load-image component. This package exports a higher-order component (HOC) that you can use instead of a normal React Image component to load and render your images.
Is it Better to Use SVG or PNG in React?
There is no definite answer as to whether SVGs or PNGs are "better" for websites and web apps. Both have their advantages and downsides. Both are great for logos and images that require transparency. PNGs can be a little slower to load than SVGs, however, they are compatible with more browser versions, and they are easier to embed and create than SVGs.
How Do I Reduce Image Load Time in React?
The best way to reduce image load time in React is to compress your image files and utilize lazy loading. You should always serve images optimized for whatever device your user is using. Use lower-quality images as placeholders until the full-quality image is available. You might also consider taking advantage of CDNs and other edge network devices.