Optimize an image for the web
Resize, convert to WebP and compress an image.
What does this template do?
Resize, convert to WebP and compress an image.
This template prepares an image for a web page: it brings it down to a reasonable width, then encodes it as WebP with adjustable quality. The file is often much lighter than a camera photo or a PNG screenshot, which speeds up page loading.
Pipeline steps
This template automatically chains 4 steps in the Workspace. You can review every setting before running it.
- 1Import an image
- 2Resize the image
- 3Convert and compress
- 4Download the image
Why the steps come in this order
Resizing comes before conversion: the encoder then compresses the image at its final size, which is faster and gives a better file size than compressing first and shrinking afterwards.
When should you use this template?
- Publish a 4,000-pixel-wide photo in a blog post.
- Lighten a PNG screenshot before adding it to documentation.
- Prepare a product image for an online shop.
Local processing in your browser
When the selected modules support local processing, your files stay on your device while the Pipeline runs.
Settings to check
- Width: 1,600 px by default, height calculated to keep the proportions.
- Format: WebP by default, JPEG or PNG as alternatives; quality 82 out of 100.
- Fit: “Contain” by default; “Cover” crops to fill an exact width and height.
Example
- Before
- 4,032 × 3,024 px JPEG photo, 3.8 MB.
- After
- 1,600 × 1,200 px WebP, usually a few hundred kilobytes depending on the subject.
Limits to know
- An image narrower than the requested width is enlarged and therefore less sharp: lower the width for such images.
- PNG ignores the quality setting: it stays lossless and is often heavy for a photo.
- The final size depends on the content: a very detailed image stays heavier than flat colours.