Client Tips: How to Prepare Photos Before You Upload Them to Your Website

The first post in our Client tips series, for business owners who update their own site.

You took a great photo and you want it on the website today. Totally fair. But a photo straight from your phone or design tool can weigh several megabytes, and a few of those will make any page crawl on mobile. The good news: fixing it takes about a minute.

Why this matters

On one client site we worked on, Madriz Ink, a tattoo studio on Square Online, the images across the site added up to about 750 MB. After compressing them, the total was about 80 MB. Both figures are approximate, as noted in the case study. Most of the weight came from large PNG files that didn't need to be PNGs.

You don't need to remember any of that. Just remember three numbers.

The three rules

JPG for photos. Keep PNG only for images that need a transparent background, like some logos.
Maximum 1200 px wide. That's plenty for a normal content image on most sites.
Under 500 KB per photo.

Step by step with Squoosh (free, in your browser)

Squoosh is a free image tool from the Chrome team. It runs in your browser, and your images don't leave your device.

Go to https://squoosh.app.
Drop your photo onto the page, or use Paste, or click the round button above it to open a file.
On the right-hand panel, under Edit, turn on Resize. Set Width: to 1200. Keep Maintain aspect ratio ticked, so the height adjusts by itself.
Under Compress, check that MozJPEG is selected as the format (it's the default on the right-hand side).
Move the Quality: slider while you watch the size shown at the bottom of the panel. Stop when the file is under 500 KB and the photo still looks good to you. Drag the divider in the middle of the image to compare it with the Original Image.
Click the Download button (the arrow at the bottom right) and save the file with a clear name, for example studio-front-window.jpg.

That's it. Do the same for each photo.

If your photo is already narrower than 1200 px, skip the resize and just compress it.

On Square and other builders: replace, don't delete

When you swap a photo, it's tempting to delete the old one and add a new one. On a website builder, that can do more damage than you'd think. A deleted image can take its alt text, link or position in a gallery or product with it, and you have to set all of that up again.

Square Online has a Replace option for this. In the site editor, select the image, then click Replace in the editing panel (in some sections it's under ••• > Replace). Then save and Publish (Square's help article).

That's how we worked on the Madriz Ink site. The heavy PNGs were replaced in place with compressed JPGs, and the alt text, links and order stayed the same.

Other builders usually have a similar "replace" option. Look for it before you reach for the bin icon.

Quick checklist

JPG (PNG only if you need transparency)
Width 1200 px or less
Under 500 KB
Clear file name (what-it-shows.jpg, not IMG_4821.jpg)
Replace the old image instead of deleting it
Save and Publish, then check the page on your phone

Need a hand?

Every site we build or repair comes with a simple care guide like this one, so you can keep it fast on your own. If your site already feels slow, send it to us →.