How to Convert PNG and JPEG Images to WebP or AVIF

Converting PNG and JPEG images to WebP or AVIF can reduce the bytes delivered by a website while preserving an acceptable visual result. The best format depends on the image, transparency requirements, browser support, and the quality setting. A DAM makes the process repeatable by keeping one managed source and generating the required delivery format from its URL.

Stashr supports explicit WebP, AVIF, JPEG, and PNG image output. It does not automatically choose a format for the browser, so developers remain in control of the URL and fallback strategy.

PNG, JPEG, WebP, and AVIF in brief

Google's guide to choosing the right image format recommends matching the format to the visual and functional requirements. WebP and AVIF generally compress raster imagery more efficiently than older formats, but “newest” is not automatically “best” for every source.

Start with a suitable source image

Format conversion cannot restore detail that is already missing. Keep a source image large enough for the biggest intended presentation and visually clean enough to survive another encoding step.

For photographs, a high-quality JPEG, PNG, or lossless source may be appropriate. For flat graphics or screenshots, inspect small text, edges, gradients, and transparency carefully. If the artwork is truly vector, SVG may remain the better source and should not be converted merely to make every asset use the same extension.

Stashr can optimize an image during upload. Workspace settings define WebP quality, maximum dimensions, output format, and whether original images are retained. An individual upload can override the keep-original choice.

Upload optimization and URL transforms are separate:

• upload optimization decides what Stashr stores;
• URL transforms decide what Stashr returns for one request;
• a transform does not modify the stored asset or create another library entry.

That distinction prevents a collection from filling with manually named copies for every width and format.

Convert an image with a Stashr delivery URL

Start with the deliveryUrl returned by an upload or asset response. Do not build the optimized filename yourself.

Given this asset:

https://stashr.dev/acme/website/brand/hero.optimized.webp

Request WebP output at 1200 pixels wide:

https://stashr.dev/acme/website/brand/hero.optimized.webp?w=1200&format=webp&q=82

Request AVIF output:

https://stashr.dev/acme/website/brand/hero.optimized.webp?w=1200&format=avif&q=80

Request a JPEG preview:

https://stashr.dev/acme/website/brand/hero.optimized.webp?w=1600&format=jpeg&q=90

The source asset's extension does not need to match the requested delivery format. The format parameter controls the response.

Supported parameters

Stashr accepts the following short query parameters:

The long names width, height, and quality are not aliases. Stashr also does not enlarge an image beyond its source dimensions.

Transforms work only for image assets. Adding image parameters to PDFs, video, audio, or other files returns an error rather than pretending the transformation succeeded.

Width, height, and fit

Supplying only w or only h preserves the image's aspect ratio. This is useful for responsive cards and content images.

When both dimensions are present, fit determines how the source relates to the requested box.

Cover

cover fills the box and may crop the image. It is useful for cards and fixed-ratio thumbnails.

?w=640&h=360&fit=cover&format=webp&q=80

Contain

contain keeps the whole image inside the requested box. It is useful for product shots, diagrams, and artwork that must not be cropped.

?w=800&h=600&fit=contain&format=webp&q=82

Inside and outside

inside keeps the result within both limits. outside scales so both limits are met or exceeded. These modes help when dimensions are boundaries rather than a fixed frame.

Fill

fill forces the requested dimensions and can change the aspect ratio. Use it only when distortion is intentional.

Choosing a quality value

Quality is not a percentage of objective accuracy. It is an encoder setting that trades visual detail for byte size.

A useful process is:

1. Choose the real display dimensions.
2. Start near the Stashr default of 82.
3. Inspect the result at normal size and on a high-density display.
4. Check gradients, hair, foliage, text, and high-contrast edges.
5. Compare transferred bytes, not only the extension.
6. Adjust for that class of image rather than chasing one universal value.

Logos and UI screenshots may need a higher quality value or a lossless-friendly format. Large photographic backgrounds may tolerate more compression. Social images containing text deserve careful visual inspection.

Use picture for format fallbacks

Stashr uses explicit formats rather than automatic content negotiation. The HTML picture element lets the browser select the first supported source:

<picture>
  <source
    type="image/avif"
    srcset="https://stashr.dev/acme/website/brand/hero.webp?w=1200&format=avif&q=80"
  />
  <source
    type="image/webp"
    srcset="https://stashr.dev/acme/website/brand/hero.webp?w=1200&format=webp&q=82"
  />
  <img
    src="https://stashr.dev/acme/website/brand/hero.webp?w=1200&format=jpeg&q=88"
    alt="Product dashboard"
    width="1200"
    height="630"
  />
</picture>

Always keep meaningful alt text in the page markup. Asset-library alt text is useful metadata, but the final alt should describe the image's purpose in its page context.

For multiple responsive widths, continue with the srcset and DAM guide.

Avoid storing every conversion manually

A folder containing hero.png, hero.webp, hero-small.webp, hero-small.avif, hero-card.jpg, and hero-final-2.png is difficult to govern. A developer must know which copies are sources, which are derived, and which are still used.

With URL transforms, one managed asset can support multiple delivery presentations. The requested URL documents the decision where the image is used.

There are still reasons to store a distinct file:

• the crop is art-directed rather than mechanical;
• the image contains different creative content;
• a channel requires a fixed export that must be reviewed;
• the derived result is not supported by the transform surface.

Do not use transforms to hide genuinely different assets under one source.

Delivery and usage implications

Every distinct transformed URL can be used directly in HTML, CSS, email, or another public client. Transformed responses count toward the workspace's delivery allowance. They do not consume extra stored-asset entries.

Delivery URLs are public and unlisted. Anyone with the URL can request the asset. Stashr does not currently provide signed delivery URLs, custom delivery domains, automatic format selection, or a private rendition workflow.

Review current storage and delivery allowances at Stashr pricing, and monitor real usage in the dashboard.

A repeatable conversion workflow

Use this checklist for each image class:

• upload a suitable source into the correct project and folder;
• store the returned delivery URL;
• choose display dimensions before choosing format;
• compare WebP and AVIF visually;
• use picture where a fallback is required;
• add responsive widths with srcset;
• preserve a real alternative description in page markup;
• monitor delivered bytes and adjust quality deliberately;
• keep separate assets only for meaningful creative differences.

The goal is not to convert every image to the same format. It is to make format and size choices repeatable without multiplying files.

Explore the complete image-transform reference, read how a DAM supports developer workflows, or start a Stashr workspace and test the URLs with your own images.