I have become relevant issue of optimizing images on the site. At the moment I have developed a site on which a sufficiently large number of images is used (Slider in the header, stocks, goods).
I collect the site using gulp. Before assembling all the images drove through the plugins:
imagemin imageminPngquant imageminZopfli imageminMozjpeg imageminGiflossy Optimization has yielded positive results. But confuses the following:
- I use 1 picture, say, 4000x2000, which with the help of css is compressed on all media brendpoints to the required size, and also sometimes displayed on product auto tags that are 112 by 60 pixels in size.
It prompted me to think, why not make a lot of options based on the original image. For example:
Original 4000x2000 For responsive design from 768 to 1024 (according to bootstrap), it is not important to use the image of 1024x so there, And for avatars, and generate 112 pixels for how many there according to the proportion. The so-called thumbnails.
As for the generation, then everything is extremely clear. You can make a task in the galp where image variants will be generated. But I have a question about how the problem is solved with the selection of pictures, if the user came from the retina screen, or 4-8k? In this case, you must use a 2x, 3x or 4x image.
And what about css and html where urls are inserted into the picture ??
I was looking for a lot of articles on this topic, but around one solid water about how bad it is not to optimize images, and nowhere are there any normal aids how to organize what I described.
Here is a quote from one article from here.
It says here:
Images must be created in the size in which they will be presented on the site.
It will be easier for the browser to scan the content of the pages if the width and height of the image is set in the CSS. For retina displays, add 2x images and customize the display of different sizes of the same image for different screens. Otherwise, for users who open the image on the retina display, all pictures will be displayed with a visual loss of quality.
And also suggest a screen:
It is particularly evident that at the end of the url images are 2x and 1.5x.
Actually my question is:
Can anyone share their experience or comprehensive information / link to an article about how to properly implement the optimization and use of optimized images on the site?
