Academy › Build › Create your website

The hidden weight in every photo

You'll come away knowing how big each photo file should be (not how it looks on screen) and which format to save it in, so your site loads fast without giving up the photos.

By Yodai · Published September 6, 2026 · Updated October 12, 2026

If your website takes forever to load on a phone with two bars of signal, it's time to look at what's weighing it down so much. You upload the photo of the dish, the haircut, the shop you just painted. On your own phone it opens instantly and looks perfect. On your website, that same photo takes three or four seconds to show up, and by then a lot of customers are already gone: according to Google data published in 2017, 53% of people who visit a website on mobile abandon it if it takes more than three seconds to load.

It's not the photo's fault. The problem is you're mixing up two things that have nothing to do with each other: how big the photo looks on screen, and how much the file weighs that the customer's phone has to download in full to see it. A photo can look tiny on your website and still weigh a ton, because nobody's touched it since it came out of the camera. As Google's web.dev image performance guide explains, a square 1,000-pixel image shown in a 500-pixel slot is, not even counting factors like screen density, twice as big as it needs to be.

What you see and what it weighs aren't the same thing

A photo straight out of a modern phone weighs, untouched, thousands of kilobytes (KB, the unit used to measure how much space a file takes up). Apple, for example, explains that on the iPhone a 12-megapixel RAW photo (ProRAW) takes up about 25 MB, and that regular photos (HEIF or JPEG) take up 10 to 12 times less. Do the math: about 2,000 to 2,500 KB per photo. And on its recent Pro models, the standard HEIF format now reaches up to 24 megapixels, double those 12-megapixel photos, so the file can weigh quite a bit more. On the web, images weigh much less: according to the HTTP Archive's Web Almanac 2025, which analyzes millions of websites, nine out of ten images loaded on mobile weigh 186 KB or less, and three out of four weigh 52 KB or less. That's why here we use about 200 KB as the benchmark for a cover photo, roughly ten times less than the original, and about 50 KB for a catalog thumbnail.

You can't see that difference by looking at the photo. You feel it in how long it takes to load: according to that same Google document, 1.49 MB (about 1,500 KB) takes seven seconds to load on a fast 3G connection, and a single untouched photo already weighs more than that. And it adds up for every photo on the page: a service page with six untouched photos adds up to 12,000 KB or more in images alone. The same page, with photos prepped before uploading, comes in under 1,500 KB. To put that in perspective, Lighthouse's documentation, Google's tool for measuring website speed, recommends that the whole page not exceed 1,600 KiB (about 1,640 KB) and flags pages that go over 5,000 KiB. That difference is what decides whether the customer waits or leaves.

What to do before you upload each photo

JPEG or PNG: the decision that carries weight too

Besides weight, there's format: the extension you save the file as. Here the mistake is saving everything as PNG because 'it looks better,' without knowing that, as web.dev's image formats guide explains, PNG almost always produces oversized files compared to other web-friendly formats and is almost never the right choice for a photo, while a well-compressed JPEG looks practically the same on screen. The difference between the two isn't in the quality you see, it's in what each one was built for. And if your software lets you save photos as WebP, a more modern format, even better: that same Lighthouse documentation recommends using WebP instead of JPEG or PNG for images.

Let's take a photo straight off a modern phone, untouched, and follow it step by step until it's ready for the site. In this example, here's what the file size drops to at each stage, with almost no visible change:

Notice where the big jump happens: it's not the final compression, it's the resizing. Going from 4,500 KB to 800 KB just by removing pixels nobody sees already brings the photo down to less than a fifth of its size. JPEG compression does the rest, and between that 800 KB and the final 180, you can barely tell the difference on screen. Order matters: if you compress before resizing, you're compressing information you're going to throw away anyway.

Now you know how much each photo should weigh and what format to save it in before uploading. There's one piece left that usually weighs a lot more than a well-prepped photo, and that comes with its own rules: video, which the next lesson covers.

With your photos down to a reasonable size, there's one bigger suspect left: that fifteen-second video you put on the cover. On home pages opened on mobile, a typical video file weighs 12 to 20 times as much as a typical JPEG photo, according to that same Web Almanac 2025, and the next lesson decides whether it stays or becomes just another image.

In Yodai every site goes live with its padlock, its sitemap and its titles, with nothing to buy or set up. See what the hosting included with your website covers.