By the MyToolers team at 182 AdFlow (Dubai & Lahore) · Last updated:
Why images are usually the slowest part of a page
On most small business websites — a restaurant menu, a salon gallery, a shop's product pages — the photos are by far the heaviest part of every page. Text and code are small; a single photo straight from a phone camera can weigh more than everything else on the page put together.
Visitors feel this. On mobile data, or a busy shop Wi-Fi connection, a page full of large photos loads slowly, the layout jumps around as images appear, and many people simply go back and pick another result. Google also measures how fast pages load for real visitors and treats page experience as one of the signals it considers, so a slow site can cost you both customers and visibility. Image size is also the easiest speed problem to fix, and you do not need a developer to do it.
The two things that make an image heavy
Dimensions: the width and height in pixels. Modern phones take photos around 4000 × 3000 pixels — 12 million pixels. But the space on your web page where that photo appears is often only 600 to 1,200 pixels wide. The browser downloads all 12 million pixels and then shrinks the picture to fit, so most of that download is wasted.
Compression and format: how the pixels are stored. JPG and WebP use “lossy” compression, which throws away detail the eye barely notices and makes files much smaller. PNG is “lossless”, which keeps every pixel exactly but produces much bigger files for photos.
Fix both — resize to the size you actually need, then compress — and the file size drops dramatically.
A worked example: one photo, before and after
Suppose a café takes a 4000 × 3000 photo of its signature dish and the file is 4 MB. The photo will be shown in a content area 1,200 pixels wide.
Step 1, resize: scaling the width from 4000 to 1200 keeps the same shape, so the height becomes 3000 × 1200 ÷ 4000 = 900. The new image is 1200 × 900 = 1,080,000 pixels, against 12,000,000 before — about 11 times fewer pixels to store.
Step 2, compress: saving it as WebP at around 75% quality might bring it to roughly 250 KB. The exact figure depends on the photo — busy, detailed scenes stay larger than plain backgrounds — so always check the result rather than assuming. In this example, 4,000 KB down to 250 KB is 16 times smaller.
What it means for the visitor: on a connection delivering 8 megabits per second (which is 1 megabyte per second), the original takes about 4 seconds to download and the compressed one about 0.25 seconds. A gallery page with 8 such photos goes from about 32 MB (around 32 seconds) to about 2 MB (around 2 seconds). Real-world speeds vary and add some overhead, but the difference is the same in proportion.
Step by step: preparing images for your website
1. Find out how wide each image is actually displayed. Your website theme or developer can tell you, or you can right-click the image in a desktop browser and inspect it. Common rules of thumb: around 1,600–1,920 pixels for full-width banners, about 1,200 pixels for images inside an article or page, and 400–600 pixels for product thumbnails and cards.
2. Allow for sharp phone screens. Many phones have high-density displays, so an image shown 600 pixels wide looks crisper if the file is about 1,200 pixels wide. Going beyond double the display size rarely helps.
3. Choose the format. Use WebP or JPG for photos. Use PNG for logos, screenshots and graphics with sharp text or transparent backgrounds. If your website platform does not accept WebP, JPG is a safe choice.
4. Pick a quality setting. For photos, 70–80% usually looks the same as the original to most viewers while cutting the size a lot. Compare before and after at full size; if you see blotches or blurred edges, go up a little.
5. Give files clear names before uploading, such as chicken-karahi-family-platter.webp instead of IMG_20261027_0931.jpg, and write short alt text describing each image. This helps visitors using screen readers and helps search engines understand the picture.
6. Test the page. Free tools such as Google PageSpeed Insights show whether images are still too large and which ones to fix first.
Common mistakes to avoid
Uploading photos straight from the phone or camera, at full size, “because the website will resize them”. Some platforms do create smaller copies, but many still serve the original somewhere — check rather than assume.
Saving photos as PNG. A photo saved as PNG is often several times larger than the same photo as JPG or WebP, with no visible benefit.
Compressing the same JPG again and again. Each lossy save loses a little more detail. Always start from the original photo and keep it safely as your master copy.
Using huge images for tiny spaces, such as a 3000-pixel-wide logo shown at 200 pixels in the header.
Turning quality down too far. Below about 50%, food and product photos start to look muddy, which costs more sales than a second of loading time.
Forgetting about the images in WhatsApp catalogues, email newsletters and online forms. The same rules apply there, and many forms reject files over a size limit.
Two quick wins for whoever builds your site
If you have a web developer, or your platform has these settings, ask about two simple things. First, lazy loading: images further down the page load only when the visitor scrolls near them, so the top of the page appears faster. The main banner image at the top should not be lazy-loaded, because visitors see it straight away.
Second, image width and height attributes: when the page knows each image's size in advance, it reserves the space, so text does not jump around as photos arrive. Both are standard features in modern websites and are usually just a setting or a small code change.
How the MyToolers Image Compressor helps
The free MyToolers Image Compressor & Resizer does steps 1 to 4 in one place. Choose or drag in a photo, pick JPG, WebP or PNG output, set the quality and a maximum width, and it shows the original and new file sizes side by side with a preview before you download.
It works entirely in your browser, so your photos are never uploaded to a server. Images are only ever scaled down, never enlarged, and the shape of the photo is kept. Note that converting a transparent PNG to JPG fills the transparent areas with white, and iPhone HEIC photos need converting to JPG first (or set the camera to “Most Compatible”).