How to Make Images Load Faster on Your Website

By Utivaro Team · Published October 3, 2026

Resize each image to about twice the width it's displayed at, save photos as WebP at quality 75–85, and lazy-load everything below the first screen. In our test, format and quality alone cut a photo by 64–74%, and six blog photos went from about 18 MB to 125 KB.

Why images slow pages down

On most websites, images are the heaviest part of the page. A photo copied straight from a phone is often 2–5 MB and 4000 pixels wide, yet it's displayed in a column 700–800 pixels wide. The browser downloads every one of those pixels, then throws most of them away. On a mobile connection that's the difference between a page that appears instantly and one that visitors leave before it loads.

Four changes fix most of the problem: the right dimensions, a modern format, sensible quality, and loading only what's on screen.

What each change saves: measured

We took one real photo (an indoor shot) and saved it at different widths, first as JPG at quality 92, a common default, then as WebP at quality 75, using Chrome's own canvas encoder. Sizes are in KB.

Width (px)	JPG, quality 92	WebP, quality 75	Saving
1024	103	26.5	74%
800	75.6	20.8	72%
640	51.4	16.3	68%
400	23.9	8.7	64%

Switching format and quality alone cut the file by roughly two-thirds to three-quarters, and the WebP at quality 75 is hard to tell apart on a screen. Detailed photos save less: a busy street scene we tested at 640 px went from 212 KB (JPG 92) to 100 KB (WebP 75), a 53% saving.

What that means for a whole page

Take a blog post with six photos, on a connection delivering 10 Mbit/s:

How the photos were added	Total size	Download time at 10 Mbit/s
Straight from a phone, about 3 MB each	about 18 MB	about 15 seconds
Resized to 1024 px, JPG quality 92	618 KB	about 0.5 seconds
Resized to 800 px, WebP quality 75	125 KB	about 0.1 seconds

Real connections add delays for each request, so actual load times are longer, but the proportions hold.

Step 1: resize to the size you display

Find how wide the image appears on your page. On a typical blog, the content column is 650–800 CSS pixels wide. Phones and many laptops have high-density screens that draw 2–3 device pixels per CSS pixel, so an image needs more pixels than its CSS width to look sharp, but not thousands more.

Where the image appears	Sensible width to upload
Full-width hero or banner	1600–1920 px
Article or blog content image	1200–1600 px
Half-width image or card	800 px
Thumbnail or avatar	2× its displayed size, e.g. 160 px for 80 px

Use the Image Resizer with Keep aspect ratio on, and type only the width.

Step 2: use WebP

WebP is supported by every current major browser and is usually much smaller than JPG at the same visual quality. Convert existing photos with JPG to WebP, or export WebP directly from the Image Resizer. Keep PNG for logos and screenshots with text, or use lossless WebP. For when each format fits, see JPG vs PNG vs WebP.

Step 3: pick a sensible quality

For photos on the web, quality 75–85 is usually indistinguishable from 92 on screen. Check a few images at full size: if you see blocky patches in skies or smudges around text, go up 5 points. Don't use quality to shrink an image that's simply too large; reduce the dimensions first.

Step 4: write the image tag properly

A few attributes make a big difference to how the page loads:

<img src="/images/team-800.webp"
     srcset="/images/team-400.webp 400w,
             /images/team-800.webp 800w,
             /images/team-1200.webp 1200w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="800" height="450"
     loading="lazy"
     alt="Our team at the 2026 workshop">

srcset and sizes let the browser pick the smallest file that still looks sharp on each screen, so phones download the 400 or 800 px version instead of the 1200.
width and height tell the browser the shape in advance, so text doesn't jump down when the image arrives. This jump is measured by Google as Cumulative Layout Shift (CLS).
loading="lazy" delays images below the visible area until the visitor scrolls near them. Supported by all modern browsers.
alt describes the image for screen readers and search engines.

Don't lazy-load the main image at the top of the page. It's usually the Largest Contentful Paint (LCP) element, the moment Google uses to judge when the page "appeared". Lazy-loading it delays that moment. For the hero image, leave out loading="lazy", and consider fetchpriority="high".

Step 5: measure

Run your page through Google's PageSpeed Insights, or open Chrome DevTools → Lighthouse. Look for "Properly size images", "Serve images in next-gen formats" and the LCP element. Google's guidance treats an LCP of 2.5 seconds or less as good and a CLS of 0.1 or less as good.

A checklist before you publish an image

Width no larger than about twice its displayed width
WebP for photos, PNG or lossless WebP for graphics with text
Quality 75–85 for photos
width and height attributes set
loading="lazy" on images below the first screen, not on the hero
Meaningful alt text
File names that describe the image, like blue-running-shoes.webp

Frequently asked questions

What is the best image size for a website?

There's no single size. Match the width to where the image is shown: about 1200–1600 px for content images and 1600–1920 px for full-width banners, then compress to WebP at quality 75–85.

Does image compression hurt SEO?

No. Smaller images make pages faster, which helps both visitors and page experience signals. Just keep images sharp enough to be useful and add descriptive alt text.

Should I lazy-load every image?

No. Lazy-load images below the first screen. The main image at the top should load immediately because it usually determines Largest Contentful Paint.

Is WebP supported by all browsers?

All current versions of Chrome, Edge, Firefox and Safari display WebP. Very old browsers don't, which is why some sites still keep a JPG fallback.