{"id":28369,"date":"2022-03-24T21:12:13","date_gmt":"2022-03-24T21:12:13","guid":{"rendered":"http:\/\/optimize-images-using-webpack-in-react"},"modified":"2025-02-19T16:43:56","modified_gmt":"2025-02-20T00:43:56","slug":"optimize-images-using-webpack-in-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/","title":{"rendered":"Optimize images using webpack in React"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Images are an integral part of any web application. Most web applications in the world have at least one picture. As much as images are important elements of a good and appealing web application, they can also negatively impact its speed and user experience if handled poorly.<\/p>\n<p>In this post, we\u2019d be looking at how to effectively optimize images in our reactjs applications using the image-webpack-loader module.<\/p>\n<p>Before diving into the webpack specifics, it\u2019s essential to note some fundamental best practices when handling images in web applications:<\/p>\n<ul>\n<li>\n<strong>Third-party Compression Tools<\/strong>: Before even beginning with webpack, consider using tools like TinyPNG or JPEGmini to compress your images. It ensures your starting point already involves optimized assets.<\/li>\n<li>\n<strong>Lazy Loading<\/strong>: Always remember to incorporate lazy loading for images. Utilize the loading=\u201clazy\u201d attribute on image tags. This ensures images load only when in the viewport, enhancing the initial page load time.<\/li>\n<li>\n<strong>Content Delivery Network (CDN)<\/strong>: If your React application is expected to have a wide user base, consider serving your images via a CDN. CDNs cache content across global servers, ensuring faster delivery times.<\/li>\n<li>\n<strong>Responsive Images with<\/strong> <code>srcSet<\/code><\/strong>: In today\u2019s age of multiple devices, it\u2019s crucial to serve the right image size to the right device. Use the <code>srcSet<\/code> attribute to handle this efficiently.<\/li>\n<li>\n<strong>Accessibility<\/strong>: Never forget the visually impaired. Always use the alt attribute to describe images, enhancing accessibility.<\/li>\n<\/ul>\n<h1>Sandbox<\/h1>\n<p>The completed project is on <a href=\"https:\/\/codesandbox.io\/s\/optimize-images-using-image-webpack-loader-in-react-js-0c0f72\">Codesandbox<\/a>. Click the link below to view a complete demo of this article on <a href=\"https:\/\/codesandbox.io\/s\/optimize-images-using-image-webpack-loader-in-react-js-0c0f72\">CodeSanbox<\/a>.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/optimize-images-using-image-webpack-loader-in-react-js-0c0f72?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=\"Optimize images using image-webpack-loader in React.js\"\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 \"><h1>GitHub Repository<\/h1>\n<p><a href=\"https:\/\/github.com\/folucode\/image-webpack-loader\">https:\/\/github.com\/folucode\/image-webpack-loader<\/a><\/p>\n<h1>Prerequisite<\/h1>\n<ul>\n<li>Understanding of JavaScript and React.js.<\/li>\n<li>Knowledge of Babel and Webpack is not required but preferred.<\/li>\n<\/ul>\n<h1>Getting started<\/h1>\n<p>To use the image-webpack-loader module, we set up our React.js application from scratch to help us understand how images are loaded and bundled.<\/p>\n<p>It will also help us understand the basics of webpack, how webpack is set up or precisely what happens under the hood.<\/p>\n<p><strong>If you already have a React application set up with Webpack and Babel, skip the following portions to the Image optimization section below.<\/strong><\/p>\n<h1>Project setup and installation<\/h1>\n<p>We would create a folder on our local machine, which I named mine <code>react-webpack<\/code>. We can always call it whatever we like.<\/p>\n<p>We would navigate through the command line into the folder we created and initialize the package manager.<\/p>\n<pre><code> $ npm init -y\n<\/code><\/pre>\n<p><code>-y<\/code> means \u201cyes\u201d to all the general development questions asked on the command line.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_27A250C1A0E9BDDEA9D2B22D6A7819AE003CA4B91523D9C57BF03165BF81CE38_1645543327267_initialize+package+manager.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1035\" height=\"445\"\/><\/p>\n<p>Following the step above, the result will look like the image above.<\/p>\n<p>Next, we will install the React.js dependencies with:<\/p>\n<pre><code>$ npm i react react-dom\n<\/code><\/pre>\n<p>Finally, we will install Babel plugins and webpack loaders as devDependencies like so:<\/p>\n<pre><code>npm i -D @babel\/core @babel\/preset-env @babel\/preset-react babel-loader file-loader css-loader style-loader webpack webpack-cli html-webpack-plugin webpack-dev-server\n<\/code><\/pre>\n<h1>Setting up webpack with Babel<\/h1>\n<p>After successfully setting up the <code>dependencies<\/code> and <code>devDependencies<\/code>, we have to set up Babel and webpack to bundle our app and loading assets, respectively.<\/p>\n<p>We will now create a new file and name it <code>.babelrc<\/code> in the root directory of our app and add the following presets. This file will transpile react code from jsx to regular js.<\/p>\n<pre><code>{\n  &quot;presets&quot;: [\n    &quot;@babel\/preset-env&quot;, \n    &quot;@babel\/preset-react&quot;\n  ]\n}\n<\/code><\/pre>\n<p>Our code and file structure so far would look like this.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_27A250C1A0E9BDDEA9D2B22D6A7819AE003CA4B91523D9C57BF03165BF81CE38_1645544449064_folder+structure+1.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"344\"\/><\/p>\n<p>In the root of our project folder, we\u2019ll create a new file called <code>webpack.config.js<\/code>. This file essentially runs in the node environment and not the browser. Therefore, we can write vanilla js code in it.<\/p>\n<p>Copy and paste the code below into the newly created <code>webpack.config.js<\/code> file.<\/p>\n<pre><code>const path = require('path')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\nmodule.exports = {\n output: {\n   path: path.join(__dirname, '\/dist'),\n   filename: 'index.bundle.js'\n },\n devServer: {\n   port: 3000,\n   hot: true\n },\n module: {\n   rules: [\n     {\n       test: \/\\.(js|jsx)$\/,\n       exclude: \/nodeModules\/,\n       use: {\n         loader: 'babel-loader'\n       }\n     },\n     {\n       test: \/\\.css$\/,\n       use: ['style-loader', 'css-loader']\n     }\n   ]\n },\n plugins: [new HtmlWebpackPlugin({ template: '.\/public\/index.html' })],\n}\n<\/code><\/pre>\n<h2>What happens in the <code>webpack.config.js<\/code> file<\/h2>\n<ol>\n<li>First, we import the <code>path<\/code> module from nodejs. We also import the <code>HTML-webpack-plugin<\/code>, which simplifies the creation of HTML files to serve our webpack bundles.<\/li>\n<li>In the <code>output<\/code>, we state where to send the files when bundled.\n<ul>\n<li>\n<code>path<\/code> states the name of the directory created, which will store all the bundled files. We named this folder <code>dist<\/code>, an industry standard.<\/li>\n<li>And <code>filename<\/code> is the name we set for the new bundled file created after webpack bundles all the JavaScript code.<\/li>\n<\/ul>\n<\/li>\n<li>\n<code>devServer<\/code> is used as a development server.\n<ul>\n<li>We use <code>port<\/code> to set a port that the development server would run on. We set ours to 3000.<\/li>\n<li>\n<code>hot<\/code> triggers a full page reload when we change any file in our application.<\/li>\n<\/ul>\n<\/li>\n<li>\n<code>module<\/code> is where we pass the rules for bundling files.\n<ul>\n<li>\n<code>test<\/code> states the file extension that needs to be targeted by the specific loader. The babel-loader must bundle all the <code>.js<\/code> or <code>.jsx<\/code> files.<\/li>\n<li>\n<code>exclude<\/code> is where we state files to be ignored by the bundler.<\/li>\n<li>It is essential to note that the array of <code>use :['style-loader', 'css-loader']<\/code> in the <code>CSS<\/code> area needs to be written in that exact order.<\/li>\n<li>webpack follows this order when bundling the CSS files:\n<ul>\n<li>It first runs the <code>css-loader<\/code>, which turns CSS files into commonjs.<\/li>\n<li>It then runs <code>style-loader<\/code> which extracts the CSS into files as a string.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Lastly, we add <code>HtmlWebpackPlugin<\/code> to ensure that the webpack knows which HTML file template to follow for running the app.<\/li>\n<\/ol>\n<h1>Setting up the react folder structure<\/h1>\n<p>We would set up the folder structure like this.<\/p>\n<ul>\n<li>public\n<ul>\n<li>index.html<\/li>\n<\/ul>\n<\/li>\n<li>src\n<ul>\n<li>\n<pre><code>App.css\n<\/code><\/pre>\n<\/li>\n<li>\n<pre><code>App.js\n<\/code><\/pre>\n<\/li>\n<li>\n<pre><code>index.js\n<\/code><\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>We will first create a <code>public<\/code> folder and then an <code>index.html<\/code> file inside the <code>public<\/code> folder. After that, we will create an <code>src<\/code> folder and then  <code>App.css<\/code>, <code>App.js<\/code> and <code>index.js<\/code> files inside the <code>src<\/code> folder.<\/p>\n<p>In the <code>index.html<\/code> file, add the following code snippet:<\/p>\n<hr \/>\n<hr \/>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;React Webpack App&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;\n    &lt;script src=&quot;index.bundle.js&quot;&gt;&lt;\/script&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p><strong><strong><strong>In the<\/strong> <code>**App.js**<\/code> <strong>file<\/strong><\/strong>,<\/strong> <strong>add the following code snippet<\/strong>**:**<\/p>\n<hr \/>\n<hr \/>\n<pre><code>import React from 'react';\n\nfunction App() {\n  return (\n    &lt;div&gt;\n      &lt;h2&gt;\n        &lt;b&gt;Welcome to my React App!&lt;\/b&gt;\n      &lt;\/h2&gt;\n      &lt;h3&gt;Date : {new Date().toDateString()}&lt;\/h3&gt;\n    &lt;\/div&gt;\n  );\n}\nexport default App;\n<\/code><\/pre>\n<p>****<strong>In the<\/strong> <code>**index.js**<\/code> <strong>file add the following code snippet,<\/strong><\/p>\n<hr \/>\n<pre><code>import React from 'react';\nimport ReactDom from 'react-dom';\nimport App from '.\/App';\nimport '.\/App.css';\n\nReactDom.render(&lt;App \/&gt;, document.getElementById('root'));\n<\/code><\/pre>\n<p>****<strong>Now we would create a script in the<\/strong> <code>**package.json**<\/code> <strong>file to run our app. Add the following code to the <code>scripts<\/code> section of the file:<\/strong><\/p>\n<hr \/>\n<pre><code>&quot;scripts&quot;: {\n    &quot;dev&quot;: &quot;webpack serve --mode development&quot;,\n    &quot;build&quot;: &quot;webpack --mode production&quot;\n  }\n<\/code><\/pre>\n<hr \/>\n<h2><strong>Running the app<\/strong><\/h2>\n<p>To run our app, we run the following command below in the project directory in our terminal:<\/p>\n<hr \/>\n<hr \/>\n<pre><code>$ npm run dev\n<\/code><\/pre>\n<p>****Let\u2019s now navigate to <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a> to see our app running. We should see this in the browser.<\/p>\n<hr \/>\n<hr \/>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_27A250C1A0E9BDDEA9D2B22D6A7819AE003CA4B91523D9C57BF03165BF81CE38_1645613960528_running+the+app.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"965\" height=\"397\"\/><\/p>\n<hr \/>\n<p>Now that our app is up and running, let\u2019s add the image optimization functionality.<\/p>\n<h1>Image optimization with image-webpack-loader<\/h1>\n<p>To optimize images in our react application, we would use the image-webpack-loader module. We would install the module in our app by using the command below:<\/p>\n<pre><code>$ npm install image-webpack-loader --save-dev\n<\/code><\/pre>\n<p>After successful installation**, w**e need to configure it in our <code>webpack.config.js<\/code> file. In our <code>webpack.config.js<\/code>, we would put the object below into the <strong>rules<\/strong> array:<\/p>\n<pre><code>...\n{\n  test: \/\\.(gif|png|jpe?g|svg)$\/i,\n  use: [\n    'file-loader',\n    {\n      loader: 'image-webpack-loader',\n      options: {\n        mozjpeg: {\n          progressive: true,\n        },\n        \/\/ optipng.enabled: false will disable optipng\n        optipng: {\n          enabled: false,\n        },\n        pngquant: {\n          quality: [0.65, 0.9],\n          speed: 4,\n        },\n        gifsicle: {\n          interlaced: false,\n        },\n        \/\/ the webp option will enable WEBP\n        webp: {\n          quality: 75,\n        },\n      },\n    },\n  ],\n},\n...\n<\/code><\/pre>\n<p>The code above configures each optimizer for several image file types. There are several options for customizing them. For more information, see the documentation.<\/p>\n<h1>Image optimization in action<\/h1>\n<p>We will see the image optimization module in action, but we must add images to our app. Below is a list of three example image links from <a href=\"https:\/\/unsplash.com\">U<\/a><a href=\"https:\/\/unsplash.com\">nsplash<\/a> that we downloaded for us.<\/p>\n<ol>\n<li>\n<a href=\"https:\/\/unsplash.com\/photos\/Mv9hjnEUHR4\">https:\/\/unsplash.com\/photos\/Mv9hjnEUHR4<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/unsplash.com\/photos\/yihlaRCCvd4\">https:\/\/unsplash.com\/photos\/yihlaRCCvd4<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/unsplash.com\/photos\/2l0CWTpcChI\">https:\/\/unsplash.com\/photos\/2l0CWTpcChI<\/a>\n<\/li>\n<\/ol>\n<p>We download the images into a newly created folder named <code>img<\/code> in the public directory of our app. Our app directory should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_27A250C1A0E9BDDEA9D2B22D6A7819AE003CA4B91523D9C57BF03165BF81CE38_1645615468917_folder+strcuture+2.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"752\" height=\"670\"\/><\/p>\n<p>Before we continue, take note of the sizes of these images. See them below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_27A250C1A0E9BDDEA9D2B22D6A7819AE003CA4B91523D9C57BF03165BF81CE38_1645615647171_image+sizes.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"880\" height=\"122\"\/><\/p>\n<h2>Importing the images for optimization<\/h2>\n<p>We would now import the images into our app. To do that, update the App.js file with the following code snippet:<\/p>\n<pre><code>import React from 'react';\nimport dog1 from '..\/public\/img\/charlesdeluvio-Mv9hjnEUHR4-unsplash.jpg';\nimport dog2 from '..\/public\/img\/marliese-streefland-2l0CWTpcChI-unsplash.jpg';\nimport dog3 from '..\/public\/img\/oscar-sutton-yihlaRCCvd4-unsplash.jpg';\n\nfunction App() {\n  return (\n   ...\n      &lt;img src={dog1} alt={dog1} width={300} height={300} \/&gt;\n      &lt;img src={dog2} alt={dog2} width={300} height={300} \/&gt;\n      &lt;img src={dog3} alt={dog3} width={300} height={300} \/&gt;\n    ...\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n<p>We should make sure to kill the already running server by using <code>CTRL + C<\/code> on Windows or <code>CMD + C<\/code> on Mac. Now we will restart the server with the command:<\/p>\n<pre><code>$ npm run dev\n<\/code><\/pre>\n<p>We would then go to the app in our browser and see the images. To ascertain that the optimization happened, we would be inspecting the image elements in the devtools.<\/p>\n<h2>Confirming the optimization<\/h2>\n<p>We would go to the \u201cimg\u201d section in the network tab of our browser\u2019s developer tools to see the optimization in action. We then refresh the page to see that the images have reduced size.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_27A250C1A0E9BDDEA9D2B22D6A7819AE003CA4B91523D9C57BF03165BF81CE38_1645619020479_optimized+images.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1117\"\/><\/p>\n<p>Note: If the size area shows in bytes(B) instead, e.g. 204B, hover on it to see the resource size.<\/p>\n<h1>Conclusion<\/h1>\n<p>This article explained how to optimize images in Reactjs applications using image-webpack-loader, that enhances our application speed and proffers a better user experience.<\/p>\n<h1>Resources<\/h1>\n<p>These resources are helpful to gain further knowledge.<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/www.npmjs.com\/package\/image-webpack-loader\">image-webpack-loader documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\">Reactjs documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/webpack.js.org\/loaders\/\">webpack<\/a> <a href=\"https:\/\/webpack.js.org\/loaders\/\">documentation<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28370,"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,177,388,374,246,371],"class_list":["post-28369","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-optimize","tag-performance","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>Optimize images using webpack in React<\/title>\n<meta name=\"description\" content=\"This article explains how to optimize images in React.js applications using image-webpack-loader, enhancing our application speed and providing a better user experience.\" \/>\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\/optimize-images-using-webpack-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimize images using webpack in React\" \/>\n<meta property=\"og:description\" content=\"This article explains how to optimize images in React.js applications using image-webpack-loader, enhancing our application speed and providing a better user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T21:12:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-20T00:43:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1152\" \/>\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\/optimize-images-using-webpack-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Optimize images using webpack in React\",\"datePublished\":\"2022-03-24T21:12:13+00:00\",\"dateModified\":\"2025-02-20T00:43:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"Optimize\",\"Performance\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/\",\"name\":\"Optimize images using webpack in React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36.png?_i=AA\",\"datePublished\":\"2022-03-24T21:12:13+00:00\",\"dateModified\":\"2025-02-20T00:43:56+00:00\",\"description\":\"This article explains how to optimize images in React.js applications using image-webpack-loader, enhancing our application speed and providing a better user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36.png?_i=AA\",\"width\":2048,\"height\":1152},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimize images using webpack in React\"}]},{\"@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":"Optimize images using webpack in React","description":"This article explains how to optimize images in React.js applications using image-webpack-loader, enhancing our application speed and providing a better user experience.","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\/optimize-images-using-webpack-in-react\/","og_locale":"en_US","og_type":"article","og_title":"Optimize images using webpack in React","og_description":"This article explains how to optimize images in React.js applications using image-webpack-loader, enhancing our application speed and providing a better user experience.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T21:12:13+00:00","article_modified_time":"2025-02-20T00:43:56+00:00","og_image":[{"width":2048,"height":1152,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36-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\/optimize-images-using-webpack-in-react\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/"},"author":{"name":"","@id":""},"headline":"Optimize images using webpack in React","datePublished":"2022-03-24T21:12:13+00:00","dateModified":"2025-02-20T00:43:56+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36.png?_i=AA","keywords":["Guest Post","Image","Javascript","Optimize","Performance","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/","name":"Optimize images using webpack in React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36.png?_i=AA","datePublished":"2022-03-24T21:12:13+00:00","dateModified":"2025-02-20T00:43:56+00:00","description":"This article explains how to optimize images in React.js applications using image-webpack-loader, enhancing our application speed and providing a better user experience.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36.png?_i=AA","width":2048,"height":1152},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/optimize-images-using-webpack-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimize images using webpack in React"}]},{"@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\/v1681924672\/Web_Assets\/blog\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36\/7db1e5d68bb245551695159d5f8588e1f1ff6caf-2048x1152-1_28370e9d36.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28369","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=28369"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28369\/revisions"}],"predecessor-version":[{"id":36892,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28369\/revisions\/36892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28370"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}