---
title: Image Optimization
description: "Modern formats, correct dimensions, and compression that cut bytes without ruining visual quality."
canonical: https://penasihathosting.com/en/hosting-wiki/image-optimization
type: wiki
locale: en
updated: 2026-10-29
author: Willya Randika
---

# Image Optimization

## Overview

- **Summary:** Modern formats, correct dimensions, and compression that cut bytes without ruining visual quality.
- **Author:** Willya Randika ([profile](/penulis/willya-randika))

## Article

Images are often the largest resource on a page. Changing format and dimensions can improve loading faster than switching themes or adding plugins. The effect shows up in [Core Web Vitals](/en/hosting-wiki/core-web-vitals), especially LCP.

## Choose a format

JPEG is still safe for photos because it is widely supported. PNG fits graphics and transparency but is too large for photos. WebP is supported by almost every modern browser and is usually smaller than JPEG. AVIF compresses better, but encoding is slower and support is uneven.

SVG fits logos and icons because it stays sharp at any size. Do not use SVG for photos. Provide a WebP or JPEG fallback through the picture element when you use AVIF.

## Dimensions matter more than format

Uploading a 4000-pixel image and displaying it 400 pixels wide still wastes bandwidth. The browser downloads the large file even though it looks small. Use `srcset` and `sizes` so the browser picks a suitable size.

```html
<img
  src="/img/hero-800.jpg"
  srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450"
  alt="Hosting dashboard"
  fetchpriority="high"
/>
```

The `width` and `height` attributes prevent layout shift. For a hero image, do not use lazy loading. The LCP image should load immediately with high priority.

## Compression

`cwebp -q 80 input.jpg -o output.webp` is enough for a quick conversion. For AVIF, `avifenc --min 0 --max 63 -a end-usage=q -a cq-level=28` is a starting point. Compare the result visually, not just by file size.

WordPress optimization plugins can generate WebP or AVIF. Test whether the plugin strips metadata or damages images. A CDN can also convert automatically, but make sure caching and the `Vary: Accept` header are configured correctly.

Keep originals outside the document root or in object storage. When an image is replaced, change the filename or add a hash so the CDN does not serve the old version.

## What to avoid

Recompressing an already damaged file only makes quality worse. Upscaling a small image creates a large file that is still blurry. Large animated GIFs should be replaced with MP4 or WebM video.

Image optimization works best with a [CDN](/en/hosting-wiki/cdn), [browser cache](/en/hosting-wiki/browser-cache), and [lazy loading](/en/hosting-wiki/lazy-loading).

## FAQ

<Accordion>
  <AccordionItem title="Is WebP always smaller than JPEG?">
    Usually, but not always at the same visual quality. Test several images and compare the results.
  </AccordionItem>
  <AccordionItem title="Is AVIF safe to use now?">
    In many modern browsers, yes. Provide a WebP or JPEG fallback for older browsers and test encoding time.
  </AccordionItem>
  <AccordionItem title="Why is my hero image slow?">
    Check file size, dimensions, and priority attributes. The LCP image should not use lazy loading and should not depend on JavaScript.
  </AccordionItem>
</Accordion>