3

I have multiple background images used in my CSS. Best practice for this used to be to combine images into a single sprite sheet to reduce the number of HTTP requests.

From looking at the Create React App documentation there is no mention of sprites. Instead it recommends importing images directly into CSS:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files

As a test I've done this. So a React component's CSS looks like this: 

.component {
    &:before {
        background-image: url('./img/account.svg'); // This image is within the React component's folder
    }
 }

From looking at my network tab I can multiple images:

enter image description here

However when I use the dev tools to simulate a slow connection the images all appear at exactly the same time. This makes me wonder if in fact there are not multiple HTTP requests and Webpack is doing this performance optimisation some other way?

So to summarise my question: If I were to combine my background CSS images into a single sprite sheet, would this decrease the number of HTTP requests and therefore improve performance?

Evanss
  • 23,390
  • 94
  • 282
  • 505
  • "However when I use the dev tools to simulate a slow connection the images all appear at exactly the same time" - are you sure they weren't simply cached between-requests? – Dai Mar 26 '18 at 03:29
  • Yes I used a new incognito browser. – Evanss Mar 26 '18 at 03:45
  • @Evans these appear to all be svg files, which are text, not raster image files. Try loading some beefy jpg files (~1MB) and you should see the network requests chugging along slowly. That said, 338KB does seem small for a payload -- I'd make sure the network tab in the Chrome dev tools you're using has the disable cache button checked... – duhaime Mar 29 '18 at 17:45
  • OK so in short the answer is yes, spriting images will improve performance? – Evanss Mar 30 '18 at 04:21
  • @Evanss The short answer is no. See my answer below. – silencej Jul 17 '19 at 03:30

1 Answers1

1

You can find an answer here in the CRA document:

To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153.

https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files

silencej
  • 221
  • 2
  • 13