Using image urls vs importing images locally - reactjs

Question

Is it generally better performing to use an image by referencing it with an url or by downloading it, saving it to some directory, and then importing it in a component?
Eg
<img src="images.google.com/example.png" />
vs
import Example from './static/example.png';
<img src={Example} />

Answer 1

Since React doesn't have any means of loading or serving image data, this question is inherently about other tooling, like Webpack.
Storing images locally and loading them via webpack has the benefit of being able to process them with your Webpack loaders, which enables things like inlining them (via base64 resource URLs) when they're small enough and fingerprinting them. You'll still want to deploy those final assets somewhere that gets wrapped in a CDN, though.
Referencing remote images via string URL alone has the advantage of not having sizeable binary images bloating your SCM repository, not needing to import each image explicitly (remember, there are no glob imports in Webpack), and reducing your webpack build times.
I suspect most React apps are going to end up using both, usually in different use cases. I always use local images for logos and app assets for example, whereas I'll reference external files for any user-uploaded content or larger JPG/PNG assets.

Answer 2

CDNs are usually preferred for delivering static files such as images. Due to the fact that the Google Cloud CDN caches your files through its edge servers, your visitors will have their static content delivered to them from the closest point of presence instead of originating from the same server your application is running from.
Having your static content served and cached in multiple geographical locations around the world ensures an optimal content delivery time.
Developing locally however, you may notice that having your static content locally is faster. This is normal, because you're fetching an image over the internet vs from your local hard drive. However, once your app will be deployed and running (say from Canada), visitor A who is from Eastern Europe may be experiencing slower delivery times than visitor B who is from the States. Because you are serving a global customer base from one geographical location, your visitors from the a completely different timezone will receive an unfair treatment in the time it takes for their content to be delivered.
In another perspective, why not both? Have your application serve static content from a CDN but also have your static content on the same application folder and gracefully fall to the local one if the CDN fails.
TL;DR
Serve your images from a CDN ( url ) if you have a large customer base for optimization.