Work with pictures, icons during layout?

Question

Layout

I decided to go into layout for a while, I already figured out grids, flexboxes, remembered git and galp, set up a starting template with mixins, a grid, a normalizer and some libraries for animation, a slider, etc. But I postponed work with graphics for later. In principle, the entire workflow from accepting the layout to the final version is clear, except for working with graphics. I read various articles on habré, css-tricks, toaster, most likely the answer has already been bit by bit, but I want to finally summarize with your help.
PNG / JPEG:
- Combine everything in png into a sprite, minify to reduce the number of requests, draw it yourself if possible or ask the designer to redraw it in svg, if necessary.
- Try to compress Jpeg as much as possible until artifacts start to appear
. Icons:
1) Use an icon font, for example using icomoon, a convenient option, since we can change the color, size and good support, but there is a problem with anti-aliasing, problems with positioning inherent properties for text and if the font fails, there will be unicode characters.
In general, it seems to be quite a working option, if this is not some kind of large project.
2) Combine all svg into one file, where they are wrapped with symbol and use through use.
Here I have questions, is it better to insert a document on the server into the markup and cache it in local storage?
Ajax to receive the file and insert it into the page, then it will be cached?
Or write the full path and add svg4everybody?
3) Merge into a sprite, there is no way to interact.
4) Insert via data uri directly into the code, I did not fully understand about caching. svg file is a markup language included in a subset of xml. In any case, the browser parses the document, reads the coordinates and draws the shape, what difference does it make if it is a separate file in the form of a sprite, a separate file like with cymbol, or parsing the code inside the style file? But it’s already starting brain cancer in me, I haven’t read information about how the browser renders files for a long time. This option can also be automated through gulp, but I have not tried it yet.
So far I have tried only fonts and symbols in the video of a separate file, but with a request to it, and not inserting it into html. But I understand that these are the most suitable options. While I was repeating something else, I simply exported the graphics in the required format and connected them without sprites, icon fonts. I want to deal with this and already go somewhere to work in the office for a while.
PS Before that, I only took orders a couple of times as a layout designer, but that was about 3 years ago. The rest is only for yii2, laravel worked a little. But I won’t say that layout is easier if you approach it responsibly and consider various options, optimization, etc. Okay, I hope you can help me finally figure it out, otherwise I got stuck a bit ..
Part of what I looked at:
https://css-tricks.com/icon-fonts -vs-svg/
https://css-tricks.com/pretty-good-svg-icon-system/
https://habr.com/post/260645/
https://habr.com/post/272505/
https://www.youtube.com/watch?v=S_wZSjLiUog&index=...

Answer 1

I'm far from being a guru, however, I think you're overthinking.
About png merging, jpeg supercompression: do you want all assets to be a couple of megas?
Combining svg can also bring a lot of unnecessary problems.
Angular Material has good icons, you can take a font or svg. If there is an immediate need to access a resource without the Internet (a mobile application, for example), then take svg right away.
PS Don't forget about compatibility issues with Symbol.