Meregate.com
Friday, November 13, 2026
Home โ€บ SEO โ€บ How to Compress Images for Your Website (2026)

How to Compress Images for Your Website (2026)

How to Compress Images for Your Website (2026)

Last updated: November 2026

Learning how to compress images for your website is one of the fastest ways to make your pages load quicker. Most slow websites are slow because of images, not text โ€” a single photo straight from a phone can be 4 MB or more. This guide shows you how to shrink those files without losing quality.

What image compression does

Image compression removes data from a file that your visitors will not miss. A photo holds far more detail than a screen can show, so compression trims the extra detail and leaves the picture looking the same โ€” but the file is much smaller and downloads much faster.

There are two kinds. Lossy compression removes some data for good and gives the smallest files. Lossless compression keeps all the data and packs it more tightly. For website photos, lossy is the right choice.

Why compression matters for speed and Core Web Vitals

Images are usually the heaviest part of a web page. A few uncompressed photos can weigh more than everything else on the page combined โ€” and many visitors leave before a slow page finishes loading.

Google measures this with Core Web Vitals, a set of speed scores for your pages. One of them is Largest Contentful Paint, or LCP: how long the biggest thing on the screen takes to appear. On most pages that is an image, usually the hero image at the top. A 2 MB hero image hurts your LCP score; the same image at 150 KB makes the page feel instant. Faster pages rank better too.

A real before-and-after example

The numbers below are a typical example, not a lab measurement.

VersionWidthFormatFile size
Original phone photo4,032 pxJPEG~4 MB
Resized only1,200 pxJPEG~400 KB
Resized + compressed1,200 pxJPEG, quality 80~150 KB
Resized + WebP1,200 pxWebP, quality 80~100โ€“150 KB

Resizing alone cuts the file to about a tenth of its size, and compression plus WebP cuts it again โ€” around 30 times smaller, and it looks the same on a normal screen. First rule: never upload a full-size phone photo.

How small should your images be?

The right size depends on where the image appears on the page:

Use caseTarget file sizeTypical width
Hero image (top of the page)Under 200 KB1,600โ€“2,000 px
Normal content imageUnder 150 KB800โ€“1,200 px
ThumbnailUnder 50 KB300โ€“400 px
Product photoUnder 200 KB1,000โ€“1,500 px

These are targets, not hard rules. Build the habit: resize every image to the size it will display at, then compress it before you upload it.

Pick the right format

The format matters as much as the compression. Each one has a job it does best.

FormatBest forNotes
JPEGPhotos and complex imagesSmall files, no transparency.
PNGLogos, icons, graphics with sharp edgesSupports transparency; much bigger files for photos.
WebPPhotos and most web imagesSmaller than JPEG, supports transparency. Best default for photos in 2026.
AVIFPhotos where every KB countsSmaller than WebP; not supported everywhere yet.

For photos, use WebP as your default in 2026 โ€” it works in all modern browsers and gives files about 25โ€“35% smaller than JPEG. Use PNG only for transparency or sharp lines. AVIF is even smaller, but some older browsers and tools still do not support it.

Before you compress, give your image a clear name. Descriptive file names help search engines understand what the image shows. “team-photo-office.jpg” beats “IMG_4829.jpg”.

Close-up of a laptop on a wooden table showing a photo website on its screen
Source: Pexels

Compress images with free online tools

You do not need to buy software to compress images. These three free tools cover most cases. As a rule, keep photo quality at 80โ€“85 โ€” below 70, you start to see blur and blocky patches.

TinyPNG

TinyPNG is the simplest tool on this list. Go to the site, drag your image onto the page, and it compresses the file in seconds. The free version handles up to 20 images at once, each up to 5 MB, and works with JPEG, PNG, and WebP.

Squoosh

Squoosh is a free tool from Google that gives you more control. Drop your image in to compare the original and the compressed version side by side. Use the quality slider to find the lowest setting that still looks good, usually around 80 for photos. Use the format picker to switch to WebP or AVIF. You can also resize in the same screen, so one visit handles both jobs. Squoosh runs entirely in your browser, so your images never leave your computer.

iLoveIMG

iLoveIMG is a good choice when you have several images to compress at once. Upload a batch, choose the compression level, and download all the results in one zip file. It also resizes, crops, and converts images. The free plan limits batch size, but it is enough for a normal blog post.

Compress images in Photoshop

If you already use Photoshop, open the image and go to File > Export > Export As. Pick WebP or JPEG, set the image size to the width it will show at on your page, and set the quality slider to around 80 for photos. Photoshop shows a preview and the file size as you adjust the slider. Click Export, and save the file. Older versions have a similar option called Save for Web.

Compress images in WordPress

On WordPress, a plugin can compress images automatically โ€” you upload as normal, and it shrinks them in the background.

Laptop screen showing a photo website with image thumbnails
Source: Pexels

Smush

Smush is the most popular image compression plugin for WordPress. It compresses every image when you upload it, with no settings to change, and it can strip hidden data like camera info. The free version lets you bulk-compress old images, and it can lazy-load images until the visitor scrolls to them.

ShortPixel

ShortPixel is a strong choice if you want WebP conversion as well as compression. It compresses images on upload, converts them to WebP, and serves that version to browsers that support it. It also has a bulk tool for old images. The free plan includes a monthly credit of compressions.

Imagify

Imagify comes from the team behind the WP Rocket caching plugin. Install it, pick a compression level, and it compresses new uploads automatically. Its bulk tool handles older images, and it can convert images to WebP too. The free plan includes a monthly allowance of compressions.

Whichever plugin you choose, do not rely on it alone โ€” a plugin can only do so much with a 4 MB phone photo. Resize your images before you upload them, and let the plugin handle the final compression. Also describe each image you add to a post. Good alt text tells search engines and screen readers what the image shows.

How to compress many images at once

Compressing one image is easy. Compressing fifty takes a plan. First, gather all the images in one folder. Second, resize them all to their display width โ€” free tools like IrfanView or XnConvert can resize a whole folder in one go. Third, run the folder through a batch tool: TinyPNG and iLoveIMG accept batches, and Smush and ShortPixel can bulk-compress images already on your site. Fourth, check a few results by eye.

If your site already has hundreds of uncompressed images, start with your most visited pages and homepage, then work through the rest a few dozen at a time.

Responsive images: WordPress does part of the work

WordPress already helps with image size. When you upload an image, it creates several smaller copies at different widths, then uses a feature called srcset to serve the right copy to each visitor โ€” a small file to a phone, a bigger one to a desktop. No setup needed; it happens automatically.

But srcset is not a replacement for compression. If you upload a 4 MB photo, its smaller copies are still bigger than they need to be. Compress your images first, and srcset makes a good result even better.

How to check your result

After compressing your images, check that the work paid off. The best free tool for this is Google PageSpeed Insights. Paste in your page URL and run the test. It scores your page and lists which images are still too big.

Look for two things. First, your Largest Contentful Paint time should drop. Second, check the “Properly size images” and “Serve images in next-gen formats” suggestions โ€” any images still listed there are the files to fix next.

Frequently asked questions

How to compress image size?

Resize the image to its display width, then run it through a free tool like TinyPNG or Squoosh. Set the quality to around 80 and save it as WebP โ€” that alone usually cuts the file size by 80โ€“90%. On WordPress, a plugin like Smush or ShortPixel can compress images automatically on upload.

Is PNG or JPEG better for websites?

JPEG is better for photos, because it makes much smaller files. PNG is better for logos, icons, and graphics with sharp edges or transparency, because it keeps lines crisp. For most photos, though, WebP beats both โ€” smaller than JPEG at the same quality, with transparency like PNG.

What size to make images for a website?

Resize images to their display size. A normal content image should be about 800โ€“1,200 px wide and under 150 KB. A hero image can be 1,600โ€“2,000 px wide and under 200 KB. Thumbnails should be 300โ€“400 px wide and under 50 KB, and product photos 1,000โ€“1,500 px wide and under 200 KB. Never upload a 4,000 px phone photo โ€” you pay the full download cost for pixels nobody sees.

How can I compress an image to 0.1 MB?

Resize it to no more than 1,200 px wide, save it as WebP, and set the quality to 75โ€“80. In Squoosh, you can do all three steps in one screen and watch the file size as you adjust the slider. If it is still too big, lower the quality a little at a time, or resize it smaller. Very detailed photos may need a quality of 70 to reach 100 KB โ€” check the result by eye, because going too low makes the image look blurry.

The bottom line

Image compression is not complicated, but it is one of the highest-value habits you can build for your website. Resize every image to its display size, save photos as WebP at quality 80, and use a free tool like TinyPNG or Squoosh โ€” or a WordPress plugin like Smush or ShortPixel โ€” to do the heavy lifting. Check your work with PageSpeed Insights, then repeat for older images a few dozen at a time. Your pages will load faster, and your visitors will notice.

Taylor Orlando

Taylor Orlando is a content writer at Meregate covering websites, SEO, and AI. Taylor breaks down complex topics into simple, practical guides that help small businesses build better websites, rank higher on Google, and get real value from AI tools โ€” no jargon, no fluff.

Related Articles