FileDial › Guides › Photos and images
How to shrink photos for a website on a Mac
By Himanshu Ranjan · Updated 8 November 2026
To make photos web-ready on a Mac, resize them to the largest size your page needs (for example Resize › Resize to 2048 px), run Compress › Compress, and convert to WebP with Convert › Convert to WebP or AVIF with Convert › Convert to AVIF. FileDial does each in batches, offline, on copies.
The three levers
Page weight from images comes down to dimensions, compression and format. Dimensions come first: a 4000 pixel wide photo shown in a 800 pixel column wastes most of its bytes. Compression comes second, and format third.
Do them in that order. Shrinking dimensions gives the biggest and safest win, because nothing about the picture's look changes at the size it will actually be shown.
Steps in FileDial
Work from a copy of your folder so the masters stay put. FileDial writes new files beside the originals and has Undo, and the result card shows before and after sizes after each step.
- Select the photos in Finder.
- Resize with Resize › Resize to 2048 px, or Resize › Resize to 1080 px for smaller slots, or Resize › Resize… for exact numbers.
- Compress with Compress › Compress, or set a ceiling with Compress › Compress under 500 KB.
- Convert to a web format with Convert › Convert to WebP or Convert › Convert to AVIF.
- Strip metadata with Privacy › Remove all metadata if you want no camera or location data on the page.
Choosing a format
JPG is the safe default. WebP, announced by Google in 2010, supports lossy and lossless modes, transparency and animation, and is usually smaller. AVIF, from the Alliance for Open Media, supports more features and is supported in all major browsers since 2024 according to Wikipedia. Keep in mind that FileDial's note on WebP says metadata is not kept.
A sensible pattern is to serve AVIF or WebP with a JPG fallback. If you do not control your site's markup, a CMS or image plugin may do this for you, and then you only need to upload sensible originals.
- Photos: WebP or AVIF, JPG fallback.
- Transparent logos: PNG or WebP.
- Animated images: an MP4 or animated WebP beats a GIF, see the GIF to MP4 article.
Social preview images
Pages usually need a share image too. The Open Graph protocol, created at Facebook, uses an og:image property and suggests adding width and height. FileDial has a ready size: Resize › Open Graph image (1200×630), which gives a JPG filled around the subject with metadata removed. For LinkedIn there is Resize › LinkedIn post (1200×627) and for X, Resize › X post (1600×900).
The Open Graph page does not recommend a specific size, so treat these as the common practice sizes FileDial offers rather than a requirement.
Test on a real page
Numbers on a result card are only half the story. After processing, put the images on a test page and look at them on a phone and a laptop, with a throttled connection if your browser offers it. Look for visible compression artefacts, banding in skies and soft text in images.
Watch the largest image on each page, usually the hero at the top. That one affects how quickly the page feels loaded, so give it the most care and keep supporting images lighter. Use sensible dimensions: a picture shown at 800 pixels wide rarely needs more than about double that for sharp screens.
Finally, keep your pipeline repeatable. A recipe that resizes, compresses and converts means every new image gets the same treatment, which is better than remembering steps each time.
- View on a phone and a laptop.
- Spend effort on the largest image.
- Make the steps a recipe.
Mistakes to avoid
The biggest mistake is uploading full camera originals and letting the page shrink them in the browser, which wastes bandwidth. The second is over-compressing a hero image until banding appears in the sky. The third is converting everything to AVIF without a fallback, which breaks the picture in software that cannot read it.
If your site platform resizes and converts for you, upload good-quality sensible-size images and let it work. If you hand-build pages, a batch tool like FileDial is a quick, private way to prepare assets. For a one-off, Preview can resize through Tools > Adjust Size and export JPEG with a quality setting, which is enough for a single image.
Privacy and workflow
Unpublished site photos should not take a trip through a free optimiser. FileDial never uploads files and works offline. Recipes chain tools such as Resize, Compress and Convert, and a watched folder can run the recipe on every image you drop in, which turns web prep into a drag and drop.
Questions
What size should website photos be?
No single answer fits, because it depends on the slot. Make the file only as wide as the largest size it will be displayed, with a little extra for sharp screens. FileDial's Resize to 2048 px and Resize to 1080 px presets cover common choices.
WebP or AVIF for a website?
WebP has wider support in older software, while AVIF targets better compression and adds HDR. Wikipedia says all major browsers support AVIF since 2024. Many sites serve AVIF first with WebP or JPG fallbacks. FileDial converts to both. If you hand-write your markup, serve AVIF or WebP with a JPG fallback, since older software may not read newer formats.
Does converting to WebP remove metadata?
FileDial's note on Convert to WebP says metadata is not kept. That is a bonus for web use, since location and camera data do not end up on the page, but keep your originals if you need the metadata. Stripped metadata cannot leak your camera model or location from a public page.
How do I make a social share image?
Use Resize › Open Graph image (1200×630) in FileDial, which produces a JPG filled around the subject with metadata removed. Check the platform's current guidance, since sizes change, and remember the Open Graph protocol itself does not set a size.