If you want to implement your own solution to get the same benefits as ShortPixel Adaptive Images (for example, if your website is not based on WordPress), you can use our API and documentation here.
First of all, the URLs should consist of 3 parts:
https://cdn.shortpixel.ai/client/parameter1,parameter2/url_of_image
https://cdn.shortpixel.ai/client– this is fixed and the same for every image.parameter1,parameter2– the API parameters, comma-separated (see below).url_of_image– the original URL of the image.
Then this is a list of parameters that can be used when calling the ShortPixel Adaptive Images API (e.g. no-cdn.shortpixel.ai or cdn.shortpixel.ai).
w– width in pixels, can be specified or left empty. If only the width is specified, the image will keep the original ratio and adjust the height accordingly. Example:
https://cdn.shortpixel.ai/client/w_300,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpgh– height in pixels, can be specified or left empty. If only the height is specified, the image will keep the original ratio and adjust the width accordingly. Example:
https://cdn.shortpixel.ai/client/h_300,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpgc– crop style, useful when both width and height are specified. Available options:top,right,bottom,leftandcenter. The default setting is “smart” cropping, i.e. cropping is done taking into account the particular “subject” of the image. Examples:
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.jpgsc– special crop. In the example below, 700×1000 is the offset from the top left corner of the image, and 2400×1000 is the width and height of the crop. 480×200 is optional and provides an image with a width a width of 480px and a height of 200px. Please note that resizing is not to scale, which means that images may be “squeezed” as in the third example (400×100). Examples:
https://cdn.shortpixel.ai/client/sc_700x1000:2400×1000,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/sc_700x1000:2400×1000:480×200,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpg
https://cdn.shortpixel.ai/client/sc_700x1000:2400×1000:400×100,q_lossy,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpgq– quality setting, it can belqip(which returns a low quality SVG placeholder),lossless,glossyorlossy. Examples:
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.jpgto– conversion setting. It supportswebp,avifandauto. It converts the image to WebP, to AVIF and to both WebP/AVIF respectively. If the original image is an animated GIF, it can only be converted to WebP. The image is returned in WebP or AVIF format only if the browser supports such image formats. If it doesn’t, the original image format will be returned automatically.to_autoreturns an AVIF image if the browser supports this format. If this is not the case, a WebP image is returned if the browser also supports this image format. If the browser does not support either format, the image is returned in its original format. Examples:
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_auto,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?finalex– this value can be0(EXIF data will be discarded) or1(EXIF data is preserved). Example:
https://cdn.shortpixel.ai/client/ex_0,w_300,h_300,q_lossless,ret_wait/https://shortpixel.com/img/tests/beautiful-woman.jpgret– possible values areblank,imgorwait. The valueblankwill immediately return a blank placeholder andimgwill redirect to the original image while the image is being processed. Once the image is processed the new image will be displayed. The valuewaitwill make the image wait to be displayed until the new processed image is ready. Examples:
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 minimized versions of your CSS or JS files hosted on the CDN. You only need a single parameter, namely ret. Examples:
https://cdn.shortpixel.ai/client/ret_img/http://shortpixel.com/img/tests/test.css
https://cdn.shortpixel.ai/client/ret_img/http://shortpixel.com/img/tests/test.js