Image optimization: formats and sizes

Image optimization is the process of preparing graphics so they weigh as little as possible while keeping the quality visitors actually see. On a typical business website, photos account for the largest share of transferred data, so they largely decide how fast the page loads, especially on phones and slower connections. This guide covers formats, dimensions, compression, lazy loading and alt text, and ends with a checklist you can run against your own site.

Key takeaways

• On most websites images make up the largest part of page weight, so optimizing them usually brings the fastest gains.
• WebP is now a safe default format for photos because all major browsers support it.
• An image file should not be much wider than the largest size at which it actually appears on the page.
• The main image visible on first load should not be lazy-loaded, because that delays Largest Contentful Paint.
• Every image that carries meaning needs an alt attribute describing what it shows.

Why image optimization affects SEO and conversions

Google measures user experience partly through Core Web Vitals. For images, the one that matters most is LCP (Largest Contentful Paint): the time it takes to render the largest element in the viewport. An LCP of 2.5 seconds or less counts as good. On many sites that largest element is the hero photo, so its weight and loading behavior directly decide the score.

Beyond rankings, there is simple patience. A page where photos load in chunks looks unfinished, and mobile visitors pay for every unnecessary megabyte. That makes image optimization one of the cheapest ways to speed up a site. You will find more on site speed and its metrics on the LessCMS blog.

Image formats: which one to choose

JPEG and PNG: the classics and their limits

JPEG handles photos well but has no transparency, and heavy compression produces visible artifacts. PNG preserves every pixel, which suits screenshots and graphics with fine text, but a photo saved as PNG can weigh several times more than the same image as JPEG. A common mistake is uploading product photos as PNG simply because that is what the design tool exported.

WebP and AVIF: modern formats

At similar quality, WebP usually produces noticeably smaller files than JPEG and supports transparency, so it can replace both classic formats. AVIF compresses even further, but encoding is slower and tool support is less consistent. For most business sites, WebP is the sensible balance of size, quality and compatibility.

SVG for logos and icons

Logos, icons and simple illustrations belong in SVG. It is a vector format, so it stays sharp on every screen and is usually tiny. It is not suitable for photos.

Image sizes for the web: how many pixels you need

A photo from a camera or phone is often several thousand pixels wide, while on the page it sits in a column a few hundred pixels across. The browser still downloads the whole file and then scales it down. The rule is simple: the file should not be much wider than the space it fills, with some headroom for high-density screens.

Rough widths for common placements:

• Full-width hero: about 1920–2400 px.
• Image inside article content: about 1200–1600 px.
• Grid card or thumbnail: about 600–800 px.
• Team photo or avatar: about 400 px.

Treat these as a starting point, not a rule. Check in your browser's developer tools how wide the image really renders in your layout.

Compressing photos without visible quality loss

Lossy compression removes information the eye usually does not notice. For photos, a quality setting around 75–85% is typically indistinguishable from the original while producing a much lighter file. Compare results on screen rather than trusting a single number. Free tools such as Squoosh in the browser are fine for manual work; for many files, automatic conversion on the platform side is more reliable.

Manual or automatic: image optimization in a team

Manual image optimization works as long as one careful person runs the site. Once several editors upload photos, someone will eventually drop in a file straight from their phone. It is better when conversion to a modern format happens automatically on the platform side, and the team only watches two things: a sensible crop and a reasonable source resolution. A short guideline for editors also helps, for example: in-content photos no wider than 2000 px, alt text always filled in, no text baked into images. That one page prevents most problems before they reach the live site.

Lazy loading and the hero image

Lazy loading defers downloading images until the visitor scrolls near them. In HTML, all it takes is loading="lazy". It is great for galleries and images further down the page, but harmful for anything visible on first load. A lazy-loaded hero appears later, which worsens LCP. Also give every image width and height attributes so the browser reserves space and the layout does not jump, which protects your CLS score.

File names and alt text

Image optimization is not only about file weight. A descriptive name such as dental-clinic-waiting-room.webp instead of IMG_4832.jpg gives search engines context. Alt text describes the image to screen reader users and to search engines. Write it as a short sentence about what the photo shows, without keyword stuffing. Purely decorative graphics can have an empty alt.

Image optimization checklist for business websites

1. Photos saved as WebP (or AVIF), logos and icons as SVG.
2. File width matched to the display size.
3. Compression checked visually, with no visible artifacts.
4. Lazy loading for images below the fold, none for the hero.
5. Image dimensions set so the layout does not shift.
6. Descriptive file names and meaningful alt text.
7. LCP checked in PageSpeed Insights after every major change.

Common mistakes

• Uploading photos straight from the camera without resizing.
• Putting text into an image instead of HTML.
• A hero carousel with several large photos.
• Missing alt text, or alt text like "image1".

How LessCMS handles it

• Images added to the media library are automatically optimized to WebP, so there is no manual conversion.
• The media library has folders and search, which keeps graphics organized on larger sites.
• Pages are server-side rendered and served from the CDN edge, which helps content appear quickly.
• In the page editor you set section layouts separately for desktop, tablet and phone.

Frequently asked questions

What is the best image format for a website?

For photos, WebP is the best default; for logos and icons, SVG. AVIF produces even smaller files but is less consistently supported by design tools.

How large should an image be on a website?

There is no single standard, but an in-content photo usually lands between a few dozen and around 200 KB. A large hero can weigh more, but a file measured in megabytes signals that image optimization was skipped.

Does lazy loading help SEO?

Indirectly, yes, because it speeds up page loading. Do not use it for images visible on first load, though, because it delays LCP.

Does alt text matter for rankings?

Yes. Alt text helps search engines understand what an image shows and is essential for accessibility. Describe the actual content of the photo instead of listing keywords.

How do I check whether images are slowing down my site?

Run a test in PageSpeed Insights and check which element is responsible for LCP and which suggestions concern images. The report will point out oversized files and formats worth changing.

Want your photos converted to WebP automatically? See LessCMS plans and create an account, no card required.