Images That Don't Weigh Down Your Site: Formats, Size, and Compression to Make It Fly

When a website takes too long to load, the culprit is almost always the same: images. A single poorly prepared photo can weigh more than all the rest of the page combined. The good news is that fixing images is the easiest and fastest speed win there is, and it doesn't require rebuilding your site. Let me explain the three pillars: right format, right size, and right compression.

1. The Right Format for Each Image

Each type of image has an ideal format. Using the wrong one wastes weight:

• WebP is the modern standard format. It delivers the same quality as a regular photo with much less weight. All browsers support it today. If you can only pick one, this is it.
• JPG (or JPEG) is the classic for photographs. It works everywhere. Use it when you can't use WebP.
• PNG is only for when you need a transparent background (like a logo over a color) or images with sharp text or lines. For photos, PNG usually weighs much more than JPG or WebP, so avoid it.
• SVG is for logos, icons, and simple illustrations. It's a vector format: it weighs very little and stays sharp at any size, from mobile to a giant banner. A good icon is an SVG icon.
• AVIF is the newest, compressing even better than WebP. It's worth having as an extra option, but WebP already solves most people's problems.

Quick rule: photo goes to WebP or JPG. Logo or icon goes to SVG. Image with transparency goes to PNG or WebP.

2. The Right Size (and the Mistake Almost Everyone Makes)

This is the most common slip-up: uploading the photo exactly as it came off your phone. A modern camera generates images that are 4000 pixels wide and several megabytes. If that photo will appear in an 800-pixel space on your site, you're forcing the visitor to download five times more data than needed, just to show a smaller version.

Before uploading, resize the image to near the size it will appear. A good rule of thumb is twice the display width (to stay sharp on high-density screens, the so called "retina" displays). A photo that takes up 800 pixels on screen? Resize it to about 1600 pixels wide, not 4000.

3. The Right Compression (Quality Your Eye Won't Notice Dropping)

Every image can be compressed, meaning you throw away information the human eye doesn't even perceive. The trick: at 70% to 80% quality, the photo still looks great and weighs a fraction of the original. The visual difference is practically zero; the weight difference is huge.

Free tools for this, no installation needed:

• Squoosh (from Google itself): you drag in the image, see the before and after side by side, and adjust quality until it's just right. It also converts to WebP right there.
• TinyPNG: compresses PNG and JPG with one click.

Compressing a heavy photo gallery alone can cut load time in half.

Two Details That Prevent Headaches

• Lazy loading. Images further down the page only need to load when the person scrolls to them. This makes the first screen appear much faster. Modern sites already do this when built well.
• Reserve space for the image. If the image doesn't have a defined size, the content "jumps" when it loads, that annoying feeling of a button moving right when you're about to click. An image with defined dimensions doesn't cause that jump (Google measures this in the so called Core Web Vitals).

How to Know If It's Still Heavy

Open Google PageSpeed Insights, paste your site's address, and look at the mobile score. If there's a heavy image, it points out exactly which one and how much you can save. It's a treasure map for speed.

Light images mean money: a fast site keeps more visitors, and a slow site loses sales. Want to know how fast yours loads and what's weighing it down? Start the builder on stau.io, answer a short quiz, and watch the site build itself in about 3 minutes. The preview is free and lives for 7 days.