Smaller Images, Faster Pages: Where to Start

A large original can be perfect for editing and unnecessary for a website card. Before trying another performance plugin, look at the images your page actually sends to a visitor. Preparing the file at the right dimensions is a practical place to begin.

Start with the image people see first

Find the main image near the top of the page. Check its displayed size, the dimensions of the uploaded original and the file weight. A wide banner, a product image and a small article thumbnail need different exports. Keep an original copy, then create a web version for the real layout.

In Image Studio, enter maximum dimensions, choose a format and export. The measured output tells you what the tool produced. A percentage saving is useful for comparing your own input and output; it does not predict a percentage improvement in page speed.

Balance detail against download weight

Start with Balanced quality and compare the result at a useful viewing size. Look closely at lettering, faces, fine texture and high-contrast edges. A smaller file that damages essential detail is the wrong export for that image.

Try a lower quality setting when the result still looks good. If compression alone is not enough, check dimensions before lowering quality again. The KB budget is a target to test, not a promise that every photograph can fit every limit. The tool warns when the requested budget cannot be reached.

Match the format to the result

The browser interface exports WebP or JPEG. Compare the actual files rather than assuming one format always wins. Input quality, texture and the dimensions you choose all affect the outcome. Keep the format supported by your publishing system, and review the image after it has been uploaded.

Transparent artwork needs extra care: JPEG cannot preserve transparency. The format comparison guide explains the available choices and the differences between browser and command-line output.

Loading behavior matters too

web.dev's LCP guide explains that Largest Contentful Paint includes the loading and rendering path for the largest visible image or text block. File size is only one part of that path. Server response, resource discovery and rendering delays can also matter.

Avoid lazy-loading the main LCP image. In Publish, the “Main image above the fold” option prepares early-loading markup; other images use lazy loading. Select the option for the image's real role on the page, rather than marking every image as the main image. Reserved width and height also give the layout useful sizing information.

Check the page after publishing

Upload the result, confirm the URL and test the finished page using your browser's performance tools or PageSpeed Insights. Compare the same page under similar conditions. A local preview verifies the image workflow; it does not measure your production host or visitors' connections.

If the site uses multiple display sizes, prepare suitable versions and connect them through your publishing system's responsive image markup. Image Studio can resize individual exports; it does not automatically deploy a complete responsive image pipeline to your website.

Turn one fix into a publishing routine

Choose dimensions, compare quality, export, then check the live page. That sequence makes image weight a decision you can review instead of a surprise after launch. Open Compress Images to prepare a lighter version of your next upload.