How to add images to WordPress

It is vital to add images to a WordPress website and blog – on every post or page, if you can.

Search engines rank a web page higher if they see appropriate images. They know humans are visual and without an image, a web page looks rather like text document.

The reader is more satisfied by the appearance of images and ultimately that is what a search engine expects a web page to do – appeal to an audience.

Routinely add images to WordPress pages or posts.

The way an image is resized, compressed, saved and placed will have an effect on how search engines rank a web page.

In this post I talk about sourcing images and saving them for best SEO practices – so it is worth a read through.

I then help you add them to WordPress as a single image or within a gallery.

Sourcing images for a blog or website

Consider shape

When deciding on an image, first consider the shape.

  • Will it fit where you’d like it to on the page?
  • Should it be landscape or portrait, or square?
  • Will the main content of the image fit once it is resized?

If the image is sourced from a stock website, I often screenshot the image before spending any money. Even with watermarks across it I can check the size, shape and colour before I make a final purchase. 

Where to find images

Across my blog and website use various sources for images. Sometimes I create my own. It depends on what I am using the image for.

I want them to look professional on my website but my blog can have a more relaxed, friendly vibe.

There are a number of ways to source photos for a website or blog free or paid for.

Pay a professional photographer

I am an advocate for professional photographers. Professional photos can make all the difference on how sharp a website looks.

This is the route to take if you are having product or team photos taken.

If you can’t afford to go pro you could try a local amateur photographer. Amateur photographers are keen to get a portfolio together, so can often be cheaper.

However, if you are writing a lot of blog posts I understand that photographers can get very expensive. The subject material may not be available anyway.

Take photographs yourself

Some smartphones have really good cameras these days. If you have the eye for it, taking your own photos can work well.

‘Home photography’ also helps to put life, character and reality to blogs or social media posts.

Set the camera to the highest resolution, so you can crop photos any way you like.

Ask friends or business connections

You could swap a service – ask friends or business connections to provide photos. Offer to cite them or provide a link to their website, which is very valuable for pageRank.

Use a stock website

There’s an abundance of stock websites that provide photographs, graphics, illustrations, icons and videos – a really useful resource.

You can get professional photos for as low as £5 for a lifetime license. If you are running a business, this is well worth it.

Search for a term and you’ll find hundreds of choices. A few stock image websites I like are: istockphoto.com, twenty20.com, shutterstock.com.

The free image stock site called Pexels is brilliant. Download free photos from amateur photographers and upload your own.

Use Google images, ‘labeled for reuse’

Google offers a search tool that helps find images that are labeled for reuse.

  1. Either go directly to www.google.com and search a subject then click IMAGES.
    Or go directly to images.google.com.
  2. At the top click SEARCH TOOLS.
  3. Click the option ‘labeled for reuse’.

Google displays a grid of images that are labeled for reuse, even commercially.

Google image search, labelled for reuse highlighted
Google offers a search tool to help you to find images labeled for reuse.

Be careful. It is your responsibility to check the copyright of each image. Follow guidelines because you can be heavily fined if you don’t.

Click the image to visit the web page. Read the copyright requirements.

A link back to the page or a credit to the photographer may be required if you use the image.

Warning when using Google images

Some images in the public domain are available for reuse on a commercial site, some are not.

Like anything else, images usually belong to someone. Be careful when taking images directly from Google.

Like I say, heavy fines can be handed out for misusing other peoples photos.

Resize and compress images for the web

You’ve found your image, now resize and compress it for fast use on the internet.

Free image editing software

‘GIMP’ (The GNU Image Manipulation Program) is an image editor that is free.

Download it from the GIMP website here: www.gimp.org/downloads.

GIMP tutorials can be found here:  www.gimp.org/tutorials.

Resize an image for WordPress

One size does not fit all – be sure to resize the width and height of each image.

Using files straight from a stock website will slow the site down considerably as they are high resolution.

Google will penalise a slow website.

Unfortunately there is no standard size that I can let you know here.

All websites are different and there are many different screens that an image can be viewed on. From as small as a handheld to as big as a TV.

Considering these two things:

  • An image added directly to a web page/blog post should be no less than 450 pixels wide. Even if they are displayed in columns on a large screen (at 300 pixels wide) it is likely that they will stack on a mobile. 450 is a good width – just over half of a medium screen and will fill a small screen.
  • Full screen enlargements or even ‘hero images’ (those at the top of a website that stretch from left of screen to right of screen) should be no less than 1200 pixels wide for a large monitor. However they should really be as big as 1920 pixels wide for a TV screen.

An image that is 450 pixels wide will look terrible when stretched to 1920 pixels wide. So if anything, start with the larger size.

And, yes, that huge image will download incredible slowly.

This is why I do not encourage full screen images.

What is the answer?

There are a few WordPress plugins that help to serve the correct image size to the device.

The small image downloads first. If the screen resolution is larger the plugin provides bigger version. This speeds up the waiting time for the user.

A good solution if you really want those big images, but are concerned about download time.

I’ve not tested these plugins yet, but these are both up to date at time of writing:

Compressing an image

Compressing is not the same as resizing. All images should also be compressed even if you are using an adaptive image plugin.

Compressing reduces the file size of the image, so it downloads faster.

During compression try to minimise visually compromising the quality of the image.

Compress images using GIMP too. Here are some instructions on compressing with GIMP: docs.gimp.org.

How to add images to WordPress

Save images for Google search

Always save images so that search engines recognise what they portray. The file name is an essential part of optimisation for search engines.

Save the image according to the subject matter.

I.e. Saving an image as <strawberry-cheese-cake.jpg> is much more informative than <image07_912.JPG>.

Search engines will recognise the effort.

Once you have resized, compressed and saved your image correctly you are ready to add it to WordPress.

Add a single image to WordPress

Google quality guidelines ask website owners to ‘place images next to relevant text’ where possible.

  • Log in to your WordPress admin area and navigate to the post or page.
  • Using Gutenberg block editor, hit the + PLUS icon to add an ‘image block’.
  • Hover over any block that is already used on the page. A PLUS icon will appear below the block.
Add images to WordPress in the block editor (Gutenberg)
  • Once you hit the PLUS sign, a menu pops up with block options.
  • There is a ‘most used’ section which is handy for the blocks that you use regularly. However, if you can’t see IMAGE there, use the search field at the top.
  • The new image block is placed below the PLUS symbol you clicked on. It can be easily moved using the UP/DOWN arrows to the left of a selected block.
  • Hit the UPLOAD button to upload an image.
  • The image will appear within the block. Any image you upload will show within the media library too.

Image alignment in WordPress

An image can be aligned within its block using the toolbar. The toolbar appears top left when the image is selected.

Use the icon that resembles a box with two lines, one above, one below.

Just hit the arrow to the right of the icon to find options to align the image left, right, centre, wide and full width.

Within the WordPress editor, the image may not look aligned quite the way you imagined. Always check on the front end to see how it is positioned.

Check it on a desktop computer and mobile devices to get it correct on both screen sizes.

Images can also be linked or replaced using the image toolbar.

WordPress columns for image placement

We use columns in the WordPress block editor, to place an image to the left or right of another block on a big screen. Imagine newspaper columns displayed next to one another.

This is how we would place an image next to a paragraph, for example.

On a small device, like a smartphone, columns will stack, one above another. Usually the left column will stack on top of the right column.

To create 2 columns:

  • Hit the PLUS symbol to create a block.
  • Now hit COLUMNS or search for COLUMNS.
  • Choose the far left option, two columns, equal split.
  • Hit the plus sign within each column to add an image, as above, to one column.
  • Hit the plus sign within the next column to add a paragraph.

Optimising images for search engines in WordPress

I would like to highlight two more important attributes that WordPress provides to help website owners to optimise images for search.

Alt text (alt tag)

Alt text stands for alternative text, it is an information tag.

The Alt tag is used to help people – those with ‘images turned off’, users with visual impairments and/or using screen readers.

The alt tag also helps Google to understand what the image is.

Use key phrases when writing it.

In WordPress blocks, you will see a field for ALT tag once you click on the image block. It is on the right hand side of the page, under the block settings.

Image captions

Providing image captions will also help search engine rank, although I don’t use them often as I find them messy.

Google wants you to provide the user with a good experience once they are on the website.

To add a caption just click the image block on the page, and the CAPTION field will appear under the image.

If you don’t include a caption, nothing will appear here at all.

WordPress galleries

A WordPress Gallery provides the ability to include more than one photograph in one area, all with a similar layout.

  • Hit the PLUS symbol to create a block.
  • Now hit or search for GALLERY.
  • A gallery block will appear on the page or post.
  • Click the ‘Upload’ button to upload images from your computer.
  • Use the ‘Media Library’ button to include images that are already hosted in your Media Library.
  • Select several images – they will be highlighted in blue and you’ll see a tick.
  • Hit the blue button, bottom right labelled – CREATE A NEW GALLERY.
  • Keep adding to the gallery using the links on the left hand side.
  • Or INSERT GALLERY to the page, using the blue button, bottom left.

Once the gallery is on the page settings can be changed – select the GALLERY block, then use the block settings that appear with the sidebar on the right.

The Glutenberg gallery is pretty cool, as you can change the number of columns the gallery is viewed at.

On a mobile device the column number will be different – usually in one column or possibly two. This ensures that gallery images do not appear so small that the user can’t see the content.

A LightBox plugin will need to be installed to display images within a LightBox; WordPress does not do that automatically.

How to add an image to a WordPress gallery

Once the gallery has been created, it is so easy to add images to it.

Just select the gallery with your mouse, and hit the UPLOAD or MEDIA LIBRARY buttons.

You’ll need to select an image, then use the blue button on the bottom right to UPDATE GALLERY.

Put thumbnails into order

It’s easier than ever to put the WordPress Gallery thumbnails into an order. Do it directly on the page.

  • Select the Gallery block.
  • Then select the image you would like to move. Left and right arrows appear on the image.
  • Hit the direction you’d like that image to move.

To move lots of images around, an easier way is to use the drag option within the gallery EDIT screen:

  • Access the gallery edit screen, click the gallery block. Hit Media Library.
  • Over on the left hand side is a link to EDIT GALLERY, click that.
  • On this screen you can drag the images around into a more suitable order.

Voila!

Quick process to add images to WordPress

  • Find an appropriate image that is available for reuse, or you have bought a license for.
  • Make it the right size for your page.
  • Use compression software to bring the file size down.
  • Save it according to Google requirements.
  • Add it to your WordPress post, page or gallery using blocks.
  • Optimise each image using ALT tags, title tags and captions.

Share and Enjoy !

0Shares
0 0 0

2 thoughts on “How to add images to WordPress”

  1. Pingback: How to update a WordPress gallery

  2. Pingback: Using images on blog posts or web pages. Optimise each for Google.

Leave a Comment

Your email address will not be published. Required fields are marked *