How to convert WebP, AVIF and SVG to PNG
Este contenido está en inglés.
WebP, AVIF and SVG are excellent formats for websites, but they are not always accepted by office programs, older image editors, email tools or upload forms. PNG is one of the most widely supported formats, and it keeps transparent backgrounds. This guide explains how each of these three formats differs, how to convert them to PNG with the WebP to PNG, AVIF to PNG and SVG to PNG tools on Valtrinity, and how to avoid the common mistakes that leave you with blurry or cut-off images.
What each format is for
WebP was introduced in 2010 as a compact format for pictures on the web. It supports both lossy and lossless compression and it can keep transparent backgrounds. Many websites now serve WebP images because they load quickly, but not every program can open them.
AVIF was introduced in 2019. It is designed to make pictures smaller still, and it also supports transparency. Support is newer than for JPG or PNG, so an AVIF file may be refused by older software even when the picture itself is fine.
SVG is different. It is a vector format, which means it stores shapes as instructions rather than a grid of pixels. An SVG can be scaled up or down without losing sharpness, but when you convert it to PNG you must choose a fixed size, because PNG is made of pixels.
- WebP: compact, supports transparency, introduced in 2010.
- AVIF: newer and compact, supports transparency, introduced in 2019.
- SVG: vector, so you choose the output width when converting to PNG.
Why PNG is usually the sensible choice
PNG is one of the oldest and most widely accepted image formats on the web. Almost every upload form, presentation program and image editor can open it. PNG is lossless, so converting to it does not add the blur that repeated JPG saves do. It also keeps transparency, which matters for logos and icons placed over other colours.
The trade-off is size. A PNG of a photograph is often larger than the WebP or AVIF it came from. For photographs, JPG may be the better target. For logos, icons, diagrams and anything with transparency, PNG is usually the right choice.
- PNG is widely accepted and lossless.
- PNG keeps transparent backgrounds.
- For photographs, consider JPG instead.
Converting WebP and AVIF to PNG
For WebP and AVIF the conversion is straightforward. Upload the file to the matching tool, choose PNG as the output and convert. Because both formats support transparency, the PNG should keep any transparent areas. Open the result on a light and a dark background to check that the edges look right.
Worked example. A logo saved as an AVIF file has a transparent background and needs to go into a presentation. Convert it to PNG, place the PNG over a dark slide and a white slide, and check there is no white halo around the edges. If there is a halo, the original file may have had a matte colour baked into it, and you may need to export the logo again from its source.
- Output PNG and check transparent areas on light and dark backgrounds.
- Look for halos around edges on logos.
- Re-export from source if the original had baked-in colour.
Converting SVG to PNG
An SVG has no fixed size, so the conversion needs a width. Pick the size at which the PNG will be used. An icon for a button might be 64 pixels wide. A logo on a website header might be 400 pixels. A printed poster needs a much larger width, so pick a width that gives you a sharp result at the size it will be shown.
Take care with text inside SVG files. Fonts are not always embedded, so text may appear in a different typeface if the font is not available during conversion. Check the text in the output against the original design.
- Pick the width you will display at, such as 64, 400 or 2000 pixels.
- Check any text in case the font has changed.
- Keep the SVG as your master file.
Common mistakes and how to avoid them
The most common mistake is converting a small PNG from a large SVG and then scaling it up. A PNG that was converted at 100 pixels wide will look blurry if it is later stretched to 800. Convert at the size you need, or keep the SVG and convert again when you need a larger version.
Another mistake is losing transparency by saving to JPG by accident. JPG has no transparency, so the background turns solid, usually white. Always choose PNG when you need a transparent result.
- Do not enlarge a small PNG; convert again at the larger width.
- Do not save transparent images as JPG.
- Keep the originals in case you need another size later.
Checking the finished PNG
Open the PNG at its real size and at a zoomed-in size. Check the edges, any text and the transparency. If the image will be used on a website, also check how it looks at the size it will be displayed. If it looks soft, reconvert at a larger width.
- Check edges and text at 100 percent and zoomed in.
- Check transparency on two background colours.
- Reconvert at a larger width if it looks soft.
Herramientas mencionadas en esta guía
WebP to PNG
Convert WebP images to PNG files, up to 20 at a time.
ImágenesAVIF to PNG
Convert AVIF images to PNG files, up to 20 at a time.
ImágenesSVG to PNG
Convert SVG vector files to PNG at any width, with a white or transparent background.
Preguntas frecuentes
Does PNG keep the transparency from WebP or AVIF?
Yes, when the original file has transparency, the PNG can keep it. Check the result on a coloured background, because some tools handle transparent edges differently.
Why does my SVG look blurry as a PNG?
The PNG was created at a fixed pixel width that is too small for the way you are using it. Convert again at a larger width, or keep the SVG and use it directly on the web where possible.
Should I convert WebP to JPG instead?
Only if the image is a photograph and you do not need transparency. JPG is smaller for photographs but cannot keep transparent backgrounds, so logos and icons should stay as PNG.
Is PNG bigger than WebP?
Usually, yes, because WebP is designed to be compact. The difference matters less for a small icon than for a large photograph, so choose the format by what the image needs rather than size alone.