You took a photo on your phone, it is several megabytes, and you are about to put it on your website. Maybe your site feels slow, or a speed report flagged your photos, or you simply do not want to make a mistake before you hit publish. The good news is that you can compress images for your website yourself, for free, in a few minutes, and without learning how image files work. The job has two parts. Resizing changes how many pixels wide the photo is. Compressing changes how many bytes it takes to store those pixels. Do both before you upload, check one page afterward, and you will have handled most of what slows a site down because of photos. Below you get a target width, a format for each kind of image, a free tool, and a quick test.
Key Takeaways
Make the photo about 1.5 to 2 times the width it will display at, not the width your phone produced.
JPEG, WebP or AVIF for photos, and keep PNG for logos, transparency and sharp line art.
Run the page through Google's free speed test, because a smaller image does not fix a slow page whose delay comes from somewhere else.
What size should an image be on a website?
There is no single size that suits every image. The right width depends on where the image sits on the page. A photo in a 600-pixel-wide column needs far fewer pixels than a banner that spans a large screen.
A practical starting point comes from Google's web.dev and from WordPress.com: resize a typical content image to roughly 1.5 to 2 times the width it displays at. The extra pixels keep it sharp on high-density phone and laptop screens. WordPress.com's own example is a 1,200-pixel image for a 600-pixel content column. Sharpness is not the only reason to stop at that number. Google's web.dev explains that serving a desktop-sized image to a phone can use 2 to 4 times more data than the phone needs.
To find your displayed width, look at your page template or ask your web designer how wide the content column is. If you do not know, 1,200 pixels wide is a reasonable ceiling for a photo inside a normal content area. Full-width banners need more. Ignore the DPI setting you may see in photo editors, because DPI matters for print and not for how large an image appears in a browser. Pixel width and file size are what count.
Which image format should I use: JPEG, WebP or AVIF?
For photographs, any of the three works, and the choice comes down to support and convenience. MDN describes WebP as widely supported and AVIF as very efficient but needing a fallback where a browser cannot display it. JPEG works everywhere.
| Image type | Good choice | Why |
|---|---|---|
| Phone or camera photo | JPEG or WebP | Small files that still look good at normal viewing size |
| Photo when your platform supports it | WebP or AVIF | Smaller files than JPEG at similar quality, with a JPEG fallback for older browsers |
| Logo or graphic with transparency | PNG or WebP | Keeps transparent edges clean |
| Sharp line art or text in an image | PNG | Avoids compression blur on fine edges |
PNG for an ordinary photo is a common mistake. It produces a much larger file than JPEG or WebP and gives you nothing visible in return. Also, a WebP file name does not prove the image is the right size. A 4,000-pixel-wide WebP can still be far too big.
If your site is built by a developer, an HTML markup option lets the browser try an AVIF or WebP version first and fall back to JPEG. You do not need to write that yourself on a website builder. The builder usually handles the conversion, which a later section covers.
What is the easiest free tool to resize and compress photos?
Squoosh, a free browser tool from Google Chrome Labs, is the easiest place to start. Its own site says it reduces file size while maintaining quality, and it processes images on your device, so the photos do not leave your computer. You can resize, change the quality setting, and export as JPEG, WebP or AVIF.
A routine that works for most photos:
- Open Squoosh and drop in the photo.
- Turn on the resize option and set the width to about twice the width the image will display at.
- Choose JPEG or WebP as the output format.
- Lower the quality slider until you can just begin to see a difference in the preview, then raise it a notch.
- Compare the two sides of the preview at normal viewing size, not zoomed in.
- Download the new file and upload that one to your site.
If you prefer software on your computer, GIMP is a free desktop editor for Windows, macOS and Linux with more control over dimensions and JPEG quality. ImageMagick is a command-line tool for processing a whole folder at once, and it suits a developer more than an owner.
Do not chase a fixed file-size target such as 100 KB. That number may suit a small thumbnail and be unrealistic for a large hero photo. Judge the result by how the image looks at its real size on the page.
Does my website builder compress images for me?
Often, partly. The platforms handle uploads differently, and what they say about it is worth knowing before you decide how much work to do by hand.
| Platform | What it says it does | What to check |
|---|---|---|
| Wix | Resizes uploads for quality and loading time, and compresses images under 25 MB automatically | Whether very large originals still slow your editing and storage |
| Squarespace | Converts uploads to WebP by default and creates responsive widths from 100 up to 2,500 pixels, keeping the original in the asset library | Whether your original is far larger than any width you need |
| Webflow | Creates responsive variants for many inline JPG, PNG and WebP images and offers conversion to WebP or AVIF | Background images and rich-text images, which its responsive system does not cover in every case |
| WordPress.com | Offers automatic optimization options | Resizing before upload, which its own guidance still recommends |
Automation does not make an original phone photo the right thing to upload. It is still smart to resize and compress before you upload, because a smaller starting file gives the platform less to process and leaves you with a cleaner image library. The help pages for Wix, Squarespace, Webflow and WordPress.com explain the details for your plan.
How do I check that smaller images actually helped?
Test the page before and after. PageSpeed Insights is free and takes a minute. A ten-minute routine:
- Enter your home page address and run the mobile test first.
- Scroll to the opportunities and diagnostics and look for image items such as "Properly size images," "Serve images in next-gen formats" and "Efficiently encode images."
- Find the largest image on the page and note its pixel width and file size.
- Compare that width with the width it displays at on the page.
- Replace one image with your resized, compressed version.
- Run the test again and look at that image's line.
One caution applies. Google defines Largest Contentful Paint, or LCP, as the time it takes for the largest visible image, text block or video to render. A good LCP is 2.5 seconds or less at the 75th percentile, and more than 4 seconds is poor, according to web.dev's LCP guide. If the large image is your LCP element, shrinking it can shorten the time. But web.dev's guide to optimizing LCP points out that delays also come from late discovery of the image, CSS and JavaScript that block rendering, and slow server response. If your photos are already small and the page is still slow, the cause is elsewhere. Our post on why a website is slow to load walks through those causes.
When should I do this myself, and when should I get help?
For a handful of new photos, do it yourself. Squoosh plus the routine above covers it, and paying someone for one image is not worth it.
Help starts to make sense when the job gets bigger or the cause is harder to see:
- A large existing media library full of oversized photos that need to be replaced page by page.
- Background images that your platform does not resize the way it does regular images.
- A site that is missing responsive image markup, so every visitor gets the same large file.
- Product images in an online store, where hundreds of photos and their variants need the same treatment.
- A slow page where the LCP problem turns out not to be the image at all.
Small fixes such as converting PNG photos to JPEG or lowering an over-high quality setting take minutes. Fixing responsive markup, background images or a slow server is development work. Our guide to what website maintenance costs shows how that kind of recurring cleanup is usually priced.
Are your website images ready to upload?
Pick an answer to begin.
1. A 600-pixel-wide column will show your photo. About how wide should the file be?
2. Which format is the better fit for a transparent logo?
3. You shrank every photo and the page is still slow. What is the sensible next step?
Frequently Asked Questions About compress images for website
What is the best way to compress images for a website?
Resize the photo to about 1.5 to 2 times the width it displays at, export it as JPEG or WebP, and lower the quality until you can just see a difference, then raise it slightly. Squoosh does all of this for free in your browser.
Can I upload iPhone photos directly to my website?
You can, and some platforms will shrink them for you. A straight phone upload is still much larger than the page needs, so resizing and compressing first gives a lighter page and a tidier media library.
Is WebP better than JPEG?
For photos, WebP and AVIF can produce smaller files than JPEG at similar quality, and MDN describes WebP as broadly supported. AVIF needs a fallback where a browser cannot show it. JPEG remains the safe choice everywhere.
What file size should a website image be?
There is no universal limit. A small thumbnail and a full-width banner need different amounts of data. Resize to the display width, compress until the quality still looks right at normal size, and compare the result in PageSpeed Insights.
Does compressing images always make my website faster?
It shortens the transfer time for those images, which can help LCP when the image is the largest element. If the real delay comes from late discovery, blocking CSS or JavaScript, or a slow server, smaller images will not fix it.
Does image size matter for DPI?
No. For websites, pixel dimensions and the file's size in bytes are what count. DPI mainly affects print output.
Moving Forward
Preparing a website image is a short routine: resize to about twice the display width, choose JPEG or WebP for photos and PNG for logos and sharp graphics, compress with a free tool such as Squoosh, and look at the result at normal size. Your website builder may add its own optimization on top, but a lighter original still helps.
Then test the page in PageSpeed Insights. If your largest image was the problem, you will see it in the report. If the page stays slow after the images are small, the cause is somewhere else, and it is worth finding before you spend time on more compression.
If you have a big library of oversized photos, background images that will not shrink, or a page that stays slow, Web Leveling can find the cause with you. Our website maintenance work covers image cleanup and the speed fixes behind it. If a few free minutes in Squoosh will solve your problem, we will tell you that too. We work with small and medium businesses across the country and overseas. Tell us which pages feel slow, and we will help you sort out the next step.
Terms
Image words in this post
Tap a term to see what it means.
Resize. Changing how many pixels wide and tall an image is.
Compress. Reducing the number of bytes an image file takes up, usually by lowering quality slightly.
JPEG. A common photo format that works in every browser.
WebP. A newer image format that makes smaller files than JPEG and works in most browsers.
AVIF. A very efficient image format that needs a fallback where a browser does not support it.
LCP. Largest Contentful Paint, the time it takes the largest visible image, text block or video to appear.
