Updating Images
How to replace images on your website, recommended sizes and formats, and where to find great free stock photos for your wellness business.
Updating Images
Images make or break a website. A beautiful, well-sized photo of a sunrise yoga session does more for your brand than a thousand words of copy. But a blurry, poorly cropped image does the opposite.
This guide covers everything you need to know about managing images on your TransformWebsites site: how to replace them, what sizes to use, which formats work best, and where to find stunning free photos.
Replacing an Image in Sanity
Swapping out an image on your website takes less than a minute.
Navigate to the image
In Sanity Studio, find the page or document that contains the image you want to replace. Scroll to the image field — you'll see a thumbnail preview of the current image.
Click on the image field
Clicking on the image field opens your options. You'll typically see buttons for "Upload," "Browse" (media library), and "Remove."
Upload your new image
Either click "Upload" and select a file from your computer, or drag and drop the image directly onto the field. You can also click "Browse" to pick an image you've previously uploaded to the media library.
Set the hotspot and crop
After uploading, you may see a hotspot/crop tool. This lets you define the focal point of the image — the part that should always stay visible, even when the image is cropped for different screen sizes. Drag the circle to the most important part (usually a face or the main subject).
Publish
Click "Publish" on the document to make the new image live on your website.
[VIDEO: Korneel shows how to replace an image and the ideal export settings]
The hotspot feature is especially important for hero images and profile photos. A hero image might be displayed as a wide banner on desktop but cropped to a square on mobile. Setting the hotspot tells the system "keep this area visible no matter what" — so your subject doesn't get awkwardly cropped out.
Recommended Image Formats
Not all image formats are created equal. Here's what to use and when.
| Format | Best for | Why |
|---|---|---|
| WebP | Photos on the web | Best compression with high quality. Creates smaller files than JPG without visible quality loss. Modern browsers all support it. |
| JPG | Photos (fallback) | The classic photo format. Use when WebP isn't available from your source. Great quality-to-size ratio. |
| PNG | Logos, icons with transparency | Supports transparent backgrounds. Larger file sizes than JPG/WebP, so only use when you need transparency. |
| SVG | Simple graphics, icons | Vector format that scales to any size without getting blurry. Perfect for logos and simple illustrations. Not for photos. |
If your photo editing software doesn't export WebP, JPG is perfectly fine. Our system automatically optimizes images during delivery, so even JPG images will be served in the most efficient format to visitors' browsers.
Formats to avoid:
- BMP — Huge file sizes, no compression. Never use for web.
- TIFF — Great for print, terrible for web. Way too large.
- GIF — Only use for simple animations. For photos, it produces awful quality.
Recommended Image Sizes
Getting your image dimensions right ensures they look sharp on all devices without slowing down your site.
Hero Images (Full-Width Banners)
Recommended size: 1920 x 1080 pixels
These are the big, beautiful images at the top of pages. They stretch across the full width of the screen, so they need to be large enough to look crisp on high-resolution monitors.
If your image is wider than it is tall (landscape orientation), it'll work great as a hero. Square or portrait images usually don't work well in hero positions.
Blog Post Images
Recommended size: 1200 x 800 pixels
Images that appear within your blog post body. This size gives you plenty of resolution for the content area without being unnecessarily large.
Featured Images / Thumbnails
Recommended size: 800 x 600 pixels
These are the preview images shown in blog listings, card grids, and social media shares. They're displayed at a smaller size, so they don't need to be as large as hero images.
Profile Photos / Headshots
Recommended size: 600 x 600 pixels (square)
For team member profiles, author bios, and testimonials. Square format works best since these are often displayed in circular or square containers.
Logo
Recommended size: varies, but typically 400 x 100 pixels for a horizontal logo
Your logo should be a PNG (if it needs a transparent background) or SVG (the best option). We usually set this up during your project, but if you ever need to update it, those are the guidelines.
Keeping File Sizes Small
This is where a lot of people trip up. An image can be the right dimensions but still be way too large in file size, which slows down your website.
Target file sizes:
- Hero images: under 500KB (ideally 200-300KB)
- Blog images: under 300KB (ideally 100-200KB)
- Thumbnails: under 150KB (ideally 50-100KB)
- Profile photos: under 100KB
How to Reduce File Size
Use an image compression tool. Before uploading to Sanity, run your images through a free compression tool. These reduce file size without visible quality loss.
Great free options:
- Squoosh (squoosh.app) — Made by Google, works in your browser. Drag and drop your image, adjust the quality slider, and download. This is the one we recommend most.
- TinyPNG (tinypng.com) — Despite the name, works for JPG and WebP too. Upload, compress, download.
- ImageOptim (Mac only) — A desktop app that compresses images automatically.
A quick Squoosh workflow: open squoosh.app, drag your image in, set the format to WebP, adjust quality to about 80%, and check that the file size is under your target. That's it — takes 30 seconds and can make your image 5-10 times smaller.
Export at the right size from the start. If you're using Canva, Photoshop, or Lightroom, export your images at the recommended pixel dimensions rather than exporting at full resolution and hoping for the best.
Don't upload screenshots of photos. It sounds obvious, but it happens. Screenshots are typically PNG format with poor compression. Always use the original image file.
Our system automatically optimizes images when they're served to visitors, converting them to efficient formats and resizing for different devices. But starting with a well-optimized image means even better performance. Think of it as a head start.
Naming Your Image Files
This is a small thing that makes a surprisingly big difference for SEO.
Do this:
yoga-retreat-bali-sunrise.jpgsarah-coaching-session-outdoors.webpcoliving-space-kitchen-barcelona.jpg
Not this:
IMG_4532.jpgScreenshot 2024-03-15 at 10.23.45.pngfinal-FINAL-v3-edited.jpg
Name your image files with descriptive, hyphenated words before uploading to Sanity. Search engines read file names, and a descriptive name gives Google another signal about what your page is about. It's a small SEO win that takes zero extra effort.
Why does this matter? Google can't "see" your images the way humans can. It relies on the file name, alt text, and surrounding content to understand what an image shows. A descriptive file name helps your images appear in Google Image Search, which is a real source of traffic for wellness businesses (people search for retreat photos, yoga poses, coaching setups, etc.).
Free Stock Photo Sources
Not every image on your website needs to be a custom photo. High-quality stock photos work perfectly for backgrounds, blog posts, and decorative sections. Here are the best free sources.
Unsplash (unsplash.com)
The gold standard for free stock photos. Huge library, excellent quality, and completely free for commercial use. The wellness and nature categories are particularly strong.
Great for: landscape photos, lifestyle imagery, yoga and meditation, nature, travel.
Pexels (pexels.com)
Similar to Unsplash with a great collection. Their search function is solid, and they also have free stock videos if you ever need those.
Great for: people, workplace, wellness, food, fitness.
Kaboompics (kaboompics.com)
A hidden gem. The photos have a distinctive, editorial style that works beautifully for wellness brands. Very curated and aesthetic.
Great for: lifestyle, feminine aesthetics, food, interiors, wellness.
Pixabay (pixabay.com)
Larger library than some others, though quality varies more. Good for finding specific things when the other sites come up short.
Great for: illustrations, vectors, niche topics.
All these stock photo sites offer images that are free for commercial use without attribution required. However, it's always good practice (and good karma) to credit the photographer when you can. You can usually find the photographer's name on the image page.
Using Your Own Photos
Your own photos are always the best option when they're high quality. They show the real you, your real space, and your real work. No stock photo can replicate that authenticity.
Tips for using your own photos:
- Hire a photographer for key images. A professional shoot for your hero images, headshots, and main pages is worth the investment. Everything else can be stock or phone photos.
- Phone photos can work. Modern smartphones take excellent photos. Just make sure the lighting is good (natural light is your friend) and the image is in focus.
- Batch your photo sessions. Take a bunch of photos in one session and use them across your website, social media, and blog posts for months.
- Include people. Photos with people perform better than photos of empty spaces. Show yourself working with clients, leading a retreat, or in your coaching environment.
Troubleshooting Image Issues
"My image looks blurry on the website." The image is probably too small. Check the dimensions — if you're using a 400px wide image in a hero spot that needs 1920px, it'll look pixelated. Re-upload at the recommended size.
"My image is sideways or upside down." This is an EXIF rotation issue, common with phone photos. Open the image in a photo editor, rotate it to the correct orientation, save, and re-upload.
"The image takes forever to load." The file size is probably too large. Compress it using Squoosh or TinyPNG before uploading. Aim for under 500KB for hero images and under 200KB for everything else.
"I can't upload my image — there's an error." Check the file format (stick to JPG, WebP, PNG, or SVG) and make sure the file isn't corrupted. If it still won't upload, try a different browser or message us on Slack.
"The image looks good on desktop but gets weirdly cropped on mobile." Use the hotspot feature in Sanity to set the focal point. This tells the system which part of the image to prioritize when cropping for different screen sizes.
Be careful about using images from Google Image Search. Most images you find through Google are copyrighted. Stick to the free stock photo sites listed above, or use your own photos. Using copyrighted images without permission can lead to takedown notices or legal issues.
Quick Reference Cheat Sheet
| Image Type | Dimensions | Max File Size | Format |
|---|---|---|---|
| Hero / Banner | 1920 x 1080 | 500KB | WebP or JPG |
| Blog Image | 1200 x 800 | 300KB | WebP or JPG |
| Thumbnail | 800 x 600 | 150KB | WebP or JPG |
| Profile Photo | 600 x 600 | 100KB | WebP or JPG |
| Logo | 400 x 100 | 50KB | SVG or PNG |
| Icons | 64 x 64 | 10KB | SVG |
Last updated today
Built with Documentation.AI