How to add an image to WordPress – with SEO tips

how to add an image to WordPress

Get control of your images in WordPress

This will show you how to add an image to WordPress using good SEO and optimization practices.

This means preparing the image for web display, naming the file before uploading and adding Alt Text for good search engine visibility.

How to Add an Image to WordPress

This guide will help you develop a workflow for your images that is fast and effective for publishing, SEO and internal search.

1. Prepare your image.

This means optimizing the quality and resizing the dimensions of the image using an application. This ensures good quality, and a small enough file size to make your pages load as fast as possible.

NOTE: WordPress automatically creates thumbnails from your uploaded image based on your settings at Settings >> Media.

Image optimization applications:

Next you need to name the file itself with relevant keywords that make SEO and internal media search easier.

renaming image files for SEO

WordPress will automatically add dashes between the words in your file after being uploaded, so you are free to add your keywords with spaces.

2. Upload the image file.

It can be moved later but it’s easier to place your cursor where you want your image to end up.

In the post edit page, click the Add Media button.

Add Media Button - WordPress

You can also access the media uploader directly by navigating to Media >> Add New.

You’ll be presented with the Insert Media window.

Insert Media Dialogue Box

Instant access to your media library and upload window

You can drag and drop any number of media files into this window, or click the Select Files button to open a dialogue box.

3. Edit the image properties.

Once the image has finished uploading you can edit the image properties and choose its display settings.

Image Properties Dialogue

Attachment Details

  • Title – Displays when the mouse cursor hovers over the image and in galleries.
  • Caption – Displayed underneath the image on your page. Your currently active theme determines the styling and can include basic HTML.
  • Alt Text – Used when the browser can’t render the image and for visually impaired users. Also critical for Search Engine Optimisation (SEO) visibility.
  • Description – Displayed on the images attachment page and can be displayed by the theme.

Display Settings

  • Alignment – Determines whether the image is centered with space either side, floats left or right which allows text to flow around it, or with no alignment at all.
  • – Controls whether the image is also a link and if so where it goes. If you choose Media File it will link to the original.
  • Size – Choose the width/height that is closest to the display size you want. The smaller the file the faster your pages will load.

4. Place and edit the image.

Click the Insert into post button. Your image will appear in the post edit page.

You can edit images in your post by clicking them once.

Edit Images in WordPress - Shrek Cat Image

From here you can:

  • Edit the properties and display settings.
  • Delete it (from the post only).
  • Resize it by clicking and dragging from one of the corners.
  • Place the image in a different spot by clicking and dragging from the center of the image.

Now that you’ve got some basic practices for preparing and uploading images in WordPress you can speed up the process.

Questions? Let us know in the comments. :-)

photo credit: Sergiu Bacioiu via photopin cc

8 Responses to “How to add an image to WordPress – with SEO tips”

  1. randykepple May 11, 2013 at 2:05 am #

    Photoshop is one of the best tools for optimizing your photos for the web. There is a lesser known feature called “Save for Web” under the file saving menu. Basically what this does is strip out the meta data and embedded thumbnails. It does not affect the quality of the image (depending on how much lossy compression you choose). You get the same quality image at a third the file size!

    You can choose what meta data to include, such as copyright information. Test it out for yourself. Take an image and size it to 600 pixels (longest dimension) and save it as a JPEG (Quality 10) to your desktop. Now, take the same image and use the Save for Web option and choose the same options (JPEG @ level 80) and compare the two file sizes. Dramatic difference. Multiply that over a site filled with thousands of images and you are exponentially saving a ton of bandwidth and server space. :)

    • Herrin Larkan May 21, 2013 at 3:24 pm #

      I finally published a post for people that use Photoshop.

      You make an important point about bandwidth especially as a cumulative process.

      How to prepare images for the web in Photoshop http://wptribe.net/how-to-prepare-images-for-the-web-in-photoshop/

    • jo sandelson (@josandelson) May 23, 2013 at 6:53 pm #

      Good post. I was wondering whether very high was better than high ie. 80 rather than 60 and if that saved bandwidth ?

      • Herrin Larkan May 23, 2013 at 9:04 pm #

        In Photoshop lower quality (60 instead of 80) means smaller files as well. Basically go as low as you can without giving up too much quality and you will save bandwidth yes.

  2. Why Need SEO May 13, 2013 at 7:10 pm #

    Your post is useful for content optimization & image optimization. Could you please share with me, Which SEO plugin is best plugin for wordpress websites.

  3. Dennis Miller May 13, 2013 at 9:48 pm #

    This is very useful information for seo thanks for share

  4. Anirudh Karthik June 5, 2013 at 10:30 pm #

    Should we add Image credit where we have taken the image?

    • Herrin Larkan June 9, 2013 at 1:24 am #

      It’s up to you. Having ownership over the image and if you’re a photographer often you would. Putting a watermark of your website address can work well.

We'd love to know your thoughts...