reactjs – What is the reason behind having data URI instead of path for images less than 10kb in React?
This is not a practice thats particular to React. Whether something gets rendered via React or by ordinary HTML, if an image is rendered using a data URI, if the data URI exists in the code already (either bundled inside the JS or hard-coded into the HTML), no additional requests to the server will have to be made.
In contrast, if you have something like
src=theImage.png, thatll result in a request to the server to download the image.
its a wide spread practice in web development in order to reduce load times?
If, for example, the web server was using HTTP 1.1, and you had, say, 25 images with
srcs pointing to different files, the sheer number of separate requests could present a problem – regardless of whether React was being used or not.
(HTTP/2 mitigates this problem at least somewhat – see here)