How to use images on the site?

Question

Images

good
There is a block in which an image is used
For example, I found a beautiful, suitable image on Unsplash and I want to use it I write
for the block like this

<div class="grid-item" style="background: url('img/test-img2.jpg') no-repeat center / cover;">
</div>

I specify the background specifically in html, so that later, if anything, it would be possible to easily manage all the images in the admin panel
(by the way, how correct is it to use an image in one of the blog blocks in the background?)
So the
image I downloaded is awesome, what a rather big 4000 pixels with something on it 3000 (well, you understand)
And of course, the site loads in 30 seconds from only 2 such pictures (although there is a whole blog and there should be a lot of them)
I tried compression on all sorts of online resources like ILoveImg and so on. but it helps so-so
I tried to set small sizes in photoshop and it helped, but the quality is mmmmmm ....
Please help in this situation
PS
Or in general, on some WordPress thread, people upload heavy pictures (people far from web development) and they are quite normally optimized in some way. Maybe I should also optimize the process of optimizing any images through js in layout? (so that the admin does not have to go into Photoshop) If anyone knows something, please tell me. Thank you!

Answer 1

Online:
https://imagecompressor.com/
https://tinypng.com/
www.imageoptimizer.net/Pages/Home.aspx
WP:
https://wordpress.org/plugins/resmushit-image-opti...
https ://wordpress.org/plugins/ewww-image-optimizer/
https://wordpress.org/plugins/tiny-compress-images/
https://wordpress.org/plugins/shortpixel-image-opt...
https ://wordpress.org/plugins/wp-smushit/
JS:
https://www.npmjs.com/search?q=keywords:image%20op...
PHP:
https://github.com/spatie/image -optimizer
https://github.com/psliwa/image-optimizer
Django:
https://github.com/joedicastro/img4web
https://github.com/chrissimpkins/Crunch
What's the problem?

Answer 2

In terms of image optimization, you should look into Imagemin.
For example, through npm scripts:
You can batch process a large number of photos, while the quality does not change visually, and a 13MB file can be compressed up to 2MB.
Only for compressing jpg files, I advise you to install an additional plugin:
You can use Imagemin along with Gulp.

Answer 3

ha the same wordpress images are resized. those. the physical size decreases, and then they are optimized, and only if the full image is needed, the original is given, although everyone has different 30 seconds for a short time, and traffic on mobile phones has fallen in price ...