How to prepare pictures and icons for adaptive?

Question

Design

It's no secret that different manufacturers have different screen resolutions and pixel densities per inch. How to properly optimize images and icons so that they look good on most devices? At the moment, there is no understanding at all which side to approach. Need expert advice.
What online services, plug-ins for graphic editors or utilities are there for this?
I will also be grateful for good articles on this topic.

Answer 1

1) Large raster images without transparency - in jpg with a compression of about 70% + a copy in double size, if necessary (in the case of background images where there are no small details, you can often get by with a single size)
2) Small raster images (with transparency) - in png and optimize tinypng.com (or some software) + double copy for retina.
3) Everything that can be vector - in SVG.
4) Icons can be assembled into sprites.
Here is an interesting video on the topic - https://www.youtube.com/watch?list=UUH8zwr3rJOcgCA...

Answer 2

It's good manners to take care of everyone =)
For example, Apple for iOS recommends using PDF for wind images.
For the Web, everyone is used to using SVG and so on.
Now, exporting to all formats, for example from Sketch, is not a big problem, but for developers, you will become a super designer.