This focused guide explains a practical task and the decisions that help make the result clear and useful. For related planning, continue with image selection guide mobile layout guide.
1. Identify which images need preparation
List the images used on the page and note where each appears, its displayed dimensions, and whether it is informative or decorative. Prioritize oversized files that occupy large areas or repeat across pages.
Keep an original copy of each asset before exporting web versions. Use the smallest dimensions that remain sharp at the intended display size, accounting for higher-density screens when needed.
2. Choose a suitable format and file size
Use a modern format such as WebP when it is supported by the publishing setup and suits the asset. Compare quality after compression; photographs, logos, and transparent graphics may need different formats.
Avoid resizing a small source image upward or compressing until visible artifacts distract from its content. The goal is an appropriate balance of clarity and file weight, not the smallest possible file at any cost.
3. Place images with layout in mind
Set image dimensions in the page layout so the browser can reserve space, and use responsive display behavior where the site supports it. Keep image crops intentional across desktop and mobile compositions.
In Wio, review the image inside its section and across the full page. Do not add extra full-width images when they do not help explain the content or support the design.
4. Check performance and image meaning
Preview the published page on a phone and a desktop connection. Check whether large images delay the main content, whether below-the-fold images load appropriately, and whether compression changed important visual details.
Keep filenames descriptive and write alt text for the image’s actual content. File optimization does not replace image selection, useful alternatives, or meaningful surrounding text.
