...
Image files should be 2x the size they appear on the site in order to look crispmake sure retina display retains the sharpness of the images. Over 2x and the file size can become too large, under 2x and the resolution of the image may not look great. It’s best to try to retain original image ratio without stretching. Image stretching should always be avoided.
Image effects
The Scale and Crop effect is preferred if possible, depending on what’s necessary for the solution.
...
It’s best practice to use as few breakpoints as possible. Too many breakpoints can lead to too many image styles, which can create confusion. At minimum, breakpoints should include sizes for mobile, tablet, desktop, and large desktop. They sizes for these breakpoints should be the same as defined in the theme.
...
Avoid naming image styles in a way that targets specific elements. Instead, name them in a way so that image styles can be reusable. For example: medium, large, thumbnail, etc. Also, if the image style has an effect like scale and crop that applies width and height dimensions, it’s best practice to include the dimensions in the image style name, such as large_640x640.
Additional resources:
Drupal.org | Concept: Image Styles
Managing Images in Large Scale Drupal Websites slides 16-23
https://www.agiledrop.com/blog/optimizing-images-drupal-8-core-features