Adding Images to Posts or Pages
Posted by Kyle O'Hare on 19 January 2016 10:12 AM
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:
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.
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.
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.
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.
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