Integration

This guide demonstrates how to integrate Snapkit with various programming languages and frameworks.

Usage Examples

Below are code samples showing how to optimize and display Snapkit images in different environments.
The examples use the .avif format for optimized images, but you can also use .webp, .progressive.jpeg, or other available formats.
The best format for your use case may vary. For more information, see the image formats guide.

Next.js


// Checkout https://nextjs.org/docs/pages/api-reference/components/image#loaderfile
// next.config.js
module.exports = {
  images: {
    loader: "custom",
    loaderFile: "./my/image/loader.js",
  },
};
 
// my/image/loader.js
export default function myImageLoader({ src, width }) {
  const url = new URL(
    `https://cdn.snapkit.studio/<your-organization>/image${src}`
  );
  url.searchParams.set("w", width.toString());
 
  return url.href;
}
 
// Example.tsx
import Image from "next/image";
 
function Example() {
  const src = "/original/HN1QWZh9/806x605/sleepy-dog.jpeg";
  const optimizedSrc = src
    .replace(/\/original\//, "/gen/")
    .replace(/\.[^./]+$/, ".avif");
 
  const placeholderURL = src
    .replace(/\/original\//, "/gen/")
    .replace(/\.[^./]+$/, ".blurhash.png");
 
  return (
    <Image
      src={optimizedSrc}
      width={806}
      height={605}
      style={{
        backgroundImage: `url('${placeholderURL}')`,
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
    />
  );
}
 
export default Example;

React


function ImageExample({ width, height }) {
  const src =
    "https://cdn.snapkit.studio/snapkit/image/original/HN1QWZh9/806x605/sleepy-dog.jpeg";
  const optimizedSrc = src
    .replace(/\/original\//, "/gen/")
    .replace(/\.[^./]+$/, ".avif");
  const placeholderURL = src
    .replace(/\/original\//, "/gen/")
    .replace(/\.[^./]+$/, ".blurhash.png");
  const dpr = window.devicePixelRatio;
  const imageUrl = `${optimizedSrc}?w=${width * dpr}&h=${height * dpr}`;
 
return (
 
<img
  src={optimizedSrc}
  width={width}
  height={height}
  style={{
    backgroundImage: `url('${placeholderURL}')`,
    backgroundSize: "cover",
    backgroundPosition: "center",
  }}
  alt="Example Image"
/>
); }
 
export default ImageExample;

Angular


// app.component.ts
import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-image-example',
  templateUrl: './app-image-example.component.html',
  styleUrls: ['./app-image-example.component.css']
})
export class AppImageExampleComponent {
  @Input() width!: number;
  @Input() height!: number;
  src = "https://cdn.snapkit.studio/snapkit/image/original/HN1QWZh9/806x605/sleepy-dog.jpeg";
  dpr = window.devicePixelRatio;
  get optimizedSrc() {
    return this.src.replace(/\/original\//, '/gen/').replace(/\.[^./]+$/, '.avif');
  }
  get placeholderURL() {
    return this.src.replace(/\/original\//, '/gen/').replace(/\.[^./]+$/, '.blurhash.png');
  }
  get imageUrl() {
    return `${this.optimizedSrc}?w=${this.width * this.dpr}&h=${this.height * this.dpr}`;
  }
  get placeholderStyle() {
    return {
      'background-image': `url('${this.placeholderURL}')`,
      'background-size': 'cover',
      'background-position': 'center'
    };
  }
}
 
<!-- app-image-example.component.html -->
<img
  [src]="optimizedSrc"
  [width]="width"
  [height]="height"
  [ngStyle]="placeholderStyle"
  alt="Example Image"
/>

Vue


<template>
  <img
    :src="optimizedSrc"
    :width="width"
    :height="height"
    :style="placeholderStyle"
    alt="Example Image"
  />
</template>
 
<script setup>
const props = defineProps({
  width: Number,
  height: Number,
});
const src =
  "https://cdn.snapkit.studio/snapkit/image/original/HN1QWZh9/806x605/sleepy-dog.jpeg";
const dpr = window.devicePixelRatio;
const optimizedSrc = src
  .replace(/\/original\//, "/gen/")
  .replace(/\.[^./]+$/, ".avif");
const placeholderURL = src
  .replace(/\/original\//, "/gen/")
  .replace(/\.[^./]+$/, ".blurhash.png");
const imageUrl = `${optimizedSrc}?w=${props.width * dpr}&h=${props.height * dpr}`;
const placeholderStyle = {
  backgroundImage: `url('${placeholderURL}')`,
  backgroundSize: "cover",
  backgroundPosition: "center",
};
</script>

Svelte


<script>
  export let width;
  export let height;
  let src = "https://cdn.snapkit.studio/snapkit/image/original/HN1QWZh9/806x605/sleepy-dog.jpeg";
  let dpr = window.devicePixelRatio;
  let optimizedSrc = src.replace(/\/original\//, '/gen/').replace(/\.[^./]+$/, '.avif');
  let placeholderURL = src.replace(/\/original\//, '/gen/').replace(/\.[^./]+$/, '.blurhash.png');
  $: imageUrl = `${optimizedSrc}?w=${width * dpr}&h=${height * dpr}`;
  $: placeholderStyle = `
    background-image: url('${placeholderURL}');
    background-size: cover;
    background-position: center;
  `;
</script>
 
<img
  src={optimizedSrc}
  {width}
  {height}
  style={placeholderStyle}
  alt="Example Image"
/>

Vanilla


<script>
  function renderSnapkitImage(width, height) {
    const src =
      "https://cdn.snapkit.studio/snapkit/image/original/HN1QWZh9/806x605/sleepy-dog.jpeg";
    const dpr = window.devicePixelRatio;
    const optimizedSrc = src
      .replace(/\/original\//, "/gen/")
      .replace(/\.[^./]+$/, ".avif");
    const placeholderURL = src
      .replace(/\/original\//, "/gen/")
      .replace(/\.[^./]+$/, ".blurhash.png");
    const imageUrl = `${optimizedSrc}?w=${width * dpr}&h=${height * dpr}`;
    const img = document.getElementById("snapkit-img");
    img.src = optimizedSrc;
    img.width = width;
    img.height = height;
    img.style.backgroundImage = `url('${placeholderURL}')`;
    img.style.backgroundSize = 'cover';
    img.style.backgroundPosition = 'center';
  }
</script>
 
<img
  src=""
  width=""
  height=""
  style="background-image: url(''); background-size: cover; background-position: center;"
  alt="Example Image"
  id="snapkit-img"
/>

iOS


func makeSnapkitImageView(width: Int, height: Int) -> UIImageView {
    let src = "https://cdn.snapkit.studio/snapkit/image/original/HN1QWZh9/806x605/sleepy-dog.jpeg"
    let dpr = UIScreen.main.scale
    let optimizedSrc = src
      .replacingOccurrences(of: "/original/", with: "/gen/")
      .replacingOccurrences(of: ".jpeg", with: ".avif")
    let placeholderUrl = src
      .replacingOccurrences(of: "/original/", with: "/gen/")
      .replacingOccurrences(of: ".jpeg", with: ".blurhash.png")
    let imageUrl = "\(optimizedSrc)?w=\(Int(Double(width) * dpr))&h=\(Int(Double(height) * dpr))"
    let imageView = UIImageView()
    imageView.frame = CGRect(x: 0, y: 0, width: width, height: height)
    imageView.contentMode = .scaleAspectFill
    imageView.backgroundColor = UIColor(
      patternImage: UIImage(data: try! Data(contentsOf: URL(string: placeholderUrl)!))!
    )
    DispatchQueue.global().async {
      if let data = try? Data(contentsOf: URL(string: imageUrl)!) {
        DispatchQueue.main.async {
          imageView.image = UIImage(data: data)
        }
      }
    }
    return imageView
}

Android


fun loadSnapkitImage(context: Context, imageView: ImageView, width: Int, height: Int) {
  val src = "https://cdn.snapkit.studio/snapkit/image/original/HN1QWZh9/806x605/sleepy-dog.jpeg"
  val dpr = context.resources.displayMetrics.density
  val optimizedSrc = src.replace("/original/", "/gen/").replace(Regex("\\.[^./]+$"), ".avif")
  val placeholderUrl = src.replace("/original/", "/gen/").replace(Regex("\\.[^./]+$"), ".blurhash.png")
  val imageUrl = "$optimizedSrc?w=${'$'}{(width * dpr).toInt()}&h=${'$'}{(height * dpr).toInt()}"
  Glide.with(context)
      .load(optimizedSrc)
      .placeholder(
          Drawable.createFromStream(
              URL(placeholderUrl).openStream(), "blur"
          )
      )
      .into(imageView)
}

dpr
- dpr stands for device pixel ratio, which represents the ratio of physical pixels to logical pixels on a device.
- Using dpr ensures your images are displayed at the correct resolution for each device.
- If you omit dpr, images may appear blurry or load slowly on high-resolution screens.
placeholderURL
- placeholderURL is the URL for a low-quality placeholder image.
- This placeholder is displayed while the main image is loading, improving perceived performance and user experience.
- For more details, see the placeholder image documentation.

Note: The logic for generating placeholderURL from the original image URL is provided as an example. You can construct these URLs directly without making additional HTTP requests.