Photos have the power to bring your mission to life in the minds of your visitors. In this article, we outline the steps to add and format photos on your website pages.
Make Your Photo Upload-Ready
Using large, high-resolution images on your site will negatively affect the time it takes to load pages—frustrating your visitors. While you want your photos to look sharp, the quality can actually be sized down significantly to appear nicely on a screen compared to the size you’d need to print them.
Small images should be under 100KB, and larger header images should be under 350KB. If you don’t have a program on your computer to crop and resize images, we recommend free tools like Pixlr or Canva.
Add a Photo to an Existing Page
The easiest way to add a photo to a page is by using the standard Image block. This block will embed a photo as its own section of the page, often spanning the full width of your content. (If you want to add a small image within the text, read about inline images instead.)
Once you are logged in to your website, open the page where you would like to add a photo and make sure you are looking at the editing view on the backend.
- Locate the position on the page where you’d like to add the photo and click “Add block.”
- Choose the Image block.
- Access the photo by uploading it from your computer, choosing from an existing image in your Media Library, or via an offsite URL (not recommended).
- Click on the image you want and adjust the Attachment Details on the right of the screen to add a title, caption, Alt Text and description if you prefer. For accessibility, we suggest adding at least a title and Alt Text for every image.
- When you’re ready, click the blue Select button at the bottom right of the media window and the photo will be added to your page.
- Preview your page to see how everything looks and publish or update when you’re ready for everyone to see the photo.
Change Image Settings
When you add a photo to the page using the Image block, you can easily access photo options related to size and link settings in the Block view on the right side of your screen.
If you want to change the alignment of your photo to left, center or right, those settings can be found on top of the Image block itself.
Swap a Photo
If you’d like to change a photo but keep the block where it is on the page, click the “Edit image” pencil icon at the top of the block.
From here, you can choose another photo from the Media Gallery or upload a new file like you did before.
Remove a Photo
To remove a photo completely, click the three-dot icon at the top of the Image block and select “Remove Block.”
Add Multiple Photos
You can add multiple photos throughout a page by using the Image block wherever you need it. If you’d like to display multiple photos together in a grid view or with columns, use the Gallery block instead.
With a Gallery, you can:
- Display multiple photos in columns
- Choose how many images should appear in a column
- Automatically crop images so that they fit nicely together
Add Inline Images
An inline image is one that appears within a Text block rather than its own Image block. You might use an inline image when you only have a small photo or want to add a thumbnail of a logo.
- Click the Text block where you’d like to add an inline image and place the cursor in the exact location where it should be added.
- Click the “Add block” option at the top of the page to find the Inline Image option in the Inline Elements category.
- Upload or choose the image you want to use from the Media Library.
- Click the blue Select button to add the image.
Once an inline image has been added, you can make adjustments to the size by dragging the corners of the image itself. You won’t see the block settings that are available for standard Image block.
To remove an inline image, click on it and then hit the Backspace or Delete option on your keyboard. Be sure to preview your changes before updating the page.
Add a Featured Image to a Page
A featured image is also called a header image. It’s the photo that shows at the top of your page or post. Learn more about adding a header image.
Still Have Questions?
Reach out to us within your Dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.