How do I change a photo or banner on my site?

How do I get the photo ready?

1. Pick the size. About 2,000 pixels wide is plenty for a full-width banner. About 1,200 pixels is usually enough inside a page.
2. Use JPG or WebP for photos. Keep PNG and SVG for logos and flat graphics.
3. Name the file clearly, such as front-of-shop.jpg rather than IMG_4821.jpg.
4. Make sure you can use it. Your own photos are fine. Pictures found through a web search usually belong to someone else.

On a Mac, open the photo in Preview, choose Tools, then Adjust Size, enter a width with the proportions locked, and save. Apple covers this in Resize, rotate or flip images in Preview.

On Windows, the Photos app has a resize option in its menu. The exact label varies between versions.

The opposite problem matters too. A banner swap can also stall on a photo that’s too small. A picture sized for a social post looks blurry when it’s stretched across a whole screen. If you can, send or upload the largest original you have.

A photo straight from a phone is often several megabytes. That’s far more than a web page needs, and it slows the page on mobile data.

The short version

• Shrink the photo first: about 2,000 pixels wide for a banner, 1,200 inside a page.
• Select the image, choose Replace, upload, add alt text and save. A banner with text over it is usually a section background.

How do I swap a photo on a page?

These steps follow WordPress’s Image block guide.

1. Log in, go to Pages, hover over the page and select Edit.
2. Select the image. A toolbar appears above it.
3. Select Replace.
4. Choose Upload for a file on your computer, or Media Library for one already on the site.
5. Open the settings sidebar and fill in Alternative text with a short description. If the photo is only decoration or repeats nearby text, leave it empty.
6. Select Save at the top right. Older versions say Update.

Expected result: the new photo shows on the live page when you reload it in a private window.

To crop or straighten without leaving the editor, select the image and choose Crop in the toolbar.

How do I change a banner with text on top?

A banner with a heading over a photo is usually a Cover block, not a normal image. WordPress describes it in its Cover block guide.

1. Select the banner. Make sure you’ve selected the Cover block itself, not the heading inside it. The List View in the editor helps you pick the right one.
2. In the toolbar, choose Replace and upload or pick the new image.
3. Use the Focal point picker in the settings sidebar to keep the important part of the photo in view.
4. Check the text is still easy to read over the new photo. If it isn’t, a darker overlay color in the block’s Color settings can help.
5. Select Save.

On a page builder site, the banner is usually a section or row with a background photo. Open the builder, select the section’s settings (often a wrench or gear icon), and change the background image there.

What about a slideshow banner?

Rotating banners, or sliders, are usually set up in a plugin or the page builder, each with its own screen. If you’d like one added, or the slides changed, that’s a job to ask for. Sliders are slower than a single photo, so one strong image is often the better choice.

Why does this matter?

The first photo on a page sets the tone. A sharp, current photo of your real place or people builds trust. A blurry or huge photo does the opposite, and a very large file can make the whole page slow on a phone.

What are the common mistakes and edge cases?

• Faces cut off on phones. Wide banners crop their sides on small screens. Keep faces and key details near the center, or set the focal point.
• Text in the image. Words baked into a photo can’t be read by search engines or screen readers, and they get cut off on phones. Put text in the page instead.
• Old photo still showing. Your browser or the site cache may show a saved copy. Try a private window.
• Removing old files. Replacing a photo doesn’t delete the old file from the Media Library. Before you delete it there, check no other page uses it. WordPress describes this on its Media Library screen page.

What should I write for alt text?

Alt text describes the image for people who use screen readers, and search engines read it too.

• Describe what matters: “Technician repairing a furnace in a basement.”
• Skip “image of.” Screen readers already say it’s an image.
• Mark purely decorative images as decorative so they’re skipped.
• Write for a person, not for keywords.

The W3C’s alt decision tree helps when you’re unsure. See also our answer on writing alt text.

What if this didn’t work?

• Upload fails. The file may be too big or an unusual format. Resize it, save as JPG, and try again.
• No Replace button. Your user role may not allow uploads. Ask the site’s administrator.
• The page got slower. The new image is probably too large. See why is my website slow and our answer on image sizes.

How does E-3 handle this?

Email the photo and the page address to support@e3help.me, ideally the largest original you have. A person at E-3 places it on the page. Website care includes daily backups, so the old photo can come back if you prefer it.

Related questions

• How do I add or remove a staff member on my website?
• Can you update the text on my website?
• Should I use stock photos or real ones?