Adding images and other media to your WordPress site

1. Uploading Images

The classic Editor way

The easiest way to upload images in WordPress is to add them through the post or page editor.  The process is the same whether you are uploading images into posts or pages. (You can also load other media here including video and music but it is better to embed these from YouTube or Vimeo, we will come onto that later. )

Place your cursor where you want it

In order to add an image to your WordPress page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.

Upload your image

1.1. In your WordPress post or page editing screen click the “Add Media” on the top left.

Add media

1.2. This will open up the WordPress “Insert Media” screen below. You can select browse to get individual images from your computer or you can drag and drop multiple images into the space.

Upload screen

Once you have uploaded a file, make sure it is selected (it will be by default) and you will see the “Attachment Details” as pictured below.

Uploading an image to WordPress1.3  Add a title to your image.  Search engines such as Google will pick this up.

1.4 If you want a caption to display below your image add it here.  If not leave it blank.  Different themes display captions in different ways.

1.5 For visually impaired users, complete the Alt Text field.  Google also pays special attention to this field.

1.6 Most themes don’t display text from the description field.  In that instance you can use it for your own notes if you wish.

1.7 Choose the alignment for the image.  If you wish it to float to the right of the text, select right.  The same goes for left floated images.  You can also centre the image or set no alignment at all to have the image in its own space without the text wrapping around it.

1.8 You can make your images link to other pages in your site, to an external website, or a full size version of the same image. If you don’t want people to be able to click on your images then select None.

1.9 Select one of the preset sizes for the image to display. These range from full size to small.  If you can, then resize the image to the exact size before uploading. If you don’t know how to resize images, don’t worry WordPress will do it for you.  Equally you can resize and crop images within WordPress, see next section.

Note: You can also resize your image within the post editing screen by dragging the corner of the image to the size you want.

The Gutenberg Blocks Editor Way

Insert an image block

Upload Your Image

Uploaded image in a Gutenberg block

Set it as you wish using the block settings

Remember the Alt tag for Google and screen readers.  Set your size and add a link if you wish.

Image Block Settings

2. Cropping and Resizing Images Within WordPress

Did you know you can do this?  If you don’t have Photoshop or another photo editing software then WordPress is the next best thing.

To edit the image. You can either click the edit button underneath the image in the upload screen or you can go to the Media Library and view all.  Then you can click edit under your selected image.  Then there are several things you can do:

Editing images in the media library

  • Cropping – drag your mouse over the image to select the area to crop.  Then select the crop icon to the top left.
The image editing icons
The image editing icons
  • The other buttons rotate and flip the image or you can use the undo and redo buttons until you are happy with your edits.
  •  Scaling proportionally – you can simply resize your image if you wish, whilst retaining the current aspect ratio.
Scaling or resizing your image
Scaling or resizing your image
  • You will see that you can also select which image sizes you want to apply this to.

Click Save when you have finished.

3. Embedding Audio and Video to Your WordPress Site

You can upload audio and video files directly to your WordPress site but this uses up lots of space on your server.  It is better to embed sound and video from external sources such as YouTube for video or SoundCloud for audio. It is dead easy to do this in WordPress.  See my post here on embedding a video »

4. Uploading PDF files to WordPress for your visitors to download

I have written a couple of posts on this subject.  You can see how to add a downloadable PDF file here »

If you want to have a PDF icon or any other image for people to click to download your PDF file, you can see how to add a PDF with a clickable download image here »

5. Optimising images

Google is looking for fast page load speeds for all websites.  Optimising images is one of the key ways to achieve a fast page load time.

The first thing to say is that WordPress is very good at resizing images for you.  If you have a theme written by a good theme developer then images should resize automatically to fit their intended space.

There are some further steps you can carry out if your page is a bit slow loading or if you just want to save space on the server.

Choose the Correct File Extensions, you should only ever upload the following:

  • JPEG/JPG – Use JPEGS for most all images. Certainly for all photographs.
  • PNG – For images with transparent elements and/or text elements
  • PDF –  If you would like to provide document downloads.  You can easily convert documents from Word to PDF – choose “save as” and select “PDF” as the file type.

Crop and resize your images before you upload them

If you know how to do this then it is the best way to do it.  You know for sure that the image being used in your website is exactly as you want.  Plus it will use up less space on your hosting server.  Space will quickly run out if you are uploading 5MB images every time.

More on how to resize your images for upload to your website

Compress your images

If you have Photoshop this is easy to do, when you click ‘save as’ it will give you the option at the end to select the image quality.  Other photo editing tools also give you options for this, just study their help guides.

You can’t really tell the difference either with jpeg images, see below.  The first image is full quality (maximum) and is 639kb in size.  The second image is half quality (medium) and is 182kb in size.

There are also various online compression tools that you can use.

Best of all is the award winning WordPress plugin – Smush It

Cameillia Flower
Saved at maximum compression – 639kb
Saved at medium compression – 182kb
© Copyright protected by Copyscape.