Docs | Quickr

Simply load images via your quickr subdomain, e.g. https://YOUR_SLUG-cdn.quickr.dev/TRANSFORMATIONS/IMAGE_URL

During beta, quickr-cdn will be available. However, create an account and use your own subdomain in production to ensure you are notified when the beta ends and avoid service disruption.

Without transformations

https://quickr-cdn.quickr.dev//IMAGE_URL

With transformations

https://quickr-cdn.quickr.dev/width=400/https://example.com/image.png

<img src="https://quickr-cdn.quickr.dev/width=500,quality=75,blur=0/https://assets.quickr.dev/example3.jpg" />

Width

Quality

Blur

Quickr uses Cloudflare and thus support the same transformations.

Please refer to the Cloudflare docs.

Use the loader prop of loader file to update the URL.

Live demo and code:

import Image from "next/image";
import ExampleImg from "./image.jpeg";

export default function Page() {
  return (
    <>
      <Image src="https://assets.quickr.dev/example2.jpeg" width={180} height={200} alt="Image loaded via URL"  />
      <br />
      <br />
      <Image src={ExampleImg} alt="Image loaded via import" width={400} />
    </>
  );
}

React

Optimize images using data attributes.

Live demo and code:

<div style="width: 400px;">
  <img data-src="image.jpeg" width="100%" />
</div>

<img
  data-src="https://assets.quickr.dev/example.jpeg"
  width="300"
  data-transformations="sharpen=2,brightness=1,contrast=1"
/>

<script src="./quickr.js" defer></script>