The most important thing here is that Sitecore does not crop the images by default, so your site should be designed to be responsive using CSS. With responsive design, the browser will scale the image dependent on the width of the page. But Sitecore's image handler allows images to be dynamically resized based on the URL parameter. ex -
<img src="/-/media/feature/calout/maincallout.ashx" />
<img src="/-/media/feature/calout/maincallout.ashx?mw=300" />
Using different images fields for desktop and mobile is not a good way in most of the time, but sometimes based on the HTML design or functionality we can create separate image fields for desktop and mobile, an example is different logos in desktop and mobile for a site(transparent and non-transparent). But if it is just for scaling the image then I don't think it is a good idea to use separate image fields.
There are few image optimizers on the marketplace with GitHub code, if you think those are not working for your solution, you can download the code base and make it compatible with your Sitecore version.
But I personally like Dianoga - https://github.com/kamsar/Dianoga, which is an automatic image optimizer for the Sitecore media library. It reduces the size of your images served from Sitecore by 8-70%, completely automatically. Dianoga sits in
getMediaStream pipeline, which Sitecore uses to transform media items before it writes them to its disk cache.