ensure image requests send an accept header

[andrewharvey]

In modern browsers when you request an image if the browser supports webp it will add this to the request accept header, so if the server supports serving different content based on the client support it can.

However, when making a Fetch or XMLHttpRequest, the browser will pass */* as the accept header, in which case the server won't know if the client supports webp or not.

Mapbox raster sources have built in logic at

mapbox-gl-js/src/util/mapbox.js

Lines 96 to 110 in f5c2ae0

	export const normalizeTileURL = function(tileURL: string, sourceURL?: ?string, tileSize?: ?number): string {
	if (!sourceURL || !isMapboxURL(sourceURL)) return tileURL;
	const urlObject = parseUrl(tileURL);
	// The v4 mapbox tile API supports 512x512 image tiles only when @2x
	// is appended to the tile URL. If `tileSize: 512` is specified for
	// a Mapbox raster source force the @2x suffix even if a non hidpi device.
	const suffix = browser.devicePixelRatio >= 2 || tileSize === 512 ? '@2x' : '';
	const extension = webpSupported.supported ? '.webp' : '$1';
	urlObject.path = urlObject.path.replace(imageExtensionRe, `${suffix}${extension}`);
	urlObject.path = `/v4${urlObject.path}`;
	return makeAPIURL(urlObject);
	};

to ask for a webp tile when supported, but this change could help some 3rd party raster sources.

I've drafted a PR to address this at #8262