Website images have to look good and load quickly. A hero photograph and a small card image do not need the same output. Export separate sizes from one clean master rather than forcing the browser to shrink a huge source for every layout.

What to do

  1. 1.Identify each image’s layout and crop.
  2. 2.Export sizes that match the largest intended display.
  3. 3.Choose a supported, well-compressed photo format.
  4. 4.Load the real page on a phone and check sharpness.

Match the intended component

A wide hero may need a generous crop with safe space for text. A portrait card needs a different frame. Decide the layout before export; avoid putting faces or important logos near edges where responsive crops may cut them.

Choose sensible dimensions

Identify the maximum displayed width and account for high-density screens if needed. An original camera photo can be far larger than a web card requires. Keep the master file so you can prepare new crops later.

Use an efficient photo format

JPEG and WebP often work well for photographs. Which is smaller depends on encoding and browser support. Compress gradually, compare foliage and faces, then confirm the actual page loads and presents the image at the correct size.

Watch out for this

Large source files can slow a page even when CSS displays them at a small size.

TRY IT ON YOUR PHOTO

Continue in MintGrade: Export and Finish tools

Correct light and color first, then choose JPG or WebP in Finish → Export to test web file sizes.

Opens the relevant controls for JPG, PNG and WebP files. No edit is applied until you choose one.

Open export and finish tools in MintGrade →

Frequently asked question

What file format is best for website photos?

JPEG and WebP are practical options. Compare actual quality and compatibility for the site rather than trusting a single universal setting.