Will compressing an image reduce its quality?

JPG and WebP compression is lossy, but at quality 75 to 85 the difference is usually barely visible. Always keep the original separately so you can export again if needed.

How big should an article image be?

The exact limit depends on the content, but photos in an article can often be a few hundred kilobytes rather than several megabytes. The key is that the pixel width matches the displayed width.

Does every browser support WebP?

All major modern browsers currently support WebP. If you need to cover very old software, use a element with a JPG fallback.

How to Compress Images for a Website and Speed Up Your Pages

Images usually make up the largest part of a page's weight, so optimising them pays off more than almost anything else. This guide explains how image size affects speed and Core Web Vitals, which format and quality to choose, and what to check before publishing.

Why image weight matters

A photo straight from a phone can weigh several megabytes. If you put it in an article, a visitor on a mobile connection has to download all of it even though it is displayed only a few hundred pixels wide. The result is a slow page, more visitors leaving and wasted mobile data.

Speed also ties into the Core Web Vitals that Google uses. One of them is LCP (Largest Contentful Paint), which measures how quickly the largest visible element appears. Very often that element is the main image, so its weight directly affects the score. Google describes a good LCP as 2.5 seconds or less.

Choosing a format: WebP or JPG

JPG suits photographs and works everywhere. WebP usually produces a smaller file at similar visual quality, often by around a quarter or more, and all major browsers now support it. For new sites WebP is normally a good default.

PNG is the right choice for screenshots, logos and graphics with sharp edges or transparency. Photos saved as PNG end up unusually large, so convert them to JPG or WebP instead. HEIC files from phones should also be converted before they go on a website.

Setting the quality

For lossy formats (JPG, WebP), a quality of roughly 75 to 85 on the 0 to 100 scale is usually enough for photos. Below about 70 you start to see blocky areas and noise around edges, while above 90 the file grows a lot for a difference the eye can barely notice.

The best method is to try it: export a few versions and compare them on screen at the size they will actually be displayed. Images with large flat areas or fine text show compression artefacts sooner and may need a higher setting.

Resize to the displayed size

Compression without resizing is only half the job. If an image is shown 800 px wide, there is no point in serving a 4000 px file. Shrinking a large photo from 4000 to 1600 px wide cuts the file weight several times over, because the pixel count falls with the square of the width.

To keep images sharp on high-density screens, prepare a version at about twice the displayed width. For an 800 px slot, a 1600 px file is usually enough.

Responsive images and loading

The srcset attribute lets the browser pick a file of suitable size for the screen. Example:

The loading="lazy" attribute tells the browser to fetch the image only when the visitor scrolls near it, so use it for images below the first screen. Do not lazy-load the main image visible at the top, because that can make LCP worse.

The width and height attributes let the browser reserve space in advance, so the page does not jump while loading. This improves the CLS (Cumulative Layout Shift) metric.

A practical checklist before publishing

Image resized to the width it is really displayed at (no more than about twice that).
Format chosen: WebP or JPG for photos, PNG or WebP for graphics with transparency.
Quality around 75 to 85, checked visually on screen.
width and height attributes set.
Images below the first screen use loading="lazy".
Descriptive file names (for example kaunas-old-town.webp) and meaningful alt text.
Actual downloaded file size checked in the browser developer tools (Network tab).

How to measure the result

Before optimising, note how much the page weighs. In the browser developer tools (F12, Network tab, Img filter) you can see the size of every image and their total. After optimising, repeat the measurement with cache disabled (Disable cache) so the comparison is fair.

Example: an article has five photos of 3 MB each, about 15 MB in total. If you shrink each to 1600 px wide and save as WebP at quality 80, each often weighs roughly 100 to 250 KB, and all together under 1.5 MB. The exact figure depends on the photo content, so always measure yourself.

Common mistakes

Resizing only with CSS: if you upload a 4000 px file and show it 400 px wide, the browser still downloads the whole file.
Repeated recompression: every JPG re-save adds losses. Always export from the original.
Using PNG for photos: the file can be several times larger than JPG or WebP.
Lazy loading the first image: the main image at the top should load immediately.
Missing alt text: it matters for accessibility and helps search engines understand the image.