# How to Optimise Images for the Web: Formats, Sizes and Lazy Loading

- Canonical page: https://bestwebhosting.website/optimize-images-for-web/
- Language: en
- Arabic version: [كيف تحسّن صور موقعك: الصيغ والمقاسات والتحميل المؤجل](https://bestwebhosting.website/ar/optimize-images-for-web.md)
- Published: 2026-11-12T07:00:00+00:00 — Updated: 2026-11-12T07:00:00+00:00
- Author: BWH Newsroom — Best Web Hosting
- Section: [Websites & WordPress](https://bestwebhosting.website/category/websites.md)

> How to prepare images for the web: choosing JPEG, PNG, WebP, AVIF or SVG, sizing and compressing correctly, responsive images and lazy loading.

Images are usually the heaviest part of a web page. A single unoptimised photo from a modern phone can weigh more than the rest of the page combined. Getting images right is one of the easiest ways to make a site faster, and it also improves accessibility and search visibility when done properly.

- Pick the format by image type: photos in WebP or AVIF (with JPEG as fallback), logos and icons in SVG.
- Resize images to the largest size they are displayed at, then compress them.
- Use responsive images, set dimensions and lazy-load images below the first screen.

## Choose the right format

| Format | Best for | Notes |
| --- | --- | --- |
| JPEG | Photos | Universal support; no transparency |
| PNG | Screenshots, images needing exact detail or transparency | Large for photos |
| WebP | Photos and graphics | Usually much smaller than JPEG/PNG at similar quality; supports transparency |
| AVIF | Photos | Often smaller still; encoding is slower |
| SVG | Logos, icons, simple illustrations | Vector, sharp at any size; tiny file size |
| GIF | Avoid for animation | Use short MP4/WebM video instead |

All modern browsers support WebP and AVIF. Many CMS platforms and CDNs can generate them automatically from your uploads.

## Resize before you upload

If an image is shown at most 1,200 pixels wide, uploading a 6,000-pixel original wastes bandwidth even if the CMS creates smaller copies. Resize to about the largest display size, allowing for high-density screens (often up to twice the CSS width for key images).

## Compress sensibly

- Lossy compression at moderate quality settings usually looks the same to visitors and saves a lot of data.
- Strip unnecessary metadata, such as camera details and location, which also protects privacy.
- Check the result visually at actual size, especially for product photos and text in images.

## Serve responsive images

Responsive images let the browser choose the right size for each screen. In HTML this uses the srcset and sizes attributes. WordPress creates several sizes on upload and adds these attributes automatically when themes use its image functions. Phones then download small files and large screens get large ones.

## Prevent layout shifts

Always include width and height attributes (or a CSS aspect ratio) so the browser reserves space before the image arrives. This keeps the page from jumping, which improves the CLS metric of Core Web Vitals.

## Lazy-load, but not everything

The attribute loading="lazy" delays images until they are about to scroll into view. Use it for images below the first screen. Do **not** lazy-load the main image at the top of the page, since that is often the Largest Contentful Paint element; you can give it fetchpriority="high" instead.

## Write useful alt text

Alt text describes the image for screen-reader users and appears when an image fails to load. Describe what matters in context: "Two-bedroom apartment living room with balcony view" is more useful than "image1" or a list of keywords. Decorative images should have empty alt text (alt="").

## Name and organise files

- Use descriptive file names such as red-running-shoes.webp instead of IMG_4821.jpg.
- Delete unused images and old sizes you no longer need, which saves storage and backup time.

## Automate it

Image optimisation plugins, CDN image services and build tools can resize, compress and convert images automatically. Automation makes sure every editor's upload is handled, not just the ones you remember to optimise.

## Frequently asked questions

### Should I convert all images to WebP or AVIF?

For photos and most graphics, yes, ideally automatically. Keep SVG for logos and icons.

### Does image optimisation help SEO?

Yes, through faster pages and better accessibility. Descriptive file names and alt text also help images appear in image search.

### How large should a web image be in kilobytes?

There is no single rule. Many content images can be well under 200 KB; hero images may be larger. Compare file size against visual quality and page speed.

Topics: Images, WebP, Website speed