Your hero image is probably the heaviest thing on your homepage. It is also the first thing a customer in Raleigh sees when they tap your site from a parking lot in Cary. If that file is a big PNG, they wait for it.
You can fix that this week. You do not have to trade away picture quality to do it.
Here is how we handled it on the A New Leaf Painting rebuild, and how you can do the same.
Why do large PNG hero images slow your pages on a phone?
PNG is built to keep every pixel exactly as it was. That is a good thing for logos and screenshots. It is a heavy thing for a wide photograph.
A phone on a weak signal has to pull that whole file before the top of your page looks finished. Your visitor does not see a "large PNG." They see a blank space where your work should be.
Hero images hurt most for a simple reason. They sit at the top, they are the biggest picture on the page, and visitors judge you in those first seconds.
What is lossless WebP, and how is it different from lossy?
WebP is an image format that browsers now handle widely. It has two modes.
- Lossy WebP throws away detail the eye is unlikely to miss. The file gets much smaller, and the picture is no longer the original.
- Lossless WebP keeps every pixel. It just stores them more cleverly than PNG does, so the file is usually smaller.
That second one is the point of this post. Same picture, smaller package.
"Usually smaller" is worth a pause. Lossless WebP is not guaranteed to win on every image. You will check each file, and we will get to how.
When should you choose lossless over a smaller lossy file?
Take a position before you convert anything. Here is ours.
Choose lossless when softness would be noticed:
- A hero photo that fills the screen
- Finished work you are asking people to judge, like a paint job, a kitchen, or a deck
- Images with fine edges, text, or sharp lines
- Anything with transparency you need to keep exact
Choose lossy when the image is background texture or a small thumbnail where nobody studies the detail.
For A New Leaf Painting, the large hero images show real jobs. A painter's reputation lives in how a finished wall looks. A softer picture works against the sales pitch. So those went out as lossless WebP, identical pixel for pixel, and pages load faster on a phone without a softer picture.
If your business sells craft, do the same.
How do you find which images are the heaviest?
Do not convert everything. Convert what matters.
- Open your busiest page in Chrome on a laptop.
- Open the developer tools and go to the Network tab.
- Reload the page and filter by images.
- Sort by size, largest first.
The top three or four files are your list. On most business sites, one of them is the hero.
You can also run your site through our free speed test. It flags oversized images so you know where to start.
How do you convert a PNG to WebP step by step?
Keep the original PNG. Always. Work on a copy.
The no-install route: a browser-based tool like Squoosh lets you drop in a PNG, pick WebP, and switch the setting to lossless. Download the result.
The command-line route: Google publishes a free tool called cwebp. The command is cwebp -lossless original.png -o original.webp. If you have a folder of files, your developer can run it across all of them in one pass.
Some practical notes:
- Name the new file the same as the old one, with
.webpat the end. - If the tool offers a compression effort setting, a higher effort takes longer to run and can give a smaller lossless file. You only do this once per image, so spend the time.
- Convert the heaviest few first, then stop and test before doing the rest.
How do you confirm the picture is identical pixel for pixel?
Do not squint at the screen. Your eyes will tell you both files look fine, and that is true of lossy files too.
Instead, ask a computer to compare them. ImageMagick is free, and its compare command can count the pixels that differ between two images. Run compare -metric AE original.png original.webp null: and read the number it prints.
Zero means identical. Any other number means something changed, and you should not ship that file.
Another route: turn the WebP back into a PNG with dwebp, then compare the two PNG files. A matching result is the same proof.
This is the step people skip. It is also the step that lets you say "no loss" and mean it.
How do you serve the new file without breaking old image addresses?
An image has an address, just like a page does. Other sites, old blog posts, and search engines may still point to your .png address. Delete it, and you get a broken picture.
So do not delete it. There are two safe ways to ship.
- Offer both formats on the page. The page lists the WebP first and the PNG as the fallback. Browsers that understand WebP take it. Anything else takes the PNG. Both addresses keep working.
- Answer at the old address with the new file, if your platform can tell what the browser accepts.
The first is simpler and easier to reason about. We lean toward it.
This is the same discipline that ran through the whole A New Leaf rebuild. Every address the old site had published still had to answer. Images are no different from pages.
How do you measure the speed change afterward?
Test before you change anything. Write down what you see. Then test again after.
- Use the same page, the same phone, and the same connection each time.
- Run it more than once, because a single run can mislead.
- Watch how long the hero takes to appear, not just the overall score.
- Look at the picture itself on the phone. It should look exactly as it did.
If the page is faster and the picture is unchanged, you are done. If the WebP came out larger than the PNG for one file, keep the PNG for that file. That happens, and it is fine.
What should you do this week?
Pick one page, your homepage. Find its heaviest image. Convert it to lossless WebP, run the pixel comparison, and serve both formats.
That is an afternoon of work. If you would rather hand it off, it is the kind of fix we fold into custom web development every day, and our contractor website design work treats it as standard.
Either way, start with the speed test. It tells you which image to touch first.