Prepare lightweight images for a website

Choose dimensions, format and compression without stretching your assets.

Step 1

Start with the placement

Measure how large the image will appear in the layout. Fit within 1600 px is a starting preset, not a rule for every website. The Fit preset keeps small originals at their source size by default. Disable that option only when you intentionally want enlargement.

Resize with a web preset

Step 2

Choose the output format deliberately

WebP is useful for many web images, while PNG may be appropriate when lossless detail matters. Keep transparency when the asset needs it. Browser encoding and color-profile conversion can change output appearance.

Export WebP

Step 3

Tune the size against visible quality

Try a 150 KB target for a representative asset, then inspect fine text and edges. File size alone is not a quality score. Test both light and dark parts of a batch before applying one setting to every file.

Tune the image size

Step 4

Check it in the real page

Place the downloaded image into your site and check its crop, resolution and nearby text. Use the color converter to test flat text/background color pairs; a flat-color ratio does not establish contrast over a changing photograph.

Check text contrast

Review before you send.

The preset is a starting point. Confirm the destination’s actual requirements, inspect the downloaded output and retain your originals. These tools do not connect to your account or submit the finished file to another website.