How to properly connect and optimize images in Gulp?

Question

npm

Hello! I'm trying to implement competent optimization, compression and connection of images to the project using Gulp. I studied the assemblies in detail, read many different documentations and articles on this topic - on Habré , Typical Coder , Webdesign-master.ru , Css-tricks.com and many other sources. I found a lot of new and useful things in them, but still I could not decide on the ideal way to prepare images for the site.

The task itself is as follows - you need to connect .jpg and .png images both as a background through styles background-image: url..., and directly in HTML tags<img src="...">. You also need to include icons in .svg format so that you can easily scale and color them later. In addition to this, I would like to automatically create two versions of images, for retina and non-retina screens, in order to load the appropriate one later. Maybe there are front-end developers who have already worked out a suitable scheme for themselves a long time ago and could share ideas on how best to organize all this?

I myself have already written a whole noodle in Gulp, used a bunch of plugins from PostCSS . Yes, everything is somehow not right. So far, I've only dealt with SVG - using postcss-inline-svg, I just convert them to an inline view url("data: ..."), which is very convenient, by the way. But what to do with ordinary raster images? It is also possible to translate them into inline (via postcss-assets) and connect as data: ... . This just should significantly reduce the number of unnecessary requests to the server. But the catch is that then the postcss-at2x plugin does not work , which creates styles for high-resolution screens. This is one thing. And how else to deal with the usual ones and force them to connect Retina versions too? I don’t want to use any Retina.js, because the original images will still be loaded, the loading will be visible, and this is just a crutch ... In general, there are still more questions than answers. I hope that someone will be able to orient in this matter and suggest how to do everything the right way :) <img>

Answer 1

1. I have not yet found a better method for manual processing.
2. In other cases, uploading to different resolutions saves (editors now allow this) + modules like imagemin ( version for gulp )
UPD: manual processing allows you to rotate the element by a degree on the editor's canvas and save size .