What is the best way to include images/styles: in js or in html?

Question

css

So far I know two ways to solve this issue in pure JS:

Method 1: include images / css-styles in a js-file using import.Then we create in the js-file new Image(), and then the picture must be inserted into HTML. All this is collected on Webpack (actually, the Webpack guide led to this question). Then each component has its own pictures, its own js, its own styles. Each component in a separate folder:

|– /components
| |– /my-component
| | |– index.js
| | |– index.css
| | |– icon.svg
| | |– img.png

Method 2: for example, split images into folders /header, /footer, etc. (or throw it in a bunch), and specify the path to the pictures in HTML in<img src="">. As a result, we have one final style.css, index.html, bundle.js and a folder with pictures.

In the first option, we will constantly climb into the DOM when rendering each page component with appendChild, insertAdjacentHTMLetc., and store / generate part of the HTML code in js, if not all of the HTML code of the component. And so all the blocks of the site will be written from the header to the footer.

How much will such work with the DOM hit the speed?
Does it make sense to create a site in the first way or is it not optimal and bad?
Or is the second way better?
What is the best way to build architecture?

Answer 1

Read more about the doc, here on the topic: https://webpack.js.org/loaders/file-loader/
After describing the api, there are examples of different uses below. It is not necessary to insert through js, you specify in the webpack settings where and where to copy the image, enter the current url in html, when assembling the paths are replaced with the necessary ones.
Here is another good resource on webpack: https://survivejs.com/webpack/foreword/
Covers a lot of questions in a fairly concise form, it may be more convenient to get acquainted with this resource than with off-doc.

Answer 2

The heaviest operations in terms of performance are interaction with the DOM.
But sometimes you need, for example, to load only part of the content or first display small cached, blurred, stretched 16x16 pictures, and only then, when the full-size image is loaded, insert them instead of the blurred ones.
So both methods are good, it all depends on the task, is it worth playing around and setting up webpack to insert three images with a static url?

Answer 3

Why images in webpack? How often are scripts updated in your application? If images are updated more often than your scripts, then this may be the reason for such experiments, but in 99% of cases this is not the case. Put pictures as static, then caching will work, and you don’t need to do anything. But you use icons in svg in vain. SVG is good to use with generated tags from JS code, and icons should be rendered in png/gif/jpg (underline as appropriate). Rendering SVG by the browser is the height of disrespect for your website visitor's resource consumption.