How to Compress Images for the Web: Formats and Quality

Ta treść jest po angielsku.

Large images are the most common reason web pages load slowly, and they also eat into mobile data and search performance. This guide explains which image formats to choose, how big images should be, how to set quality, and when WebP is the right answer.

Autor: Valtrinity. Zaktualizowano: 18 października 2026.

Why image size matters on the web

Images often make up most of a page's weight, so a few oversized photographs can push load times past several seconds. Slow pages frustrate visitors, lead to abandoned visits and can affect search visibility, because page speed is one of many signals search engines consider. Reducing image weight is usually the quickest performance gain available to a site owner.

Compression means storing the same picture using fewer bytes. Lossless compression keeps every pixel identical, while lossy compression discards detail that the eye is unlikely to miss. Good web practice is to use the smallest file that still looks right at the size it will be displayed.

Choosing the right format

Each format suits a different kind of image. JPEG has long been the standard for photographs and images with smooth gradients. PNG is lossless and suits screenshots, diagrams and graphics with text or sharp edges, although its files are often much larger than JPEG for photographs. GIF is limited to 256 colours and is usually better replaced with a short video or an animated WebP.

Vector formats such as SVG are a special case. They stay sharp at any size and are often tiny, but they only suit artwork that can be described with shapes rather than detailed photographs.

• JPEG: photographs and natural scenes
• PNG: screenshots, diagrams and images that need transparency
• SVG: logos, icons and simple illustrations that must scale cleanly
• WebP: most web images, in both lossy and lossless forms
• AVIF: very small files, with slower encoding and less universal support

Why WebP is usually the best default

WebP is a format developed by Google. Its lossy files are typically around a quarter to a third smaller than JPEG at similar visual quality, and it supports transparency like PNG. Support is now broad across Chrome, Edge, Firefox and Safari, although older tools, some editors and certain email clients may still struggle with it.

A practical approach is to serve WebP from your website with a JPEG fallback, using the picture element so that any visitor whose system cannot read WebP still receives a working image. Keep a JPEG or PNG copy of anything you send outside your site, such as a press pack or a newsletter attachment.

Getting dimensions right first

Compression cannot fix an image that is far larger than its display area. A 4000 pixel wide photograph shown in an 800 pixel column wastes most of its data. Resize the image to the largest size it will actually appear, then compress. For sharp screens, storing about twice the display width is a reasonable target, so an 800 pixel slot might use a 1600 pixel source.

• Hero banners: rarely need more than 1920 pixels wide
• Content images: usually match the column width, often 800 to 1200 pixels
• Thumbnails: 300 pixels wide or less is typically enough
• Never upscale, because enlarging an image adds no real detail

Setting quality without guesswork

For JPEG and lossy WebP, a quality setting between 70 and 85 suits most photographs. Going much above 90 adds file size with little visible gain, while dropping below 60 often shows blockiness and colour banding, especially in skies and skin tones. Compare the compressed output with the original at full size rather than trusting the numbers alone.

PNG files are lossless, so the quality dial does not apply in the same way. Reduce the number of colours in a palette PNG, or convert photographic PNGs to JPEG or WebP. Each round of lossy compression degrades the image a little more, so always export from the original file rather than recompressing a previous version.

Metadata, colour profiles and clean-up

Cameras and phones embed metadata in each photograph, including the camera model, the date, and sometimes GPS coordinates and a thumbnail. Removing it trims a few kilobytes and stops location details from being published by accident. Most compression tools offer an option to strip metadata, which is worth using on any image that goes on a public website.

Colour profiles such as sRGB help colours look consistent across screens. Some tools discard embedded profiles to save bytes, which can make colours look slightly different. After changing settings, check a sample on two or three screens before converting the whole batch.

Responsive images and lazy loading

Serving one large image to every visitor wastes bandwidth, especially on mobile phones. The srcset attribute lets the page choose from several versions, for example 400, 800 and 1600 pixel widths. Pair it with the sizes attribute so the page knows how wide the image will display, and it can pick the right file before downloading anything.

Add the lazy loading attribute to images below the fold so they download only as visitors scroll towards them. Always set width and height attributes so the layout does not jump while images load, which also supports good visual stability on the page.

A simple workflow to follow

The image-resizer tool sets dimensions, image-compressor reduces file size, and image-format-converter switches between formats. Working through the steps in order usually produces files a fraction of the original size, with no visible loss at normal viewing distances.

• Start from the original, uncompressed file
• Resize to the largest display size you need
• Convert photographs to WebP or JPEG, and graphics to PNG or SVG
• Set quality around 80, then compare with the original
• Strip metadata and check the final file size and dimensions
• Keep the original archived for future edits

Narzędzia wspomniane w poradniku

Najczęstsze pytania