How to compress images for a website

In the HTTP Archive's 2025 Web Almanac, the median home page weighed 2.56 MB on mobile, and 911 KB of that was images. On desktop, the median page carried 1,058 KB of images. Images are also what visitors wait for: the largest element on screen when a page loads, the Largest Contentful Paint (LCP), was an image on 76% of mobile pages.

Lighter images load sooner on slow connections, use less of your visitors' mobile data and cost you less bandwidth. LCP is one of Google's Core Web Vitals, the measurements Google uses to judge page experience, so heavy images can cost more than a few seconds of patience.

Compression cannot rescue an image that is far bigger than the space it fills. A camera photo 4000 pixels wide, shown in an 800-pixel column, carries 25 times more pixels than the page can use. web.dev notes that sending desktop-sized images to phones can use 2–4 times more data than needed.

• Full-width banners: about 1600–2000 pixels wide is enough for most layouts.
• Images in an article column: about twice the column width, so they stay sharp on high-density screens (for example, 1400 pixels for a 700-pixel column).
• Thumbnails and avatars: twice their displayed size, often 200–400 pixels.

The format decides how efficiently an image can be stored. In short: photos suit JPG or WebP; logos, screenshots and anything with transparency suit PNG or WebP. Our comparison of JPG, PNG and WebP explains when each one wins.

About 97% of browsers in use display WebP, and it is often noticeably smaller. To try it, convert with JPG to WebP or PNG to WebP and compare the result with the original: a converted file is not always smaller, especially for simple graphics.

Compression removes data the eye is unlikely to miss. On the Bitinz image compressor you can drop in a batch of JPG, PNG or WebP files and choose one of three levels:

• Fast: speed first, for large batches.
• Balanced: the default, and a good fit for most website images.
• Best: takes a little longer for smaller files; worth it for images that appear on every page, such as banners and backgrounds.

When you keep the format, Bitinz never gives you back a file larger than the one you uploaded. Compare the result with the original at full size, especially images with fine text or smooth gradients, then download the ones you are happy with.

A well-compressed image can still slow a page down if it loads at the wrong time or in the wrong size. A few HTML attributes do most of the work:

• Set width and height on every image, so the browser can reserve the space and the layout does not jump while it loads.
• Add loading="lazy" to images further down the page, so they load only when a visitor scrolls near them.
• Never lazy-load the main image at the top of the page. web.dev recommends fetchpriority="high" for that image instead, on no more than one or two images.
• Use srcset and sizes to offer a few widths of the same image, so phones download a smaller file than large screens.
• Serve images with a long cache lifetime, through a CDN if you have one, so returning visitors do not download them again.

Run the page through PageSpeed Insights or the Lighthouse panel in Chrome. Since Lighthouse 13, the image checks are grouped in a single insight, “Improve image delivery”, which lists images that could be compressed further, served in a modern format or made smaller. Images that would save less than 4 KiB are not listed, so a short list is a good sign.

Then look at the page yourself on a phone. Sharp edges, text inside images and skin tones are where compression problems show first.

If your site adds images every day, for example through a content management system or an online shop, compress them during upload or publishing instead of by hand. The Bitinz developer API accepts an image over HTTP and returns a link to the compressed file, so it can run from a script or a build pipeline. Every account has a free monthly quota.

1. 01Resize each image to about twice the size it is displayed at.
2. 02Use JPG or WebP for photos, and PNG or WebP for graphics and transparency.
3. 03Compress at the Balanced level, and try Best for the largest images.
4. 04Compare the result with the original before replacing it.
5. 05Set width and height, lazy-load images below the fold, and never lazy-load the main image.
6. 06Check the page again in PageSpeed Insights.

Uploading images somewhere other than your own website? Each platform has its own rules: see image size requirements for email and online stores.