A Guide to Image Types and Which One You Should Be Using

JPG

JPG is the format most photos get saved as, and it's the default for cameras and phones alike. It compresses well, which keeps file sizes down, but that compression comes at a cost. Every time a JPG is saved or re-saved, it loses a little bit of quality, and that loss adds up if a file gets edited and exported more than once. JPGs also don't support transparency, so if you need a see-through background behind a logo or graphic, this isn't the format for the job, no matter how many times you try to force it.

PNG

PNG is the go-to when you need a transparent background, like a logo that needs to sit cleanly on top of different colored sections of a page. Unlike JPG, PNG doesn't lose quality each time it's saved, which makes it a safer choice for graphics and text-heavy images. That quality comes at a cost, though. A PNG of a photo can end up several times larger than the same photo saved as a JPG, and using PNG for every image on a site is one of the more common ways a page ends up loading slower than it should.

GIF

GIFs are best known for simple animations, and they're still a reasonable choice for that kind of content, like a short looping graphic or a small icon that moves. Outside of animation, GIFs fall short pretty fast. They only support a small color range, which makes them a poor choice for photos or anything with subtle color gradients, and file sizes can climb quickly once you start adding more frames to an animation.

WebP

WebP was built to fix the tradeoffs baked into the other three formats. It compresses smaller than JPG without the same visible quality loss, it supports transparency the way PNG does, and it supports animation the way GIF does, all in a single format. It's newer than the others, so it took a while to catch on, but browser support is strong at this point across every major browser. For most photos and images on a modern website, it's the safest default to reach for. Google has its own breakdown of how the WebP format works if you want to get into the technical side of it.

SVG

SVG is different from every format above it, since it's not made up of pixels at all. It's a vector image format, which means it's built from math and shapes instead of a fixed grid of pixels, so it can scale up or down to any size without ever getting blurry or pixelated. That makes SVG the best choice for logos, icons, and other graphics and illustrations, though it's not a fit for photos, since a photo can't be described as clean shapes and lines the way a logo can. SVG files also tend to be very small, which is another point in their favor for site speed.

HEIC and HEIF

HEIC and HEIF are the default formats modern iPhones save photos in. They compress well and hold onto more detail than a JPG at a similar file size, which is why Apple switched to them in the first place. The problem is compatibility. A lot of websites, older devices, and some Windows programs still don't open these files correctly, or don't open them at all. If a client emails over photos straight from their phone for a website update, there's a good chance those files are landing in one of these formats without anyone realizing it until something breaks.

RAW and ProRAW

RAW files come from dedicated cameras, and ProRAW is Apple's version of the same idea, available on newer iPhones for anyone who wants more control over editing. These are massive, uncompressed files meant to preserve every bit of detail for editing later, not for publishing as is. A single RAW photo can easily run well over 20MB, sometimes much more depending on the camera. They're great to have on hand if you plan to edit a photo before it goes anywhere near a website, but they were never meant to be uploaded to a page in their original form.

TIFF

TIFF shows up most often from scanners and some design software, and it's common in print work for exactly the same reason RAW is common in photography. Like RAW, it's an uncompressed format that prioritizes quality over file size, which makes it a poor fit for the web even though it's a perfectly reasonable format for print or long-term archiving.

Why These Should Be Resaved as WebP

None of these image types were built with website performance in mind, and that's the whole issue. HEIC and HEIF run into compatibility problems, and RAW and TIFF files are simply too large to upload directly without slowing a page down significantly. Before any of these end up on a website, they should be opened, edited if needed, and exported as WebP. That extra step gets you a file that's small enough to load quickly, works consistently across every browser, and still looks sharp at the size it's actually displayed on the page.

Why WebP Is Usually the Better Choice

Once you understand what WebP does differently, it's easier to see why it's become the default recommendation for most website image types. The advantages aren't just about file size, though that's the biggest one. It's really about not having to choose between quality, features, and performance the way older image types force you to.

Smaller File Sizes Without Losing Quality

The biggest advantage of WebP is that it can save an image at a much smaller file size without a noticeable drop in quality compared to JPG. In practice, that often means cutting an image's file size by half or more while it still looks just as sharp to a visitor scrolling through a page. That difference means faster page loads, which matters both for how a visitor experiences a site and for how Google ranks it. Google's own web performance guidance recommends switching to WebP for exactly this reason.

Animation and Transparency in One Format

Instead of juggling a GIF for animation and a separate PNG for transparency, WebP handles both inside a single format. That means one less decision to make when you're prepping images for a page, and one less format to keep track of across a site's media library.

Smaller Files Mean Less Server Space

Because WebP files are smaller across the board, they take up less room on your server than the same images saved as JPG or PNG. This adds up fast on sites with a lot of product photos, blog images, or galleries, where hundreds of images can turn into a meaningful chunk of storage. Switching to WebP is one of the easier wins if a hosting plan is getting tight on space.

Smaller Files Mean Less Server Space

Picking the right format only solves half the problem. The other half is resolution, and it gets overlooked just as often. Even a WebP file can end up unnecessarily large if it's saved bigger than it ever needs to display.

Match the File to the Space It Fills

This is the part that gets skipped more than anything else. Before you save an image for a website, check how wide the space on the page actually is. If an image is only ever going to display at 300px wide, there's no reason to save it at 2000px wide. That extra resolution doesn't add any visible quality once it's shrunk down in a browser, it just adds load time and takes up server space that didn't need to be used in the first place.

Why This Gets Overlooked

Most of the oversized images we run into weren't a deliberate choice so much as a default nobody thought to change. Cameras and phones save photos at their maximum resolution automatically, and it's easy to upload that file straight to a website without resizing it first, especially when the image looks fine on screen either way. Getting in the habit of checking an image's actual display size before you upload it is a small step, but it makes a real difference over time, especially across a site with dozens or hundreds of images.