There are no set sizes that you should use for your images. Screrer comes with default values/suggestions but you should change these to suit your site and how you use your images. This will depend on your theme, whether you are using a max-width container, whether the image is full screen width on all devices etc etc.
There are various tools for exporting your image into different sizes. Retrobatch for instance is able to take an image (or a folder of images) and scale it to various widths and rename the images to include the width. This makes pulling together your image set very easy but it could easily be done using Preview and resizing and 'saving as' each time. View this forum post to read more about this (and to download the RetroBatch workflow!).
In terms of the Art Direction stack, there is a good example / tutorial on the RW4ALL forum that shows how the stack can be used to create 'advert-type banners'.
If you are a web designer then it is worth your time developing a full understanding of what Srcerer can do in terms of responsive image delivery and why this is a critical approach to take in your web development projects. There are numerous sites online that go into great detail about the code that Srcerer constructs in terms of size/resolution switching and art direction. There are also sites with great advice about choosing your breakpoints, deciding which units to use (e.g. em or vw) and generally about how to prepare images for use in this way. A number of recommended reading sites are listed below. A good understanding of this area will help you use Srcerer to its fullest potential and enjoy all of the benefits that delivering your images in this way offers.
- How to deliver responsive images across devices
- How to build responsive images with srcset
- Responsive Images
- Srcset sizes
- MDN web doc - Responsive images
