Is loading images locally faster than using external URLs in React app?-CodePudding

I am trying to understand, and I'm new to this. If I deploy a react app and store the images in with in the React app will it effect the speed of React app? When loading for the first time will all images be downloaded on request? If that's the case it's good to go for external image?

External

  <img className="w-full rounded-lg" src="https://images.unsplash.com/photo-1551650975-87deedd944c3ixlib=rb1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574&q=80" alt="Sunset in the mountains"></img>

Internal

import gameImg from "../../assets/images/game.jpg";

as per this question: Website images performance: local folder or external source? local images are good way. But is it the same case for the react app?

CodePudding user response：

With a standard Crate React app, the behavior depends on the size image. as stated by the documentation on Adding Images, Fonts, and Files

Images smaller than 10000 bytes and not ending in .svg are encoded to a data uri. This mans they are embedded inside you java script bundle, and are effectively downloaded directly when your application loads

For other sizes, react copies them to the static folder in the output directory. The first time the image is used, the browser will make an request to load the image. This is equivalent to locally storing image and the load time will be predictable.

With external image, you browser first has to resolve the domain name, make a new SSL connection, before they can make a request to download it, and you also have more privacy issues. But this is a valid solution for user provided content and dynamically updating images without rebuild.

CodePudding user response：

I'm assuming you're using Create React App (or something similar). At any rate, if you console.log(gameImg) you'll see that it gives you a URL just like an external image. Thus, if you create an <img src={gameImg} /> the image won't be loaded by the browser until the img element is present on the page.

There are some small caveats. Some bundlers will base64 encode the image and inline it directly into the source code. In which case, it will increase your bundle size. However, I believe most bundlers are pretty smart in knowing what it should and what it shouldn't. So I wouldn't worry about that.

CodePudding user response：

In both case, the browser will make a request to the web server.

The difference is that in the first case, the request is issued to a thirdparty external server (here images.unsplash.com).

In the second case, the request is issued to the same server that serve the application.

Both have pros and cons.

Personnaly i prefer serving images from the same server than application. I reserve outside server option for special case.

If you want to embed image in application, in clear avoid an extra request, you can embed your image in a base 64 encoded format, like this if you embedd it in a src HTML tag:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlQAAAJUCAYAAADTmLgpAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8GkV ..." />

Or like this if you embed this in CSS rule:

url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA ... AAABJRU5ErkJggg==')

Of course, in this case, your application will be bigger, and the initial load can be longer. But if the usage is limited, this will don't make really changes.

CodePudding user response：

yes when you have multiple images it tends to drag your react application so its best you have an online or cloud storage (when you are dealing with a lot of images like if you're building a gallery application ) cloud storage sites like https://cloudinary.com/will be very useful. If you still want to store the images locally make sure you add the lazy loading effect to the div holding the image so users won't think your app is blank you can check https://www.npmjs.com/package/react-loading-skeleton.Goodluck