Zipic guide
How to Optimize Images for a Website on Mac
Prepare a correctly sized copy, compare formats and quality, upload the selected version, then check the published page on mobile and desktop. Zipic handles the local compression step; your website or CMS controls delivery.
1. Choose dimensions for the image’s place on the page
Check the intended image width in your website editor or page layout. Include both narrow mobile layouts and wider desktop layouts. A 600 CSS-pixel-wide image might use a 1200-pixel-wide source for a 2× display. Keep the aspect ratio appropriate to the image slot.
Save a working copy before resizing. On Mac, open it in Preview, choose Tools → Adjust Size, enable Resample image, choose pixels and enter the width with Scale proportionally enabled. Save the copy. Changing a DPI label alone does not remove pixel data.
If your CMS creates responsive image sizes, use its recommended source dimensions and check the resulting page rather than uploading multiple unused copies.
2. Compare files before processing the whole batch
Choose a representative photo and, if relevant, a screenshot or transparent graphic. Keep the original alongside your candidates.
- In Zipic, open Compress Images. For JPG and PNG sources, choose WebP or JPG in the respective output settings.
- Adjust quality and use the preview divider to inspect the sample. Run Compress Images on your prepared copies in Finder.
- In the Compressed Images folder, compare each output with its source. Use Finder → Get Info for file size; check the picture at its intended display size.
- Keep the smaller candidate only if it preserves the details you need. If quality is inadequate, increase it and generate a new copy from the source—not from an already compressed result.
For photographs, check faces, texture and gradients. For screenshots, inspect small text and thin lines; retain the original PNG when converted text is not clear enough. For transparent graphics, inspect the result against the page background: JPG cannot retain transparency.
Once the samples work, process the remaining images and check their results individually.
3. Confirm that the page delivers the new image
Upload the selected file through your website’s normal publishing workflow. Open the published page in Chrome and open DevTools → Network. Enable Disable cache while DevTools is open, reload, and filter to Img. Open the relevant request to check its URL, preview and transferred size. Your CMS may serve a generated version rather than the file you uploaded.
Repeat with a narrow viewport and a desktop viewport. If the page still requests an old or oversized file, check the selected asset and your CMS’s responsive-image settings before compressing again.
4. Check page performance, not just image bytes
Run the page URL through PageSpeed Insights before and after the change, using the same mobile or desktop mode. Review the image-related diagnostics and Largest Contentful Paint (LCP), and repeat a lab test before judging a small difference. Record the page URL, test mode, image candidate and result so you can compare the same conditions.
If the main image still appears late, follow the report’s image-delivery and rendering diagnostics. Use lab results to check this release, then follow the real-user trend as its rolling data updates.
For your next batch, keep the originals and reuse the dimensions and quality choices that passed these checks. Follow the Finder compression steps or view Zipic for Mac.
Zipic for Mac by PangJiong
Zipic processes images and PDFs locally, with a one-time purchase and updates through the Mac App Store.