Image Formats and Sizes: A Plain Guide

Images do a lot of work on a small business site. They show the product, the shop, the people. They are also usually the heaviest part of a page. A little understanding of formats and sizes goes a long way toward a site that looks good and loads quickly.

The formats worth knowing

There are a handful of formats, and each suits a purpose.

JPEG is the usual choice for photographs. It compresses well and works everywhere.
PNG suits graphics with sharp edges, text or transparent backgrounds. It can be large for photos.
SVG is for logos and simple icons. It stays sharp at any size and is typically small.
WebP and similar newer formats often keep quality while using less space. Most current browsers support them, and many website tools convert images to them for you.

If your tool handles conversion automatically, you may not have to choose. If not, use JPEG for photos and SVG or PNG for logos.

Size comes in two kinds

People say “size” for two different things. One is the dimensions, meaning how wide and tall the picture is. The other is the file size, meaning how much space it takes to store and send. A photo straight from a modern camera or phone can have far more dimensions than any screen needs, and a large file to match.

Before uploading, resize the image to roughly the width at which it will be displayed, and let your tool or an image editor compress it. If a photo appears in a column on the page, there is no benefit in uploading an image many times wider than that column.

Do not rely on the browser to shrink it

A common mistake is to upload a huge image and let the page display it small. The visitor still downloads the whole file. On a slow connection that can mean a long wait for something they see at a fraction of its size.

Keep quality where it matters

Compression trades a little detail for a smaller file. Test a few levels and look at the result on the screen where it will be shown. A hero image that fills the page deserves more care than a small thumbnail. Avoid compressing the same file repeatedly, since each pass can add visible flaws.

A simple workflow

Here is a routine for a fictional shop.

Step one: choose the best photo. Step two: crop it to the shape it will appear in. Step three: resize it to about the width it will display. Step four: save as JPEG or let the website tool convert it. Step five: add a short description for people who cannot see the image.

Add descriptions

Every meaningful image should have a short text description, known as alt text, which is read aloud by screen readers and shown if the image fails to load. Describe what the image shows, in a phrase. Decorative images can have an empty description.

Common mistakes

Uploading original camera files, using PNG for photographs, stretching a small image to fill a large space, forgetting to describe images and filling a page with many large pictures. Another is putting words inside an image, since the text cannot be read by search engines or screen readers.

Try this today

Open your home page and list the images on it.
Check the file size of the largest ones, and resize and compress any that are much larger than they need to be.
Add a short description to each meaningful image.

Field notes

Use JPEG for photos and SVG or PNG for logos and graphics.
Resize to roughly the displayed width before uploading.
Do not let the browser shrink a huge file.
Compress carefully and check the result.
Describe every meaningful image in words.

Prefer to hand the work off? Describe your business to websiites and review the finished site before choosing a plan. The pricing page lists what each plan includes.

How It Works — See the full site before you pay.
Frequently Asked Questions — Everything you need to know about websiites.com: pricing, how the AI build works, domain setup, cancellation, and what happens if you’re not happy.
Website Builder Pricing — Simple, transparent pricing for your AI-built business website.