How to Use the New Image Optimisation Settings
Last updated January 30, 2026
Our new Optimise panel gives you more control over how images are delivered, resized, and cropped — helping you balance visual quality with loading performance. Below is a quick guide to each setting and when you should use it.
Fetch Priority
Options: Default, High, Low, Auto
This controls how the browser ranks loading of your image.
| Setting | Best For |
|---|---|
| High | Hero images, top-of-page visuals, banners |
| Low | Decorative images or images below the fold |
| Auto (Recommended) | Automatically decides based on layout |
| Default | Acts as normal priority |
Re-sized Width & Height
You can define the output width and/or height in pixels. The system will resize the delivered file to that maximum dimension.
- Only width set (common for responsive layouts) → Height adjusts automatically
- Width + height set → Image is constrained to both values (Crop Mode affects how)
Crop Mode
This is the most powerful new control. It determines how the image is cropped or fitted when both height and width are considered.
| Mode | What it does | When to use |
|---|---|---|
| None | Resizes but does not crop | Most product or gallery images |
| Maintain Ratio | Keeps aspect ratio, fits within target dimensions | When consistency matters |
| Force | Forces exact dimensions (even if it must distort) | Rare use — not recommended for photos |
| At Least | Ensures the image is at least the target size | Background, full-bleed layouts |
| Pad Resize | Adds padding to avoid cropping | Logos, UI elements, graphics |
| Pad Extract | Similar to Pad but focuses on the main subject | Portraits or products with whitespace |
| Extract | Extracts the central focus area | Tight crops for hero banners |
| Cover | Fills the frame fully, cropping edges | Hero banners, sliders, backgrounds |
Quality
Options: 10% to 100%
Controls how compressed the final image is.
| Quality | Result |
|---|---|
| 100% | Maximum clarity, biggest file size |
| 70–85% (Recommended) | Visually sharp, much faster to load |
| 50–60% | Medium quality, fast load |
Recommended Starter Settings
| Image Type | Width | Crop | Quality | Priority |
|---|---|---|---|---|
| Hero / Banner | 2000–2400px | Cover or Maintain Ratio | 80% | High |
| Product Image | 1600–2000px | Maintain Ratio | 80% | Default |
| Thumbnails | 500–800px | Maintain Ratio | 70% | Low |
Was this article helpful?