Click on an image to make it bigger.
Configuration - Media - Image Styles - Navigation

1. Add an Image Style

Go to Admin menu > Configuration > Media > Image Styles > Add style.

Configuration - Media - Image Styles - Give Style a Name

2. Give the Image Style a Name

The screen will redirect to the Image Styles screen.

Style Name field = enter a name.

Click the Create New Style button.

Configuration - Media - Image Styles - Select the Effect

3. Add an Effect

You'll be redirected to the Image Style User Interface.

Effect select box = choose Scale.

Click the Update Style button.

Configuration - Media - Image Styles - Add Scale Dimensions

4. Set Scale Dimensions

We're going to constrain the width field for the purpose of this exercise. Sometimes you may have a case where the height needs to be constrained, but usually width is the critical dimension.

Width field = enter a value (we're using 800 in the example).

We'll leave the Height field blank and it will just scale as it needs to based on the width.

Allow Upscaling checkbox = leave this empty - while it may be necessary for some cases, most of the time it just results in degraded images.

Click the Add Effect button.

Configuration - Media - Image Styles - Effect Applied

5. Effect Applied

You will be redirected to the Image Styles UI and your new effect will display in the Effects list.