Image decisions explained
How to prepare images for forms, email and websites
A form wants compliance, an email needs a sensible attachment and a website needs fast repeated delivery. Treating them as the same task creates avoidable failures.
Why these workflows should not be identical
An upload form is a pass-or-fail system. It may enforce an exact format, maximum KB and exact dimensions. Email is more flexible: recipients mainly need a file that arrives quickly and opens easily. A website repeatedly delivers the image to many visitors, so every unnecessary byte affects performance and bandwidth.
Start by identifying the destination. Optimizing without knowing the constraint often creates a file that is smaller but still rejected—or a file that passes while looking worse than necessary.
Workflow 1: strict upload forms
- Copy every stated rule.Record maximum size, exact or maximum pixels, accepted format and any naming requirement.
- Fix dimensions before chasing KB.An exact 600 × 600 requirement needs crop or fit, not compression alone.
- Export the required format.Do not choose WebP if the portal accepts only JPG.
- Reduce with a safety margin.For a 100 KB limit, aim slightly below it rather than exactly 100.0 KB.
- Verify all rules together.File size, pixels and format must pass on the same final file.
Paste the portal requirement and validate the corrected result in one flow.
Workflow 2: email attachments
Email rarely needs the full camera resolution. Resize photographs to roughly 1600–2000 pixels on the long edge, export a compatible JPG near 80–85% quality and check the attachment size. For a screenshot with small text, PNG may be clearer; crop empty areas before compressing.
Several medium-sized files are often easier to send than one huge original set. When there are many images, process them together and download a ZIP while keeping the originals elsewhere.
Apply one email goal to multiple files without uploading them.
Workflow 3: website images
Match the exported width to the largest size actually rendered. A card displayed at 600 pixels does not need a 4000-pixel source delivered to every visitor. Use WebP as a strong starting point for photos and product images, while retaining PNG where lossless detail or transparency proves worthwhile.
Performance also depends on the page: reserve image dimensions to prevent layout movement, use meaningful alternative text when the image conveys information and avoid embedding important words only inside an image. Keep an original source so future designs can generate new sizes cleanly.
Comparison matrix
| Priority | Form | Website | |
|---|---|---|---|
| Main goal | Pass exact rules | Easy delivery | Fast repeated loading |
| Dimensions | Exact stated limit | Usually reduced | Match rendered size |
| Format | Whatever is accepted | JPG or PNG | Often WebP |
| File-size target | Below hard maximum | Comfortable attachment | As light as visually acceptable |
| Final check | KB + pixels + format | Opens and reads well | Visual quality + page performance |
A reusable five-minute workflow
- Write down the destination and its hard constraints.
- Crop unnecessary content and set the final dimensions.
- Compare JPG, PNG and WebP when the format is flexible.
- Inspect the result at its normal viewing size.
- Download with a clear name and keep the original separately.
Check it with real data
Test your own image in all three formats
The lab keeps the same dimensions, compares real file size and creates three downloadable files without uploading the image.
Open the optimization lab