Blog

How to Compress Images for Your Website Without Losing Quality

· 4 min read · by the ProFigma team

How to Compress Images for Your Website Without Losing Quality

If your website feels slow, images are the first place to look. They are usually the heaviest files on a page, and many sites serve photos that are five or ten times bigger than they need to be. The good news: you can shrink most images by 60 to 90 percent and the page will look exactly the same.

Step 1: Use the right format

  • WebP for almost everything. It is usually much smaller than JPG or PNG at the same quality, and every current browser supports it.
  • JPG for photos when you need the widest compatibility.
  • PNG for graphics that need transparency or sharp edges, like logos and screenshots.
  • SVG for icons and simple illustrations. It scales without getting heavier.

Step 2: Resize before you compress

This is the biggest saving, and the one most people skip. A photo straight from a phone can be 4000 pixels wide. If it shows in a 800 pixel column, the browser throws away most of those pixels, after downloading them all.

A good rule: make the image about twice the width it is displayed at, so it stays sharp on high-density screens. A column that is 800 pixels wide needs an image about 1600 pixels wide, no more.

Step 3: Compress with the right quality

For photos, a quality setting around 70 to 80 percent is the sweet spot. Below that you start to see blocky patches. Above it, the file gets bigger without a visible gain.

Our free image compressor does the work in your browser, so your photos are never uploaded:

  1. Drop one or many images on the page.
  2. Choose Low, Medium or High, or set an exact target size like 100 KB.
  3. Drag the slider on the preview to compare before and after.
  4. Download the compressed files.

Step 4: Convert for the web

If your photos are PNG but have no transparency, converting them to JPG or WebP saves a lot. Our PNG to JPG converter handles many files at once.

Step 5: Load images smartly

  • Add loading="lazy" to images below the fold so they load only when needed.
  • Set width and height on every image to prevent the page from jumping as it loads.
  • Use srcset to give small screens smaller images.
  • Do not lazy-load the main image at the top of the page. It should load first.

How small is small enough?

As a rough guide for a normal page:

  • Hero image: under 200 KB.
  • Content images: under 100 KB each.
  • Icons and logos: a few KB, as SVG.

Common mistakes

  • Uploading full-size camera photos.
  • Compressing a JPG again and again. Each pass loses a little more. Always compress from the original.
  • Using PNG for photos.
  • Forgetting alt text. Describe the image briefly. It helps accessibility and search.

A worked example

You have a phone photo that is 4000 by 3000 pixels and about 4 MB. It will sit in an 800 pixel wide column on your page.

  1. Resize it to 1600 pixels wide. That alone brings the file down a lot.
  2. Save as WebP at around 75 percent quality.
  3. Check the result. A photo like this often ends up in the range of 100 to 200 KB, and it looks the same on screen.

The exact number depends on the photo. A picture with lots of fine detail, such as leaves or crowds, will be larger than a smooth sky.

Google measures how fast the largest thing on your page appears, usually the main image. This is called Largest Contentful Paint, and a good score is 2.5 seconds or less. A heavy hero image is one of the most common reasons a page fails it. Compressing your top image, giving it the right dimensions and not lazy-loading it often gives the biggest improvement for the least work.

Images in CSS backgrounds

Background images are not covered by loading="lazy" and they do not use srcset. Compress them just as carefully, and consider using a smaller version in a media query for phones:

.hero { background-image: url(hero-1600.webp); }
@media (max-width: 700px) { .hero { background-image: url(hero-800.webp); } }

Tips for common platforms

  • WordPress: compress before you upload. Many themes also create several sizes of every image, so a huge original wastes space on all of them.
  • Online stores: product photos are your biggest images. Keep them consistent in size and under 200 KB.
  • Email newsletters: use JPG or PNG, because some email apps do not show WebP.

How to check your results

Run your page through PageSpeed Insights or the Lighthouse tool in Chrome. Look at "Properly size images" and "Serve images in next-gen formats". If they still complain, find the file they name and shrink it. Test again after each change so you know what helped.

Frequently asked questions

Will compressing images hurt SEO?

No. Smaller images make pages load faster, which helps both visitors and search engines.

What is the best format for web images?

WebP for most images, SVG for icons and simple graphics.

Are my images uploaded when I use your compressor?

No. Compression happens in your browser on your own device.

Start now: compress your images for free. Need to shrink a video too? Use the video compressor.

Keep reading