To compress images for website use without losing visible quality, do two things in order: resize the image to the largest size it will actually be shown at, then save it with a moderate quality setting in the right format. Most oversized photos fail on the first step, not the second. A 4000 pixel wide photo displayed in a 800 pixel column carries about 25 times more pixels than the screen can show, and no quality slider fixes that as well as simply removing the extra pixels.
This guide explains how formats differ, why dimensions matter more than most people expect, which quality settings are sensible starting points, what file sizes are realistic targets, and a repeatable workflow you can follow for every new image.
Why do image sizes matter for a website?
Images are usually the heaviest part of a page, so they have the largest effect on load time. A slow hero image delays what visitors see first, and on mobile connections the delay is more noticeable.
Google’s Largest Contentful Paint metric measures how long the biggest visible element takes to render, and on many pages that element is an image. The guidance on that page treats 2.5 seconds or less as a good result. A page cannot reach it easily if the main image is several megabytes. Smaller files also save data for visitors on limited plans and reduce hosting bandwidth.
The goal is not the smallest possible file. The goal is the smallest file that still looks right at the size it is displayed. Beyond that point you trade away detail for savings nobody will notice.
What is the difference between JPG, PNG and WebP?
JPG suits photographs, PNG suits graphics that need sharp edges or transparency, and WebP can replace both at smaller sizes. Each format compresses differently, so choosing the right one often saves more than adjusting any setting.
| Format | Compression | Transparency | Best for | Watch out for |
|---|---|---|---|---|
| JPG | Lossy | No | Photos, gradients, complex scenes | Blocky artifacts around text and sharp edges at low quality |
| PNG | Lossless | Yes | Logos, screenshots, icons, diagrams | Photos saved as PNG become very large |
| WebP | Lossy or lossless | Yes | Almost anything on the web | Very old software may not open it, though current browsers support it |
Lossy means some detail is discarded permanently to make the file smaller. Lossless means every pixel is preserved exactly, and the file is smaller only because of efficient packing. The MDN guide to image file types describes each format and its browser support in detail, and it is worth checking before you commit to a format for a project.
A practical rule: if it is a photograph, use JPG or lossy WebP. If it has flat colors, text or transparency, use PNG or lossless WebP. If your audience uses current browsers, which is nearly everyone now, WebP is usually the better default for both cases because the same visual result tends to come in a smaller file.
If you already have a folder of PNG and JPG files, the Image Converter can change them to another format in the browser. Choose your files, pick the output format, and press the button to get the converted result.
Do image dimensions or file size matter more?
Dimensions come first, because file size grows roughly with the number of pixels. Cutting the width in half removes about three quarters of the pixels, since both width and height shrink.
Here is the arithmetic. A photo that is 4000 by 3000 pixels has 12,000,000 pixels. The same photo at 1200 by 900 has 1,080,000 pixels, which is nine percent of the original. Even at identical quality settings, the smaller version will usually be a small fraction of the size, though the exact ratio depends on image content.
The question to ask is: what is the largest width this image will ever be displayed at? A blog post column might be 700 to 800 pixels wide. A full width hero might reach 1920 pixels on a large monitor. Anything beyond that is wasted for the web.
High density screens complicate this slightly. A phone or laptop with a 2x display can show twice as many physical pixels as CSS pixels, so an image shown in an 800 pixel column can look sharper if you supply 1600 pixels. A common compromise is to export at about 1.5x to 2x the display width for important images and 1x for minor ones. Be honest about whether the extra sharpness is visible. For photographs with soft detail it often is not.
The Image Resizer handles this step. Enter the width and height you want, keep the aspect ratio locked so the picture is not stretched, and press the button to produce the resized file.
What quality setting should I use?
For JPG and lossy WebP, a quality value between 70 and 85 is a sensible range for most photographs. Below about 60 compression artifacts tend to become visible, and above 90 the file grows quickly with little visible gain.
These numbers are guidelines, not rules. Quality scales differ between software, so a 75 in one tool is not identical to a 75 in another. The right approach is to compress, then look at the result at the size it will appear on the page.
- Start at 80. Compare against the original at 100 percent zoom and at the display size.
- Step down in 5s. Stop when you can first notice smearing in skies, banding in gradients or fuzz around text.
- Step back up one notch. That is your setting for this type of image.
- Use different settings for different content. A busy photo of foliage hides compression well. A smooth studio background shows banding earlier.
The Image Compressor lets you adjust the quality level, then press the button to compress and compare the new size with the old one. Because it runs in your browser, you can try several levels quickly.
PNG is different. Since it is lossless, there is no quality slider in the usual sense. You reduce PNG size by shrinking dimensions, lowering the number of colors where the artwork allows it, or switching to WebP. If a PNG is a photograph, converting it to JPG or WebP typically gives the largest saving.
What file sizes should I aim for?
Realistic targets depend on the role of the image. There is no official universal number, so treat the figures below as practical starting points that you adjust after looking at the results.
| Image role | Typical display width | Suggested export width | Rough size target |
|---|---|---|---|
| Full width hero banner | 1200 to 1920 px | 1600 to 2000 px | Under 250 KB if possible |
| Blog post inline photo | 700 to 800 px | 800 to 1400 px | 60 to 150 KB |
| Product photo | 500 to 800 px | 800 to 1200 px | 50 to 120 KB |
| Thumbnail or card image | 300 to 400 px | 400 to 800 px | 15 to 50 KB |
| Logo or icon | Under 300 px | Same as display, or SVG | Under 20 KB |
These are reasonable goals for typical photographs, not guarantees. A detailed landscape may need more bytes than a portrait on a plain background at the same dimensions. If an image is over target, resize first, then lower quality slightly, then consider switching format.
A quick sanity check on page weight: ten images at 100 KB each add about 1 MB. Ten unoptimized phone photos at 3 MB each add 30 MB. The difference is the gap between a page that opens at once and one that makes visitors wait.
What workflow keeps this simple?
Follow the same five steps for every image, in this order: choose the display size, resize, choose the format, compress, then check. A fixed order prevents the common problem of compressing an image twice or exporting at the wrong size.
- Keep the original. Store the full size source file somewhere safe. Every lossy save discards detail, so always export from the original, never from a previously compressed copy.
- Decide the display width. Check your layout or theme for the content column width. Use the target table above if you are unsure.
- Resize. Use the Image Resizer to bring the width down to your export size while keeping proportions.
- Pick the format. Photos go to JPG or WebP. Graphics with transparency go to PNG or WebP. Use the Image Converter if the source is in a different format.
- Compress. Run the file through the Image Compressor and aim for the size range in your table.
- Check. Open the final file at the size visitors will see. Look at faces, text, edges and smooth gradients, which reveal problems first.
Once a site has many images, add a few habits at the file level. Use descriptive file names such as blue-ceramic-mug-front.webp rather than IMG_4821.jpg. Set width and height attributes on the image tag so the layout does not jump while it loads. Add alt text that describes the image for people using screen readers. For images below the fold, the loading=”lazy” attribute tells the browser to delay them until the visitor scrolls near them, which is supported by current browsers.
You can find these and other utilities on the free tools page. As with all tools of this kind, you choose your options and press the button, and the result appears in the browser.
What are the most common mistakes?
The most common mistake is uploading camera or phone originals directly. The second is compressing a file that was already compressed. Avoiding these two removes most of the problem.
- Relying on CSS to shrink big images. Setting a width of 800 pixels in code does not reduce the file. The browser still downloads all the original pixels.
- Saving photos as PNG. The file can be several times larger than a JPG with no visible benefit.
- Saving logos as JPG. Text and sharp edges pick up fuzzy artifacts, and there is no transparency.
- Re-saving repeatedly. Each lossy generation adds damage. Always export from the original.
- Stretching small images. Enlarging a small image does not add detail. It only makes a blurry, larger file.
- Chasing the lowest number. A 20 KB hero that looks muddy is worse than a 180 KB one that looks sharp.
- Forgetting the aspect ratio. Changing only width or only height distorts the picture. Lock proportions when resizing.
- Judging only at zoom. Inspect the image at the size it will really be shown, and also at least once on a phone.
Frequently asked questions
Does compressing an image reduce its quality?
Lossy compression discards some detail, so technically yes. At moderate settings the loss is usually too small to see at the displayed size. Lossless compression keeps every pixel exactly.
Is WebP better than JPG?
For web delivery it is often smaller at similar visual quality, and it supports transparency. JPG remains universally compatible and is still a fine choice. If you are unsure, compare both on one of your own images and keep whichever looks right at the smaller size.
What is the best size for blog images?
Export at around 800 to 1400 pixels wide for a standard content column, depending on whether you want extra sharpness on high density screens. Then compress to roughly 60 to 150 KB if the image allows it.
Should I resize or compress first?
Resize first. Reducing the pixel count gives the biggest drop in size, and compressing afterward works on a smaller image. Compressing first and resizing later can waste effort and add extra loss.
Can I compress images without uploading them to a server?
Tools that run in the browser process the file on your own device. The tools linked here work that way, but always read the privacy note of any tool you use if the images are sensitive.
How do I know if my images are slowing my site?
Run a page speed report such as Google’s PageSpeed Insights. It lists images that are larger than needed and estimates how much they could save.
Final thoughts
Good image handling is a short routine rather than a technical project. Resize to the real display size, pick a format that suits the content, compress to a moderate quality, and look at the result. Do this consistently and pages load faster while images still look clean. Start with your three or four largest images, since those usually account for most of the savings.
Free Tools Mentioned in This Guide
See all of them on the free online tools page.