Adaptive Images API parameters
If you'd like to implement your own solution to get the same advantages as ShortPixel Adaptive Images (for example, when your website is not WordPress-based), you can use our API and documentation here.
First, the URLs should have 3 parts:
https://cdn.shortpixel.ai/client/parameter1,parameter2/url_of_image
- https://cdn.shortpixel.ai/client
- parameter1,parameter2: the API parameters (see below)
- url_of_image: the original URL of the image
Then, this is a list of parameters that can be used when calling ShortPixel Adaptive Images' API (e.g. no-cdn.shortpixel.ai or cdn.shortpixel.ai).
- w - Width in pixels, it can be specified or left blank. If only width is specified, the image will keep the original ratio, adjusting the height accordingly.
https://cdn.shortpixel.ai/client/w_300,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg - h - Height in pixels, it can be specified or left blank. If only height is specified, the image will keep the original ratio, adjusting the width accordingly.
https://cdn.shortpixel.ai/client/h_300,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg - c - Crop style, useful when both width and height are specified. Available options: top, right, bottom, left, center. Default is "smart" cropping which means the cropping will be performed taking into account each picture's "subject".
https://cdn.shortpixel.ai/client/w_300,h_300,c_bottom,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/w_300,h_300,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg - sc - Special crop. On the example below, 700x1000 is the offset from the upper left corner of the image, and 2400x1000 is the width & height of the section that is cropped. 480x200 is optional and it will return a resized image with a width of 480px and a height of 200px. Please note that the resizing isn't done at scale, which means that images can be "squeezed" as in the third example (400x100).
https://cdn.shortpixel.ai/client/sc_700x1000:2400x1000,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/sc_700x1000:2400x1000:480x200,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/sc_700x1000:2400x1000:400x100,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg - q - Quality setting, it can be lqip, lossless, glossy or lossy. lqip will return a low quality SVG placeholder.
https://cdn.shortpixel.ai/client/w_300,h_300,q_lossless,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/w_300,h_300,q_glossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/w_300,h_300, q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/w_300,h_300,q_lqip,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg - to - Conversion setting. It supports webp, avif and auto. It will convert the image to WebP, to AVIF and to both WebP and AVIF. If the original image is an animated GIF, then it can only be converted to WebP.
Important: the image will only be returned in WebP or AVIF format if the browser supports that image format. If it doesn't, then the original image format will be returned automatically.
to_auto will return an AVIF image if the browser supports it. If not, it will return a WebP image also if browser supports this image format. If the browser supports neither of these formats then the image in its original format will be returned.
https://cdn.shortpixel.ai/client/to_webp,w_300,h_300,q_lossless,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/to_avif,w_300,h_300,q_lossless,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/to_webp,q_glossy,h_110,w_250,ret_wait/https://giphygifs.s3.amazonaws.com/media/TdMVH60kJvTMI/giphy.gif?final
https://cdn.shortpixel.ai/client/to_avif,q_glossy,h_110,w_250,ret_wait/https://giphygifs.s3.amazonaws.com/media/TdMVH60kJvTMI/giphy.gif?final
Notes: The generation of AVIF images takes more time than other formats. Also, currently to_avif when the original file is a PNG won't work due to transparency issues.
- ex - It can be 0 or 1; EXIF data will be kept (1) or not (0).
https://cdn.shortpixel.ai/client/ex_0,w_300,h_300,q_lossless,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg - ret - Possible values are blank, img, wait. The value blank will immediately return a blank placeholder and img will redirect to the original image while the image is being processed. Once the image is processed the new image will be displayed. The value wait will make the image wait to be displayed until the new processed image is ready.
https://cdn.shortpixel.ai/client/w_300,h_300,q_lossless,ret_blank/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/w_300,h_300,q_lossless,ret_img/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/w_300,h_300,q_lossless,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
You can also minimize and serve CDN-hosted, minimized version of your CSS or JS files. They only take a single parameter which is ret