💊 Feature Detection
WebP Support
If you pass auto to the output parameter, we'll check the accept header of your request to figure out if you're using a WebP enabled browser or app. If that's the case, we'll alter the canonical request as if you explicitly asked for webp.
For the original image
https://riff.one/img/designcue-unsplash.jpg
The following parameters and header would yield a WebP encoded image.
GET https://resizer.pictures/w=150_output=auto/riff.one/img/designcue-unsplash.jpg
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
INFO
Caching will take place after this step, as to avoid using the same cache-key for devices with different feature support.
Client Hints
Response headers will tell your browser we've enabled a few Client Hints. When supported, its requests should include information about screen size or DPI.
↔️ Device's Viewport Width
If your browser sent the "sec-ch-viewport-width" or "viewport-width" headers, passing the "vw" transformation parameter will yield an image with the same width of your current's viewport. Pass it with a value between 0 and 1 (e.g. 'vw=0.4') to set the width as a fraction of the viewport width. If you also pass an explicit width, the smallest is picked.
See IETF descripcion for: Device's Viewport Width↕️ Device's Viewport Height
If your browser sent the "sec-ch-viewport-height" header, passing the "vh" transformation parameter will yield an image with the same height of your current viewport. Pass it with a value between 0 and 1 (e.g. 'vh=0.4') to set the height as a fraction of the viewport height. If you also pass an explicit width, the smallest is picked.
See IETF descripcion for: Device's Viewport Height🔍 Device's DPR
If your browser sent the "sec-ch-dpr" or "dpr" headers, and you passed the "dpr" transformation without a value, Edge Resizer will try to populate it with the header value
See IETF descripcion for: Device's DPR