Renaming an image style can cause "Error: Call to a member function getDerivativeExtension() on null"

Problem/Motivation

We recently had a client put in an issue to explain why their site went down. The error they were experiencing was

Error: Call to a member function getDerivativeExtension() on null in responsive_image_get_mime_type() (line 479 of /code/web/core/modules/responsive_image/responsive_image.module)

After some investigation of the code and some experimentation I was able to replicate how it happened, but it could only happen if a person changed the machine name of an image style that was currently in use by a responsive image style.

Steps to reproduce

Create and image style
Create a responsive image style
Include the created image style in that responsive image style
Create a field that displays the responsive image style as a formatter for an image.
Create a piece of content that adds an image to this field
Visit the content and validate that the Image displays correctly
Edit the Image style's machine name.
Visit the content you created earlier and validate you get the error message.

You can see this happen in my Screencast → .

Proposed resolution

I suggest we make any machine name changes to the Responsive Image Style as well so that they remained linked.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet