Many visitors open your site on mobile data with a limited bundle or a weak signal in a shopping mall or on the road. A page with several large photos can feel broken to them, and they leave before it finishes.
The good news is that image problems are the easiest speed problems to fix, and you can fix them by chat.
Images are usually the heaviest part of a page. Resize them to the size they are shown at, use WebP or another modern format, and load the ones below the first screen lazily.
Resize before you upload
A photo straight from a phone camera can be several megabytes and thousands of pixels wide, yet it is shown in a box a few hundred pixels wide. A good rule is to make the file about twice the display width for sharp screens, and no more.
- Full-width hero image: around 1600 to 2000 pixels wide is plenty.
- Cards and product thumbnails: 600 to 800 pixels wide.
- Logos and icons: use SVG, which stays sharp and tiny.
Pick the right format
WebP (and AVIF where supported) usually gives much smaller files than JPEG or PNG at similar quality. Keep JPEG for photos as a fallback, and avoid PNG for photos because it is large. Quality around 75 to 80 percent is normally invisible to the eye.
Load smartly
Images below the first screen should load only when the visitor scrolls near them (lazy loading). The main image at the top should load right away, not lazily, because it is what people see first.
Also set a width and height, or a fixed aspect ratio, on every image so the page does not jump while images arrive.
A prompt you can paste
"Optimize all images on this site for mobile data. Convert photos to WebP, resize each to no more than twice the size it is displayed at, lazy-load everything below the first screen but not the hero image, set fixed aspect ratios so nothing jumps, and add short descriptive alt text."
After the change, open the site on your phone with Wi-Fi turned off and compare how fast the first screen appears.