Compress Images for Websites
Website images affect transfer size and the work required to display them.
Start with the display dimensions, then choose a sensible format and compression level.
Start with the destination
The destination sets the useful limit. An email message, marketplace listing, website image, profile photo and print job can all need different dimensions and file sizes. Create a copy for the specific destination and keep the original untouched.
Recommended workflow
- Check the destination requirements for maximum file size and dimensions.
- Choose a practical pixel dimension instead of sending the full camera original by default.
- Use Kayefi to compress or convert the copy.
- Review the final result on the device you will use for the task.
- Save the delivery copy with a useful filename and keep the source separately.
What can go wrong
Two common problems are oversizing and over-compressing. Oversizing wastes bytes and may slow down a page or upload. Over-compressing can make text, skin, product labels and fine edges look poor. The right result sits between those extremes.
How to judge success
Success is not simply the lowest possible number. A useful file meets the destination’s rules, loads or uploads comfortably, and still looks right at the size people actually see.
Privacy note
The core processing workflow is designed to run in the browser for supported operations. The plugin does not create a permanent server image library. A browser may still refuse a particular format if it lacks the required decoding or encoding capability.
How to create a repeatable workflow
Keep one original folder and one delivery folder. Name the delivery copy for its role, record the destination dimensions when that helps your team, and avoid repeatedly compressing a compressed file. Starting again from the original gives the next export a cleaner source.
When a smaller file is not enough
If the destination still rejects the image after compression, check its pixel limits. A file can be under a byte limit and still exceed a dimension limit. In that situation, resizing is usually a more useful next step than pushing quality lower.
How to create a repeatable workflow
Keep one original folder and one delivery folder. Name the delivery copy for its role, record the destination dimensions when that helps your team, and avoid repeatedly compressing a compressed file. Starting again from the original gives the next export a cleaner source. This approach also makes future platform changes easier because the source stays intact.
Example decision
Imagine a product photo that is 6 MB at 5000 pixels wide and the marketplace recommends a maximum of 1 MB. Resizing the working copy to a sensible listing width may remove more unnecessary data than simply lowering quality. After resizing, use moderate compression and check the product label, edges and small details. The goal is a usable listing image, not the smallest theoretical file.
When to keep the larger copy
A delivery workflow should not replace the source. A portfolio image may need a larger version for a lightbox, an application may need a smaller version for upload, and a print service may request much more data. Store each as a derivative with a clear purpose instead of trying to force one file to serve every channel.
Final check before upload
- Confirm the destination file-size limit.
- Confirm width and height limits.
- Open the output and inspect important details.
- Confirm that the chosen format is accepted.
- Keep the original source somewhere safe.
A useful operating rule
Use the smallest copy that still does the destination’s job. That rule is more reliable than chasing a fixed quality number because it lets the final use determine the trade-off. A small profile image can be compressed much more aggressively than a large property photograph that people need to inspect.
When requirements change
Do the workflow again from the original source. Do not keep compressing an already compressed delivery file simply because it is convenient. The original gives the next export the best starting point.
Make the destination visible
When several people work on the same image library, record the destination in the filename or asset notes. This makes it clear that a small upload copy and a large editorial source have different jobs.
A repeatable workflow also reduces accidental quality loss because the source remains untouched and each new copy starts from a known baseline.
Frequently asked questions
What does Compress Images for Websites do?
It provides a focused browser workflow for the task described on the page and reports the actual result instead of promising a fixed outcome.
Are images uploaded to the Kayefi server?
Supported core processing runs in the browser. No permanent image storage is used by the plugin for these operations.
Can the result be larger than the original?
It can happen with some conversions or settings. Always compare the reported original and final sizes instead of assuming the selected operation guarantees a smaller file.