Best Image Sizes for a Business Website

There is no single ideal pixel size for every website image. The right file depends on where the image appears, how wide it is displayed and whether the website serves responsive versions to different devices. The practical goal is to avoid uploading a huge original for a small space while keeping enough detail for sharp displays.

Use display size as the starting point

Practical source-image starting points

Use	Typical source width	Notes
Full-width hero photograph	1,600–2,400 px	Crop deliberately and test the mobile focal point
Large article or service image	1,200–1,600 px	Usually sufficient for a wide content column
Card or listing image	600–1,000 px	Serve smaller responsive variants where possible
Product image	1,200–2,000 px	Depends on zoom requirements and product detail
Logo	SVG preferred	Use a properly prepared raster fallback if required
Icon or simple diagram	SVG preferred	Keep text readable and provide accessible alternatives

These are starting points, not rules. A website should ideally generate several sizes and allow the browser to choose the most appropriate file.

Use responsive images

The HTML srcset and sizes attributes let the browser select between image variants. This avoids sending a 2,000-pixel file to a phone when a much smaller version is sufficient.

Ask the developer or platform to confirm:

• which image sizes are generated;
• whether srcset and sizes are present;
• how crops are handled at different breakpoints;
• whether important images receive appropriate loading priority.

Choose formats by content

• AVIF or WebP: strong choices for compressed web photographs where the platform supports them.
• JPEG: a reliable fallback for photographs.
• PNG: useful when lossless detail or transparency is required, but often larger.
• SVG: suitable for logos, icons and diagrams made from vectors.

Do not convert every asset blindly. A complex photograph and a simple line diagram have different needs.

Set width and height

HTML width and height attributes help the browser reserve the correct aspect ratio before the file loads. This reduces layout movement. The responsive CSS can still resize the image visually.

Use lazy loading selectively

Images below the first screen can often use loading="lazy". The main hero or other image likely to be the page's largest visible content should normally load promptly rather than being delayed without testing.

Control file weight, not only dimensions

Two images with identical dimensions can have very different file sizes. Compress photographs to the lowest size that still looks acceptable at normal viewing distance. Keep the editable master separately from the web export.

As a working target, many content images can be kept below a few hundred kilobytes, while thumbnails should often be much smaller. Treat this as a review prompt rather than a rigid limit; visual complexity and quality requirements vary.

Prepare crops for real layouts

• identify the subject or focal point;
• test landscape, square and mobile crops;
• avoid placing essential text inside photographs;
• do not rely on automatic centre-cropping for faces or products;
• keep original files so crops can be recreated.

Write useful alternative text

Alternative text should communicate the image's purpose when the image carries information. Decorative images can use an empty alt attribute. Do not repeat the page title or stuff keywords into every alt description.

Image delivery checklist

• The source file is no larger than necessary.
• Modern formats are used where appropriate.
• Responsive variants are available.
• Width and height are present.
• Below-the-fold images use lazy loading where appropriate.
• The primary image is not accidentally delayed.
• The crop works on mobile.
• Alt text matches the image's function.

Sources checked

• web.dev: Choose the right image format
• web.dev: Responsive images
• web.dev: Serve images with correct dimensions
• web.dev: Browser-level image lazy loading

Technical guidance checked on 21 July 2026.

The next practical step is to inspect the largest five image files on the current site and compare their natural dimensions with their displayed size.