Project 95, SEO and site tools
Responsive Image Maker
Big photos slow sites down. Turn one image into small, medium and large versions in modern formats, and get the code that lets each device pick the right one.
- Main API
- createImageBitmap
- Export
- canvas.toBlob
- Dependencies
- None
- Your browser
- Checking
Make responsive images
Use the sample photo or drop in your own. Pick widths, format and quality, then download the files and copy the code.
Loading the sample photo...
Widths
| File | Size | Saved | |
|---|---|---|---|
| Press Make images to start. | |||
How it works
- Decode oncecreateImageBitmap decodes the photo a single time. Every size is then drawn from that bitmap onto a canvas of the right width.
- Encode to modern formatscanvas.toBlob saves each size as WebP, JPEG or AVIF at the quality you choose, and the file sizes are shown so you can compare.
- Let the browser chooseThe srcset and sizes code lists every file with its width. Each device then downloads only the size it needs.
const bitmap = await createImageBitmap(file);
for (const w of [400, 800, 1200]) {
const c = document.createElement("canvas");
c.width = w; c.height = Math.round(bitmap.height * w / bitmap.width);
c.getContext("2d").drawImage(bitmap, 0, 0, c.width, c.height);
const blob = await new Promise((r) => c.toBlob(r, "image/webp", 0.75));
}
// <img srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
// sizes="(max-width: 700px) 100vw, 700px">