Web Image Formats Explained: JPEG, PNG, WebP and AVIF

You have probably never thought about the file format of a photo on a web page, and that is exactly how it should be. When images are done right, they simply appear, crisp and instant, and you carry on. When they are done wrong, pages crawl, photos look muddy or pixelated, and visitors quietly drift away before your beautiful design even loads. The humble choice of image format sits behind much of that, deciding whether a page feels fast and polished or slow and amateurish.

The good news is you do not need a technical background to make smart choices. This guide explains the four formats you will actually encounter, JPEG, PNG, WebP, and AVIF, in plain language. We will cover what each is good at, when to reach for which, and a simple rule of thumb you can apply without ever opening a manual. By the end, a topic that sounds like jargon will feel like common sense.

Why image formats matter at all

Images are usually the heaviest thing on a web page by far. A single uncompressed photo can outweigh all of a page's text and code combined. That weight directly affects how long a page takes to load, and load time shapes whether people stay. Choosing an efficient format is one of the simplest ways to make a site feel faster without redesigning anything.

Speed is not a vanity metric. It influences how visitors feel, how long they stay, and even how search engines rank you. This connects directly to the wider topic of website speed and Core Web Vitals, where images are very often the single biggest opportunity to improve. Get your formats right and you have done a large chunk of the performance work already.

The two old reliables: JPEG and PNG

For decades, two formats did almost all the work on the web, and they are still everywhere. Understanding them is the foundation for everything that follows, because the newer formats are essentially attempts to do what these do, only better.

JPEG: the format for photographs

JPEG, sometimes written JPG, is built for photographs and other images with lots of colours and gradients, such as a sunset, a portrait, or a busy product shot. It uses what is called lossy compression, meaning it throws away tiny details the human eye barely notices in order to shrink the file. Push it too hard and you get blocky, fuzzy patches, but at a sensible quality setting JPEG gives small files that look great for photos. It cannot, however, handle transparency.

PNG: the format for graphics and transparency

PNG was designed for a different job: logos, icons, screenshots, and anything with sharp edges, text, or solid blocks of colour. It uses lossless compression, so it keeps every pixel exactly as it was, which is why a logo stays crisp. Crucially, PNG supports transparency, letting a logo sit cleanly on any background. The trade-off is size: for a full-colour photograph, a PNG is usually far larger than the equivalent JPEG, so it is the wrong tool for that job.

The modern upgrades: WebP and AVIF

JPEG and PNG were invented long ago, and technology has moved on. Two newer formats deliver noticeably smaller files at the same quality, which means faster pages with no visible downside. They are the formats most modern sites should be reaching for.

WebP: the sensible modern default

WebP, developed by Google, is a do-it-all format. It can handle photographs like a JPEG and graphics with transparency like a PNG, while producing meaningfully smaller files than either. It is now supported by essentially every current browser, which makes it a safe, practical default for most images on a typical website. If you replace your JPEGs and PNGs with WebP, you will usually see your pages get lighter immediately.

AVIF: the efficiency champion

AVIF is the newest of the four and the most efficient, often producing the smallest files of all, frequently around half the size of a comparable JPEG. Its main catch is that it can be slower to create, and while support is now very wide across modern browsers, it is marginally behind WebP. For photo-heavy pages where every kilobyte counts, AVIF is the strongest performer, ideally with a fallback in place for the rare browser that cannot read it.

A simple rule of thumb

If all of this feels like a lot to remember, here is the shortcut that covers most situations. For ordinary websites, lean on the modern formats first and keep the old ones only where they still earn their place.

Use WebP as your everyday default for most images, both photos and graphics. Reach for AVIF on image-heavy pages where speed is critical and you can put a fallback in place. Keep JPEG and PNG as safety nets for older systems or tools that do not yet handle the newer formats. And reserve PNG specifically for crisp logos and graphics with transparency where lossless quality matters. Follow that and you will rarely go wrong.

The fallback trick: serve the best each browser can read

You do not have to choose a single format and hope for the best. Modern web pages can offer several versions of an image and let each browser pick the most efficient one it understands. In practice this means a page can serve AVIF to browsers that support it, fall back to WebP for the rest, and drop to JPEG as a final safety net.

The mechanics live in the code and your designer or platform usually handles them, but the principle is worth knowing: nobody is left without an image, and everyone gets the lightest version their browser can display. Many modern platforms and content systems now do this automatically, which is one less thing to worry about. It is the same spirit as accessibility: design for everyone, and let each visitor get the best experience their setup allows.

Size and compression still matter

Picking the right format is half the battle; the other half is not uploading images far larger than they need to be. A photo saved at the dimensions of a billboard but displayed in a small thumbnail wastes enormous bandwidth, no matter how clever the format. Always resize images to roughly the size they will actually appear, then let compression do its work.

A little compression goes a long way. Dialling quality back slightly often shrinks a file dramatically while looking identical to the human eye. Combine sensible dimensions, a modern format, and a touch of compression, and even a richly visual page can stay light and quick. This discipline feeds straight into a professional-looking website that loads without testing anyone's patience.

Do not forget alt text and search

While you are tidying up images, spend a moment on the words attached to them. Every image should carry descriptive alt text, a short written description of what the image shows. It helps people using screen readers understand the picture, and it gives search engines context they cannot get from the pixels alone.

This is where good image practice quietly crosses over into being found online. Properly described, sensibly named images contribute to image SEO, helping your photos appear in image search and adding small signals of quality to the page. Choosing the right images in the first place is its own craft, covered in our guide to choosing website images that lift conversions. Treat format, size, and description as a package, and your images will look great, load fast, and pull their weight. If you would like help auditing the images slowing down your site, you can always get in touch.

Frequently asked questions

References

1. Google. "Web.dev: Choose the Right Image Format." web.dev.
2. Can I use. "Browser Support: AVIF and WebP." caniuse.com.
3. Mozilla Developer Network. "Image File Type and Format Guide." developer.mozilla.org.