What is the best way to embed images on a website?

Question

JavaScript

What you need to know about inserting images on the site?
For example, there is a regular landing page, the entire header of which is occupied by a large, high-quality (= weighing a lot) image. Because of this, the page may slow down.
How is this problem usually solved? What can be read about this?

Answer 1

obviously there are two ways:
1) learn how to compress images
2) learn how to design minimalistically, keeping in mind kilobytes

Answer 2

If you are a straight-forward front-end and have a question in the js topic, then Gulp will help you, there are rules for compressing and processing an image. It's better to spend a couple of hours studying the project builder than forever walking around the left sites and optimizing each image and listening to how google pagespeed humiliates you anyway.

Answer 3

As an option: Responsive design has a method that uses several images of different sizes.
In JS, a script is created that loads a "heavy drawing" only if the monitor resolution is high.
If the resolution "does not hold up", then a smaller picture is used.
What to read: Read Add Air! Visual Design Essentials for Graphics, Web and Multimedia. Above you have correctly written: you need to design minimalistically.

Answer 4

It all depends on the situation, there are many methods. Sometimes compressed copies of images are loaded along with the page, for example, blurry ones, then high-quality ajax ones are loaded. Sometimes it is justified to load the top of the site, the rest later. Sometimes they make a preloader that the user sees before the formation of a heavy page. In addition, there is gzip, you need to configure it on the server. In addition, some images can be combined into 1, to make the so-called sprite. And sometimes you just need to change the host. If you give a link to the site, you will be given more correct advice.