TL;DR
- Size: full-width photos should be no wider than 1,920 pixels. Smaller spots need smaller photos, but never smaller than the spot.
- Format: JPG for photos, PNG for logos and graphics with transparent backgrounds.
- Avoid formats most browsers can’t show, like TIFF.
- Match the shape to the spot. A wide photo may crop badly into a tall space.
What Size Should Photos Be for My Website?
- Full-width photos, like banners and galleries: no wider than 1,920 pixels. That’s the maximum we’ve used for portfolio photos.
- Smaller spots, like a team headshot: sized for the spot. One team page needed photos about 500 by 500 pixels.
- Never smaller than the spot. A small photo stretched to fit looks blurry.
WordPress automatically scales down very large JPG photos (over 2,560 pixels wide or tall), but it’s still best to resize first. See How to Resize Images Before Uploading Them to Your Website
What Format Should Photos Be?
- JPG for photos.
- PNG for logos and graphics that need a transparent background. See What Logo File Formats Do I Need for My Website and Print?
- Not TIFF. Most browsers can’t show it. When one client sent a TIFF, Beth told them, “I changed the file to a JPG so it shows on your website.”
What About iPhone Photos?
iPhones often save photos as HEIC files. Newer versions of WordPress convert HEIC uploads to JPG automatically, but only when your server supports it. See WordPress’s note on HEIC conversion.
To skip the problem, set your iPhone to take JPG photos: go to Settings, then Camera, then Formats, and choose Most Compatible.
Does the Shape of the Photo Matter?
Yes. Each spot on your site has a shape: wide (landscape), tall (portrait), or square. A photo in the wrong shape gets cropped awkwardly. On one site, a landscape photo didn’t crop well into a tall spot, so Beth asked for a different version.
Why Do My Scanned Photos Look Bad?
Usually the scan settings. As Beth explained, “You may not like the colors if you’re scanning in at a low resolution.” Scan at a higher resolution, in full color.
What Webmaster For Hire Recommends
- Send originals. We can resize, crop, and convert them.
- Bigger is better than smaller. Photos can be shrunk without losing quality, but not enlarged.
- Take both shapes when you shoot new photos, wide and tall.
:: Common Questions ::
Why Does My Logo Look Blurry?
The file is usually too small, so it gets stretched. Send the original logo file.
Where Does a Blog Post’s Share Preview Image Come From?
When someone shares your post on social media, the preview image comes from a photo in the post. As Beth told one client, “There just needs to be a photo in the blog post to have a thumbnail. It may take a day or so to work.” If your site uses an SEO plugin like All in One SEO or Yoast SEO, it has a place to set the default sharing image.
Have Photos to Add?
See our Webmaster Retainer, or request a consultation.
