Faster Photos, Faster Website
Big photos are the most common reason small business websites feel slow, especially on phones. A photo straight off your phone or camera is often 3 to 8 MB. Most customers will never notice the extra detail, but they will notice a page that takes several seconds to load on a phone signal in a parking lot. Slow pages lose visitors, and Google uses page speed as one of its signals too.
This quick guide explains WebP, AVIF, and SVG in plain English, how big your images should actually be, and the free tools that shrink them in a few clicks. It takes about 35 minutes to fix the biggest images on your homepage. Download the printable PDF with a checklist, or follow along below.
Download the free PDFPDF · 8 pages · printable checklist
Part 1: Why image size matters
- 1
Find your heaviest images (5 min)
Go to PageSpeed Insights, enter your homepage address, and run the test. Scroll to the suggestions and look for items like “Improve image delivery” or “Properly size images.” Each one lists the images that need work and how much file size you could save. Start with the big photo at the top of your homepage (often called the hero image): it loads first and is usually the largest file on the page.
- 2
Know your size targets (5 min)
Use the table below as your guide. Don't upload a 6,000 px, 7 MB phone photo and let the website shrink it on screen; resize it to 1920 px and save it as WebP at about 200 KB before you upload.
Your size targets
Resize to these widths before you upload, and aim for these file sizes.
| Image type | Width | Aim for |
|---|---|---|
| Full-width banner or hero photo | 1920 px | Under 250 KB |
| Photo inside a page or blog post | 1200 px | Under 150 KB |
| Thumbnails, team photos, gallery previews | 600 px | Under 60 KB |
| Logo or icon | As displayed (or SVG) | Under 30 KB |
Part 2: WebP vs. AVIF, in plain English
Both are modern image formats that look the same as a JPG to the eye but take up much less space.
| JPG | WebP | AVIF | |
|---|---|---|---|
| Typical file size | Baseline | About 25–35% smaller than JPG | About 20–30% smaller than WebP |
| Works in current browsers | Everywhere | Practically everywhere | Nearly everywhere (Chrome, Edge, Firefox, Safari 16+) |
| Website builder support | Everywhere | Very wide | Growing, but not every builder accepts uploads |
| Transparent backgrounds | No | Yes | Yes |
| Best for | Fallback only | Your safe everyday choice | Large photos, when your site accepts it |
Good to know: some platforms, like Wix and Shopify, already convert your images to modern formats behind the scenes. Resizing before you upload still helps, because they start from a smaller file. WordPress has accepted WebP and AVIF uploads since version 6.5, as long as your hosting supports them.
The simple rule
- Use WebP for almost everything. It's small, sharp, and works everywhere.
- Try AVIF for your largest photos if your website platform accepts it. If the upload is refused or the image looks off, go back to WebP.
- Keep logos and icons as SVG so edges stay crisp (more on that next).
- Always keep your original full-size photo in a folder. Shrinking is a one-way street: you can't add detail back later.
What I use
AVIF can squeeze out a little more quality at the same file size, but I use WebP for nearly everything, including this website. It works in every browser, every website builder, and every free tool, so there's nothing to troubleshoot.
Part 3: SVG, the format for logos and icons
A normal photo (JPG, PNG, WebP) is like a mosaic made of thousands of tiny colored tiles. Blow it up and you start to see the tiles, so edges get blurry and blocky. An SVG is more like a set of drawing instructions: “draw a red circle here, write the word Plumbing there.” Because the browser redraws it fresh every time, it stays perfectly sharp at any size, from a tiny phone screen to a huge monitor, and the file is usually tiny.
At normal size, a PNG logo and an SVG logo look the same. Zoom in and the PNG's edges go soft and fuzzy, while the SVG stays sharp, and the SVG is often the smaller file: in the PDF's example, about 4 KB compared with 33 KB for the PNG.
Always use SVG for
- Your logo, especially in the header of your site
- Icons, like phone, email, map pin, and social media icons
- Simple graphics with flat colors and clean edges, like badges, diagrams, or a service area map
Turning a PNG logo into an SVG (5 min)
- 1
Best first step: ask whoever designed your logo for the original vector file (it may be called .svg, .ai, .eps, or .pdf). That's always cleaner than converting.
- 2
If you only have a PNG, SVGcode is free, runs in your browser, and keeps your image on your computer. Drop in a PNG and download the SVG.
- 3
Or try VectorCraft by ArtCraft at getartcraft.com, a free, open source vector app for Windows, Mac, Linux, or the web. Open your PNG, click its layer, press Image Trace in the tool palette at the bottom, pick one of 12 presets, then export as SVG. It's still in development.
- 4
Adobe Express also has a free online PNG-to-SVG converter (it needs a free Adobe account).
- 5
Zoom in on the new SVG to check the result. If letters look lumpy or colors are off, the original was too complex or low-resolution to trace well, and it's worth having a designer redraw it.
These tools work best on simple logos with a few solid colors. Don't use SVG for photos: use WebP for those.
Part 4: Free tools that do the work
- 1
Squoosh: best for one image at a time
A free tool from Google that runs in your web browser at squoosh.app. Drop in a photo, pick WebP or AVIF, and drag the quality slider while you compare before and after side by side. Nothing to install, and your images stay on your computer. Set the width under Resize, choose WebP, and start the quality around 75. Lower it until you can see a difference, then nudge it back up.
- 2
TinyPNG: best for a quick batch
Drag a handful of images onto TinyPNG and it shrinks them automatically, with an option to convert to WebP or AVIF. The free version limits how many and how large, which is plenty for a homepage cleanup. Use it for a batch of photos that are already the right width.
- 3
PhotoCraft by ArtCraft: best if you also want a photo editor
A free, open source photo editor from getartcraft.com for Windows, Mac, Linux, or right in your web browser, with no account needed. It's a good fit if you want to crop, straighten, or brighten a photo and export a web-ready copy in the same place. Use Image Size to set the width, then Export As to choose WebP, set the quality, and see the estimated file size before you save. PhotoCraft doesn't export AVIF, so use Squoosh or TinyPNG for that. Its makers label it “early alpha,” so expect the odd rough edge and save a copy of your originals first.
- 4
PageSpeed Insights: check your work
After you re-upload your new images, run your homepage through PageSpeed Insights again and compare the score and load time with your first test.
Your progress checklist
- Run PageSpeed Insights and note your score (5 min)
- Back up your original photos in one folder (2 min)
- Resize your hero image to 1920 px wide (3 min)
- Save it as WebP (or AVIF) under 250 KB (3 min)
- Shrink the other large images flagged by the test (10 min)
- Swap your logo for an SVG version (5 min)
- Re-upload and replace the old files on your site (5 min)
- Re-run PageSpeed Insights and compare (2 min)
- Make it a habit: resize every new photo before uploading
This started in our free website help groups. Join us on Nextdoor or Facebook to ask your own questions.
Want a hand with any of this?
If your site is still slow after a photo cleanup, I can take a look. The Next.js sites I build resize and convert photos automatically, so you never have to think about file sizes again.
Common questions
Should I use WebP or AVIF?
WebP, for almost everything. AVIF files can be a little smaller, but WebP works in every browser, website builder, and free tool, so there's nothing to troubleshoot. Try AVIF for your largest photos if your platform accepts it.
Will smaller photos look worse?
Not if you resize to the width the page actually shows and keep the quality around 75. Compare before and after in Squoosh: most people can't tell the difference, but they will notice a page that loads in one second instead of five.
My website builder already optimizes images. Do I still need this?
It still helps. Wix and Shopify convert images to modern formats behind the scenes, but they start from whatever you upload, so a resized photo gives them a smaller file to work with. WordPress has accepted WebP and AVIF uploads since version 6.5, as long as your hosting supports them.
Can I turn a photo into an SVG?
No. A photo of your team, shop, or work is too detailed to turn into drawing instructions. Use WebP for photos and save SVG for logos, icons, and simple flat graphics.
What if I get stuck?
Ask in our free website help group on Nextdoor or Facebook. If you'd rather hand it off, the Next.js sites I build resize and convert photos automatically, so you can upload straight from your phone.