Images are powerful tools for enhancing the content on your website. A combination of images and text will convey a message better than text or images can by themselves. You have very limited time to grab a visitor's attention and visual content can be a great way to do so. Not only do people process images much faster than text, we are much better at retaining visual information. Images also affect our emotions and attitude which influence our decision-making. An article or page on your website that includes images is twice as likely to be read as one that contains only text.

It is important to use images appropriately if you are going to add them to your website. Things to keep in mind when using images on your website:

• Important information should be contained in text. If it is hidden within an image, search engines cannot process this information.
• Images should spark interest in the viewer, but also be relevant to the page content. "Filler images" do not trigger the same response as images that are relevant to the page content.
• Images load slower than text so be sure to pay attention to image size as well as the number of images used on a page.
• Be sure to upload quality images to your website. Low quality images can look unprofessional and have a negative affect on the appearance of your website. Make sure the image is at least as large as the area it will be used in. Uploading smaller images and increasing their size to fit a certain area will cause the image to become blurry or skewed.
• Image filenames should be informative and provide a description of the image. This filename gives Google and other search engines important information about the image subject matter. Uploading an image with the filename "image1.jpg" does not provide any information to search engines, while the filename "large-white-house.jpg" offers a brief description of the image subject matter.

Adding Images to a Post or Page

Let's take a look at how to add images to a post or page and make adjustments to the images we add.

1. Adding an Image
2. Editing an Image
3. Video: Adding Media to a Post or Page

Adding An Image

In order to add an image to our content, we need to be in the main editing section for that particular post or page. Before we add the media file, place your mouse cursor where you want the image to display within your content. Once you have done so, click on Add Media above the primary content area.  

Here we will select the image we want to add. We can choose from images currently in our Media Library, upload a new file, or insert an image from an external URL. Be careful when using images from an external URL. If that URL ever changes, the image you have added will no longer display on your website. If you are uploading a new image, please be sure to read our article on uploading new media for important information on image details.

To select the image you would like to use on your website, click the thumbnail so that it is highlighted and the blue check mark appears in the upper right corner of the image. If you would like to add more than one image at a time, you can hold down Ctrl and click multiple images. You will notice that the Attachment Details for that image have now appeared to the right of your Media Library. If you have not done so yet already, you may update your image Title, Caption, Alt Text, and Description. 

You will also see Attachment Display Settings under the Attachment Details section. You may need to use the far right scroll bar to navigate further down the page to see this information. This section will allow us to control the alignment of our image within the content, the image link, and the size of the image. 

Alignment

• None - No alignment will keep the image aligned to the left, but text will not wrap around the image.
• Center - The image will be centered on the current line and text will not wrap around the image.
• Left - Left alignment will align the image to the left of the page. Text will be wrapped around the image on the right.
• Right - Right alignment will align the image to the right of the page. Text will be wrapped around the image on the left.

Link To

• None - The image has no link and will simply be displayed within the page.
• Media File - The image within your page will be linked to the full size version of the image. 
• Attachment Page - The image will be linked to it's attachment page. All images that are uploaded generate a unique attachment page which looks much like a post with simply the image and it's details.
• Custom URL - The image will be linked to any page that you specify. This can be a page on your site or an external page. Make sure that anytime you use a custom URL you include "http://" or the link will not work properly. 

Size

You can choose from a few preset image sizes including Full Size, Medium, Thumbnail, and custom presets. Do not worry if these presets do not match exactly what you are looking for. We can set an exact size once the image has been added to the page.

Editing an Image 

Now that our image has been added to the page, we can make further adjustments. Clicking anywhere on the image you have added will bring up a small toolbar just above the image which will allow us to change the alignment , enter the image editor , or delete the image from the page . You will also notice that the image is now surrounded by small white squares. Clicking and holding your mouse button on one of these squares will allow you to resize the image by dragging the squares in and out.

The two link buttons  at the top of the editing tools will allow you to edit (left icon) or remove (right icon) any links that you have added to the image.

If we click the editing button , we will be taken to the Image Details screen to make additional edits to the image. Many of these have been covered already, but there are a few additional fields that we cannot access from other areas. 

Custom Size

Here we can give our image a specific Width or Height (in pixels). This is valuable if you know the exact dimensions you would like your image to be. You can type the Width or Height in their respective fields, or you may use the arrows that appear if you hover your mouse over either field. The original image proportions are retained so editing one will automatically update the other.

Advanced Options

Under the advanced options we can update our Image Title Attribute. If you hover your mouse over an image on a website, sometimes additional text will appear. The text that appears in most instances is the Image Title Attribute. Title Attributes do not contribute to image SEO, but this can be useful for providing non-essential information such as additional image detail, or a call to action. If your image links to an external website, clicking the check box "Open link in a new window/tab" will make sure your site still remains open after someone clicks the image. The remaining fields under advanced options are truly for advanced users and we will not be covering those in this article.  

You can also edit the original image or replace the existing image by using the two buttons below the image. Replacing the image will take you back to your media library to select a new image. Clicking Edit Original will allow you to crop or resize the original image which we cover in more detail in our Uploading Media Files article. 

Video: Adding Media to a Post or Page