Start with the space the image needs to fill

There is no single pixel dimension that is correct for every website image.

A small team photo, a product thumbnail, a blog image and a full-width homepage hero all have different jobs. The amount of detail they need also changes depending on the design and the screens on which they will be viewed.

A practical starting point is to ask: How large will this image realistically appear on the website?

If you are preparing the site yourself, check the image area in your website builder and preview it on desktop and mobile. If a designer is building the site for you, ask what source dimensions they want before sending a folder full of full-resolution camera files.

The aim is not to make the image exactly the same pixel width as one particular screen. Modern websites can display images at different sizes on different devices, and high-density screens may benefit from extra detail. The aim is simply to avoid obvious excess.

A small image that will only ever appear in a narrow card usually does not need the same source dimensions as a large banner.

Do not treat one KB target as a universal rule

It is tempting to look for a rule such as “every website image must be under X KB.” That is usually too simplistic.

File weight depends on the image itself. A photograph with fine texture, foliage, hair, shadows and many colour changes can be harder to compress than a simple image with large areas of similar colour. A large hero image also has different quality requirements from a small thumbnail.

Instead of forcing every image under one arbitrary limit, use a sequence:

1. crop the image to the shape you actually need;

2. resize it to sensible web dimensions;

3. choose an appropriate file format;

4. apply reasonable compression;

5. inspect the result at its real display size.

If the file is still heavier than you would like, adjust the export quality or dimensions in small steps. Stop when further reduction causes visible blur, blockiness, banding or loss of important detail.

The best file size is therefore not one number. It is the smallest practical file that still looks acceptably clear for its actual job.

Compression: smaller is useful, but not at any cost

Compression is where many image files lose unnecessary weight, but aggressive compression can also make a professional photo look rough.

For photographs, lossy compression is often appropriate because small amounts of discarded image information may be difficult to notice in a detailed photo. The key is to preview the result instead of assuming that a low quality setting is automatically “better” because it creates a smaller file.

Lossless compression is useful when exact edges, flat colours, line work or transparency matter. It generally preserves image information more faithfully, although the result may be larger than a strongly compressed photographic file.

Keep an uncompressed or high-quality master copy outside your website workflow. If you repeatedly open, save and recompress the same lossy file, quality can degrade over time. Create new web exports from the best source file you have.

A good website image has two jobs: it should look clear, and it should not carry more data than the page actually needs.

That sounds simple until you open a photo from a modern phone or camera and see several different numbers attached to it. There may be pixel dimensions, a file size in megabytes, a quality setting, and a file extension such as JPG, PNG or WebP. They are related, but they are not the same thing.

For a small-business owner, the useful goal is not to chase one “perfect” image size. It is to prepare each image for the job it will do on the website: use sensible dimensions, choose an appropriate file format, compress it carefully, and check that it still looks good at the size visitors will actually see.

Four image terms that are easy to mix up

Before changing an image, it helps to separate four basic ideas.

Image dimensions are the width and height of the image in pixels. A photo that is 4000 pixels wide contains far more pixel information than a small thumbnail that may only appear a few hundred pixels wide on a page.

File size is how much storage and download data the image uses. It is usually shown in kilobytes (KB) or megabytes (MB). Two images with the same pixel dimensions can have very different file sizes because of their content, format and compression settings.

Compression is the process of storing the image more efficiently. Some compression is lossless, which aims to preserve all image information. Other compression is lossy, which removes some information to achieve a smaller file. Used carefully, lossy compression can reduce photographic file sizes substantially without creating an obvious visual problem.

File format is the way the image data is encoded and stored. JPG or JPEG, PNG, WebP and AVIF all handle image data differently. The right choice depends on the type of image, whether transparency is needed, the website platform, and the balance you want between quality and file weight.

These four decisions work together. Changing only one of them may not solve the real problem.

Why a huge camera image can be unnecessary website weight

A phone or camera may produce an image several thousand pixels wide because the original file is designed for editing, cropping, printing and other uses. A website often displays that same photo at a much smaller size.

If an image will never appear anywhere near its original dimensions, uploading the full-size original can be wasteful. The visitor does not gain useful visible detail from pixels that are never displayed, yet the website may still need to store, process or deliver more image data than necessary.

Some website builders and content systems automatically optimise uploaded images or create smaller versions for different devices. That is useful, but it is still good practice to start with a sensible source image instead of treating every full-resolution original as a web-ready file.

Keep your original photograph somewhere safe. Then create a separate website version for uploading.

JPEG, PNG, WebP and AVIF in plain English

You do not need to become an image-format specialist to make sensible choices.

JPEG or JPG

JPG and JPEG refer to the same image format. JPEG uses lossy compression and has long been a practical choice for photographs. It is widely supported and can produce reasonably small photo files, but it does not support transparency.

Use it when you need a straightforward photographic format and your platform or workflow does not require a newer option.

PNG

PNG uses lossless compression and supports transparency. It is useful for graphics, screenshots, interface-style images and artwork where sharp edges or transparent areas matter.

PNG is often a poor default for ordinary photographs because photographic PNG files can become much larger than a well-compressed JPEG, WebP or AVIF version.

WebP

WebP is a modern web image format that supports both lossy and lossless compression as well as transparency. It has broad support in modern browsers and often provides smaller files than older formats at comparable visual quality.

For many small-business website photos and blog images, WebP is a practical option when the website platform accepts it reliably.

AVIF

AVIF is another modern format designed for efficient image compression. It supports lossy and lossless encoding, transparency and other advanced image features. It can produce very efficient files, especially for photographic content.

Whether you should use AVIF depends on your website platform, image workflow and compatibility requirements. If your builder handles it well, it can be useful. If not, WebP or a properly prepared JPEG remains a sensible choice.

What about SVG?

SVG is different from the photographic formats above because it is a vector format. It can be excellent for logos, icons and simple illustrations that need to stay sharp at different sizes. It is not a replacement for normal camera photographs.

A practical image-preparation workflow for small-business owners

You can keep the process simple.

1. Keep the original. Store the full-quality source photo separately so you can create new versions later.

2. Crop for the website. Match the composition and aspect ratio to the place where the image will appear. Do not carry large unused areas that will simply be cropped away in the page builder.

3. Resize the website copy. Reduce excessive dimensions while keeping enough detail for the largest realistic display size.

4. Choose the format. Use a format that suits the image and is supported by your website platform. For photos, WebP, AVIF or JPEG may be appropriate. Use PNG where its lossless detail or transparency is genuinely useful.

5. Compress and preview. Reduce file weight gradually and compare the result with the original at the size visitors will see. Look at faces, product details, text inside screenshots, gradients and fine edges for visible damage.

6. Check desktop and mobile. Make sure the uploaded image still looks clear after the website applies its own cropping, scaling or responsive behaviour.

7. Finish the image properly on the website. File preparation is only one part of using images well. If you are still deciding which photographs belong on your site, read our guide to choosing photos for your small-business website. When the image is in place, handle its text alternative separately using our guide to alt text for website images.

A useful final check before you upload

Before adding an image to your website, ask five questions:

· Is this the right crop for where the image will appear?

· Are the dimensions sensible for that use?

· Is the file format appropriate for the type of image?

· Has the file been compressed without obvious visual damage?

· Have I kept a better-quality original somewhere else?

If those answers are yes, you are usually in a much better position than someone who simply uploads every original photo exactly as it came from the camera.

Clear images do not need to be unnecessarily heavy

Image optimisation is not about making every file as tiny as possible. It is about removing data that does not create a useful visual benefit for the visitor.

Resize for the real job, choose a format that suits the image, compress carefully, and judge quality at the size people will actually see. That gives you a practical balance: photos that still represent your business well without adding avoidable weight to the page.

If you are planning a new website or reviewing an existing one, WebWise Management can help you build a clear, professional website with practical content and image preparation in mind.

Contact

Reach out anytime for personalized support.

Email:

Phone:

info@webwisemanagement.co.za

+27 72 709 7557

© 2026. All rights reserved.

Services

Home

Portfolio

Contact