{"id":28304,"date":"2022-06-15T08:34:48","date_gmt":"2022-06-15T08:34:48","guid":{"rendered":"http:\/\/image-compression-using-reactjs"},"modified":"2025-02-09T05:30:34","modified_gmt":"2025-02-09T13:30:34","slug":"image-compression-using-reactjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/","title":{"rendered":"Image Compression Using React.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Images draw attention, trigger emotions, and improve the user experience of your website. Image compression involves the reduction of the size of your image so that it takes less space on the hard drive and for better search engine optimization when it comes to websites e.g., 2MB to 440kbs. The image still retains its physical properties. We are going to use React to compress our images.<\/p>\n<p>In this demo, we are going to explore how we can achieve this.<\/p>\n<h2>Codesandbox<\/h2>\n<p>The final version of this project can be viewed on   <a href=\"https:\/\/codesandbox.io\/s\/image-compressor-izb0tb\">Codesandbox<\/a>.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/image-compressor-izb0tb?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"image-compressor\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><h2>Github<\/h2>\n<p>Check out the complete source code in this <a href=\"https:\/\/github.com\/musebe\/-Image-Compressor-\">GitHub Repository<\/a>.<\/p>\n<h2>Pre-requisites<\/h2>\n<p>To effectively follow along through this article you are required to have:<\/p>\n<ul>\n<li>\n<p>React.js basic skills<\/p>\n<\/li>\n<li>\n<p>Basic knowledge of HTML<\/p>\n<\/li>\n<li>\n<p>Knowledge of Javascript<\/p>\n<\/li>\n<li>\n<p>Some knowledge of Bootstrap<\/p>\n<\/li>\n<\/ul>\n<h2>Introduction<\/h2>\n<p>In this demo, we are going to use the <code>browser-image-compression<\/code> package to compress our images from a high-resolution image to a low-resolution image. You can read more about this package by clicking <a href=\"https:\/\/www.npmjs.com\/package\/browser-image-compression\">this link<\/a>.<\/p>\n<blockquote>\n<p><code>browser-image-compression<\/code> is a module used to compress jpeg and png images by reducing resolution or storage size before uploading to the server to save bandwidth.<\/p>\n<\/blockquote>\n<p>you can install it via npm or yarn<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">\nnpm install browser-image-compression\n\n<span class=\"hljs-comment\"># or<\/span>\n\nyarn add browser-image-compression\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then import it into your components<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-keyword\">import<\/span>  imageCompression  <span class=\"hljs-keyword\">from<\/span>  <span class=\"hljs-string\">\"browser-image-compression\"<\/span>;\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Sample Project Setup<\/h2>\n<p>In this article, I will need you to clone the project from GitHub<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">\ngit <span class=\"hljs-keyword\">clone<\/span> https:<span class=\"hljs-comment\">\/\/github.com\/musebe\/-Image-Compressor-<\/span>\n\ncd .\\Image-Compressor\\\n\nyarn start\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>After this is in your browser, you should be able to see this page<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/bowenivan\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1655120622\/img_qwy1rg.png\" alt=\"img.png\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1186\" height=\"562\"\/><\/p>\n<h2>Usage<\/h2>\n<p>Let\u2019s now examine the <code>ImageCompressor.js<\/code> component to understand how the browser-image-compression package works.<\/p>\n<h3>Configuring the Component\u2019s State<\/h3>\n<p>Since this is a class component we are able to store the state for our component.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-keyword\">constructor<\/span>() {\n\n<span class=\"hljs-keyword\">super<\/span>();\n\n<span class=\"hljs-keyword\">this<\/span>.state  = {\n\ncompressed link:\n\n<span class=\"hljs-string\">\"https:\/\/testersdock.com\/wp-content\/uploads\/2017\/09\/file-upload-1280x640.png\"<\/span>,\n\n<span class=\"hljs-attr\">originalImage<\/span>:  <span class=\"hljs-string\">\"\"<\/span>,\n\n<span class=\"hljs-attr\">originalLink<\/span>:  <span class=\"hljs-string\">\"\"<\/span>,\n\n<span class=\"hljs-attr\">clicked<\/span>:  <span class=\"hljs-literal\">false<\/span>,\n\n<span class=\"hljs-attr\">uploadImage<\/span>:  <span class=\"hljs-literal\">false<\/span>\n\n};\n\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The <code>compressed link<\/code> will store the image link of the compressed image and the <code>original image<\/code> and the <code>original link<\/code> will store the values of the original image and original link respectively. The <code>clicked<\/code> and <code>upload image<\/code> store a boolean value that is false by default and changes to true when a button is clicked and when an image is uploaded.<\/p>\n<h3>Handling the Uploaded Image<\/h3>\n<p>When the Image is uploaded we want to change the state of our Component. To do this we are going to call the <code>setState<\/code> method since we just don\u2019t change the state of the component directly.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n\n<span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"file\"<\/span>\n\n<span class=\"hljs-attr\">accept<\/span>=<span class=\"hljs-string\">\"image\/*\"<\/span>\n\n<span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-2 btn btn-outline-warning w-75\"<\/span>\n\n<span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{e<\/span> =&gt;<\/span>  this.handle(e)}\n\n\/&gt;\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Once we have uploaded an image the <code>handle<\/code> method will be called<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\nhandle  =  <span class=\"hljs-function\"><span class=\"hljs-params\">e<\/span>  =&gt;<\/span> {\n\n<span class=\"hljs-keyword\">const<\/span>  imageFile  =  e.target.files&#91;<span class=\"hljs-number\">0<\/span>];\n\n<span class=\"hljs-keyword\">this<\/span>.setState({\n\n<span class=\"hljs-attr\">originalLink<\/span>:  URL.createObjectURL(imageFile),\n\n<span class=\"hljs-attr\">originalImage<\/span>:  imageFile,\n\n<span class=\"hljs-attr\">outputFileName<\/span>:  imageFile.name,\n\n<span class=\"hljs-attr\">uploadImage<\/span>:  <span class=\"hljs-literal\">true<\/span>\n\n});\n\n};\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><code>event.target.files<\/code> allows you to access a list of uploaded files. We can then get the first file since we process an image at a time using <code>e.target.files[0]<\/code>. To change the state we use <code>setState<\/code> to set the originalLink, originalImage, output filename, and upload image state as shown above.<\/p>\n<blockquote>\n<p>URL.createObjectURL() is a static method that creates a string containing a URL representing the object given in the parameter.<\/p>\n<\/blockquote>\n<h3>User interface<\/h3>\n<p>We will use the shorthand for the if-else statement, <code>ternary operator<\/code> to change the user interface of our application when the user has not uploaded an image and he\/she has uploaded an image.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n{<span class=\"hljs-keyword\">this<\/span>.state.uploadImage  ?  (\n\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Img<\/span>\n\n<span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"ht\"<\/span>\n\n<span class=\"hljs-attr\">variant<\/span>=<span class=\"hljs-string\">\"top\"<\/span>\n\n<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{this.state.originalLink}<\/span>\n\n&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card.Img<\/span>&gt;<\/span><\/span>\n\n)  :  (\n\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Img<\/span>\n\n<span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"ht\"<\/span>\n\n<span class=\"hljs-attr\">variant<\/span>=<span class=\"hljs-string\">\"top\"<\/span>\n\n<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/testersdock.com\/wp-content\/uploads\/2017\/09\/file-upload-1280x640.png\"<\/span>\n\n&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card.Img<\/span>&gt;<\/span><\/span>\n\n)}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>If the state upload image is <code>true<\/code> it would replace the image the link of the Card Image with the <code>originalLink<\/code> which the state changed upon uploading. Otherwise, the Card Image link will be hard coded as shown above.<\/p>\n<p>It is only after an image has been uploaded that we will see the compress button.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n{<span class=\"hljs-keyword\">this<\/span>.state.outputFileName  ?  (\n\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Button<\/span>\n\n<span class=\"hljs-attr\">variant<\/span>=<span class=\"hljs-string\">\"primary\"<\/span>\n\n<span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{e<\/span> =&gt;<\/span>  this.click(e)}\n\n&gt;\n\nCompress\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Button<\/span>&gt;<\/span><\/span>\n\n)  :  (\n\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;&gt;<\/span><span class=\"hljs-tag\">&lt;\/&gt;<\/span><\/span>\n\n)}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>When the image is not uploaded we don\u2019t have the state <code>outputFileName<\/code> hence we don\u2019t see the <code>compress<\/code> button. This state is set only after uploading hence returning the compress button.<\/p>\n<h3>Compressing the Uploaded Image<\/h3>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-keyword\">const<\/span>  options  = {\n\n<span class=\"hljs-attr\">maxSizeMB<\/span>:  <span class=\"hljs-number\">2<\/span>,\n\n<span class=\"hljs-attr\">maxWidthOrHeight<\/span>:  <span class=\"hljs-number\">800<\/span>,\n\n<span class=\"hljs-attr\">useWebWorker<\/span>:  <span class=\"hljs-literal\">true<\/span>\n\n};\n\n  \n\n<span class=\"hljs-keyword\">if<\/span>  (options.maxSizeMB  &gt;=  <span class=\"hljs-keyword\">this<\/span>.state.originalImage.size  \/  <span class=\"hljs-number\">1024<\/span>) {\n\nalert(<span class=\"hljs-string\">\"Bring a bigger image\"<\/span>);\n\n<span class=\"hljs-keyword\">return<\/span>  <span class=\"hljs-number\">0<\/span>;\n\n}\n\n  \n\n<span class=\"hljs-keyword\">let<\/span>  output;\n\nimageCompression(<span class=\"hljs-keyword\">this<\/span>.state.originalImage, options).then(<span class=\"hljs-function\"><span class=\"hljs-params\">x<\/span>  =&gt;<\/span> {\n\noutput  =  x;\n\n  \n\n<span class=\"hljs-keyword\">const<\/span>  downloadLink  =  URL.createObjectURL(output);\n\n<span class=\"hljs-keyword\">this<\/span>.setState({\n\n<span class=\"hljs-attr\">compressedLink<\/span>:  downloadLink\n\n});\n\n});\n\n  \n\n<span class=\"hljs-keyword\">this<\/span>.setState({ <span class=\"hljs-attr\">clicked<\/span>:  <span class=\"hljs-literal\">true<\/span> });\n\n<span class=\"hljs-keyword\">return<\/span>  <span class=\"hljs-number\">1<\/span>;\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To prevent the user to upload an image less than 2mb we will check whether the maxSizeMB is greater than or equal to the originalImage size.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n<span class=\"hljs-keyword\">if<\/span>  (options.maxSizeMB  &gt;=  <span class=\"hljs-keyword\">this<\/span>.state.originalImage.size  \/  <span class=\"hljs-number\">1024<\/span>) {\n\nalert(<span class=\"hljs-string\">\"Bring a bigger image\"<\/span>);\n\n<span class=\"hljs-keyword\">return<\/span>  <span class=\"hljs-number\">0<\/span>;\n\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><code>imageCompression()<\/code> is a method that takes two parameters: the originalImage and the options.<\/p>\n<p>We will have a <strong>promise<\/strong> in which when its state is fulfilled, that is the <code>imageCompression()<\/code> returns an object <code>x<\/code>, compressed image for our case. We will then create an Image URL for the compressed Image using the <code>URL.createObjectURL()<\/code>. We will also change the compressed link-state Compressed Image URL as shown below using <code>setState<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\nimageCompression(<span class=\"hljs-keyword\">this<\/span>.state.originalImage, options).then(<span class=\"hljs-function\"><span class=\"hljs-params\">x<\/span>  =&gt;<\/span> {\n\noutput  =  x;\n\n  \n\n<span class=\"hljs-keyword\">const<\/span>  downloadLink  =  URL.createObjectURL(output);\n\n<span class=\"hljs-keyword\">this<\/span>.setState({\n\n<span class=\"hljs-attr\">compressedLink<\/span>:  downloadLink\n\n});\n\n});\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Downloading the Compressed Image<\/h3>\n<p>Lastly, we\u2019ll need to download the compressed image and compare it with the original image whether they are of different sizes.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Card.Img<\/span>  <span class=\"hljs-attr\">variant<\/span>=<span class=\"hljs-string\">\"top\"<\/span>  <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{this.state.compressedLink}<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Card.Img<\/span>&gt;<\/span>\n\n{this.state.clicked  ?  (\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"d-flex justify-content-center\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span>\n\n<span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">{this.state.compressedLink}<\/span>\n\n<span class=\"hljs-attr\">download<\/span>=<span class=\"hljs-string\">{this.state.outputFileName}<\/span>\n\n<span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"mt-2 btn btn-info w-75\"<\/span>\n\n&gt;<\/span>\n\nDownload\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n)  :  (\n\n<span class=\"hljs-tag\">&lt;&gt;<\/span><span class=\"hljs-tag\">&lt;\/&gt;<\/span>\n\n)}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Once the download button is clicked we\u2019ll get the link of the compressed Image from our component\u2019s state and then use it in the <code>&lt;a&gt;<\/code> href attribute. You will also need to add the <code>download<\/code> attribute to the anchor tag which will take the outputFileName.<\/p>\n<h2>Using React Image Compressor<\/h2>\n<p>\nAdditionally, there&#8217;s another React component that can be utilized for image compression named &#8220;React Image Compressor&#8221;. This component allows you to compress images before uploading them to your server, which can further enhance the performance of your website.\n<\/p>\n<p>\nTo integrate &#8220;React Image Compressor&#8221; into your project, you&#8217;ll first need to install it using:\n<\/p>\n<pre class=\"prettyprint\">npm install react-image-compressor\n<\/pre>\n<p>\nAfter installation, you can import it into your React project with:\n<\/p>\n<pre class=\"prettyprint\">import ReactImageCompressor from 'react-image-compressor'\n<\/pre>\n<p>\nOnce imported, you can create a new instance of the ReactImageCompressor component and pass it the image you wish to compress. For instance:\n<\/p>\n<pre class=\"prettyprint\">const imageCompressor = new ReactImageCompressor('image.jpg'); imageCompressor.compress('compressed-image.jpg');\n<\/pre>\n<p>\nThis will compress the image stored in &#8216;image.jpg&#8217; and save the compressed version to &#8216;compressed-image.jpg&#8217;.\n<\/p>\n<h3>Conclusion<\/h3>\n<p>In this article, we learned how we can compress images based on their sizes offline using React and the <code>browser-image-compression<\/code> package without losing the physical properties.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28305,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,246,371],"class_list":["post-28304","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-react","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Image Compression Using React.js<\/title>\n<meta name=\"description\" content=\"Images draw attention, trigger emotions, and improve the user experience of your website. Image compression involves the reduction of the size of your image so that it takes less space on the hard drive and for better search engine optimization when it comes to websites e.g., 2MB to 440kbs. The image still retains its physical properties. We are going to use React to compress our images.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Compression Using React.js\" \/>\n<meta property=\"og:description\" content=\"Images draw attention, trigger emotions, and improve the user experience of your website. Image compression involves the reduction of the size of your image so that it takes less space on the hard drive and for better search engine optimization when it comes to websites e.g., 2MB to 440kbs. The image still retains its physical properties. We are going to use React to compress our images.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-15T08:34:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-09T13:30:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"288\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Image Compression Using React.js\",\"datePublished\":\"2022-06-15T08:34:48+00:00\",\"dateModified\":\"2025-02-09T13:30:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/\",\"name\":\"Image Compression Using React.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd.png?_i=AA\",\"datePublished\":\"2022-06-15T08:34:48+00:00\",\"dateModified\":\"2025-02-09T13:30:34+00:00\",\"description\":\"Images draw attention, trigger emotions, and improve the user experience of your website. Image compression involves the reduction of the size of your image so that it takes less space on the hard drive and for better search engine optimization when it comes to websites e.g., 2MB to 440kbs. The image still retains its physical properties. We are going to use React to compress our images.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd.png?_i=AA\",\"width\":512,\"height\":288},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Compression Using React.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Image Compression Using React.js","description":"Images draw attention, trigger emotions, and improve the user experience of your website. Image compression involves the reduction of the size of your image so that it takes less space on the hard drive and for better search engine optimization when it comes to websites e.g., 2MB to 440kbs. The image still retains its physical properties. We are going to use React to compress our images.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"Image Compression Using React.js","og_description":"Images draw attention, trigger emotions, and improve the user experience of your website. Image compression involves the reduction of the size of your image so that it takes less space on the hard drive and for better search engine optimization when it comes to websites e.g., 2MB to 440kbs. The image still retains its physical properties. We are going to use React to compress our images.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-15T08:34:48+00:00","article_modified_time":"2025-02-09T13:30:34+00:00","og_image":[{"width":512,"height":288,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/"},"author":{"name":"","@id":""},"headline":"Image Compression Using React.js","datePublished":"2022-06-15T08:34:48+00:00","dateModified":"2025-02-09T13:30:34+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd.png?_i=AA","keywords":["Guest Post","Image","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/","name":"Image Compression Using React.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd.png?_i=AA","datePublished":"2022-06-15T08:34:48+00:00","dateModified":"2025-02-09T13:30:34+00:00","description":"Images draw attention, trigger emotions, and improve the user experience of your website. Image compression involves the reduction of the size of your image so that it takes less space on the hard drive and for better search engine optimization when it comes to websites e.g., 2MB to 440kbs. The image still retains its physical properties. We are going to use React to compress our images.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd.png?_i=AA","width":512,"height":288},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/image-compression-using-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Image Compression Using React.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924872\/Web_Assets\/blog\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd\/15ec366912a36a6f19555af113cfca57a3d3914e-512x288-1_28305bddbd.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28304"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28304\/revisions"}],"predecessor-version":[{"id":36770,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28304\/revisions\/36770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28305"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}