Your images weigh more than the rest of the site

Open almost any slow website and look at what the page is made of, and the picture is similar: code, fonts and styles are a small share, and most of the weight is images. Especially on sites where the picture does the selling: real estate, interiors, architecture, manufacturing.

A residential development site is unthinkable without large renderings, photos of the courtyard and floor plans. There’s no need to give them up. They need to be prepared so that visitors see the quality instead of waiting for it to load.

Where heavy images come from

Usually it’s a chain of decisions that each seem reasonable. The visualization studio sends renders at a huge resolution meant for print. The photographer hands over camera originals. The content manager uploads them as is, because “that’s higher quality.” The content management system doesn’t compress them, or does it badly.

The result: a phone downloads an image big enough for a billboard. The visitor can’t see any difference in quality, but they can feel the difference in speed.

The opposite happens too: images compressed so hard that a rendering breaks into blurry blotches and the sky shows banding. For real estate that’s a loss as well: buyers judge a project by its images, and a muddy picture works against sales.

Size for the screen, not for print

Rule one: an image should be the size it will be displayed at. If a photo takes up half a laptop screen, there’s no point loading a version sized for a large monitor.

But everyone’s screen is different. So the right setup is several versions of the same image: a small one for phones, a medium one for laptops, a large one for wide, high-density screens. The browser picks the right one on its own. None of this has to be done by hand: a well-built site generates the versions automatically when the file is uploaded.

This matters most on the first screen. A wide banner on a phone is usually cropped to a narrow strip, so it makes sense to prepare a separate vertical crop for it rather than just a smaller copy.

Format matters

Good old JPEG and PNG still work everywhere, but there are newer formats, WebP and AVIF. At the same visible quality they weigh noticeably less. Current browsers support them, and older ones can get a fallback.

In short, what to use for what:

• photos and renders: WebP or AVIF;
• logos and icons: SVG, a vector format;
• PNG: only when you need transparency and vector won’t do;
• animated GIFs: better replaced with a short video.

Floor plans are a story of their own. They’re often uploaded as huge raster images, even though a drawing made of lines and labels works well as a vector: the file is light and stays sharp at any zoom level.

Don’t load everything at once

A long residential development page can hold dozens of images: gallery, construction progress, neighborhood amenities, floor plans. A visitor looking at the first screen can’t see them. There’s no point loading photos from the bottom of the page before the visitor gets there.

Lazy loading solves this: images load when the visitor is a short scroll away. The main image on the first screen is the opposite: it should load first, because it largely decides how fast the site feels. Same with galleries and sliders: while the visitor looks at the first slide, the rest don’t need to load. Preparing the next one is enough to keep swiping smooth.

One more detail: every image should have its space reserved on the page in advance. Otherwise the text renders first and then jumps when the image arrives.

How not to undo it all after launch

Even if everything is set up correctly during development, six months later new heavy images can appear on the site: a promo banner, fresh construction photos. So the site should process uploads on its own, resizing, compressing and generating the right versions, instead of relying on every employee remembering the rules. Every few months it’s also worth checking the most visited pages: how much they weigh and whether anything unexpected has crept in, like a video embedded at its original quality.

Image quality is judged by the visitor’s eye, not by file size. Anything beyond what the screen can show is just waiting.

If a site full of beautiful renderings takes longer to load than you’d like, we can look at how much its pages really weigh and what can be made lighter without sacrificing quality.