SVG Low Quality Image Placeholder (SQIP)

SQIP

Endpoint URL
https://api.devweapons.com/sqip/
What does it do?

The SQIP API endpoint accepts a JPG or PNG source image and converts it to a low quality SVG image that can then be used as a placeholder during lazy loading.

Before SQIP conversion.
Source JPG @ 59.2 kb
After SQIP conversion.
SQIP @ 987 b (534 b gzipped)

The above image can leverage the SQIP functionality by using a <picture> tag and lazy loading:

<picture>
  <source data-srcset="sqip_example_source.jpg" />
  <img alt="SQIP" class="lazy" src="data:image/svg+xml;base64,BASE64 Encoded SVG markup here" />
</picture>

The above code leverages the https://github.com/verlok/vanilla-lazyload library.

Parameters
TypeParameter Name
filedata
Outputs
{"sqip":"<svg>SVG markup here<\/svg>"}
{"error":"Missing file data."}
{"error":"The request method is must be POST."}
{"error": "Payload exceeds the size limit of 2M."}
{"error":"File must be of type jpg or png."}
{"error":"Error connecting to the database."}
Code Examples
curl https://api.devweapons.com/sqip/ -F "data=@/path/to/image.jpg"
$endpoint = 'https://api.devweapons.com/sqip/';

$file = new CURLFile('/path/to/image.jpg');

$curl = curl_init($endpoint);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($curl, CURLOPT_POSTFIELDS, ['data' => $file]);
$response = curl_exec($curl); 
curl_close($curl);
Integrations