Downsize images to prevent reaching max hardware texture size on mobile

Nobody has claimed this yet.

When I run my react application on Safari or Chrome mobile this message is showed on the console:

`WebGL: INVALID_VALUE: texImage2D: width or height out of range`

**mapbox-gl-js version**:
```"mapbox-gl": "^1.7.0",```

**browser**:
Safari and Chrome Mobile

**Device**:
Ios 13.2.2

### Steps to Trigger Behavior
add a overlay source:
```
map.addSource("overlay", {
type: "image",
url: "https://images.unsplash.com/photo-1573592919522-cb19b002d543",
coordinates: [[], [], []]
});
```

### Link to Demonstration
https://codepen.io/ronaiza_cardoso/pen/YzXGKoq?editors=0010

### Expected Behavior
Load overlay image on mobile devices

### Actual Behavior
Black image loaded with the fallow msg error on console.log
`WebGL: INVALID_VALUE: texImage2D: width or height out of range`


Start with the linked CodePen reproduction and the map.addSource image-overlay path in mapbox-gl-js, then inspect how mobile texture limits are handled. Verify on Safari and Chrome Mobile with the supplied Unsplash image; done means the overlay loads without the INVALID_VALUE texImage2D error.

Written by the indexing model from the issue text.