Adding images to your WordPress website

This shouldn’t be too hard, but we have to admit that it can be problematic to get your head around the technical aspects of how images for web work so don’t be worried about asking for help with this!

Choosing Image Subject and Content Theme:

Choosing which images should be added to your website will be determined by a few different considerations. Here’s a short checklist:

1. What are you trying to portray with the picture?
2. Do the images you already have tell a story that relates directly to where you want to place them?
3. Could someone viewing your website page figure out what your page is about without even reading your text?

If you’ve got the answers to these, then you’re well on the way to figuring out what the images should have in them. If you don’t already have images that fit the bill, consider buying some, or hiring a photographer to produce some for you, to your specifications.

At Forge Online, we’ve designed hundreds of websites and have discovered from this experience that there’s one underlying ‘issue’ that always influences the client’s opinion of whether or not they like the design: the appeal of the design almost always rides on the quality of the images included. Don’t underestimate how this affects your audience when the image is on your live website.

Image Shape, Content Placement and Ability to Crop:

The next key element to consider when choosing the right image is the shape of the image and the placement of the subject within the frame.

You may intend the image to fit into a large slide show that covers the whole width of the computer / device screen when displayed on the site. Usually, (and particularly on Forge Online websites because we use Responsive Design), pictures like that are dynamic in how much of their content will be displayed, meaning: when someone uses a large screen, there may be either more or less of the image showing on the screen than on a smart-phone screen. This is because the width of the screen may change but the height of the slideshow display may be fixed by number of pixels, making the display variably crop off some content. You’ll have to consider all possible screen sizes, and often this involves making some compromise on what you can display in some situations.

An example of shape and content size constraint is when the image has to display alongside other images of a similar subject or style. A classic example of that is when you have a number of personal profile images together, say on a “team” page where all your staff have a short bio and personal introduction. Images for that are typically in a portrait format, not the landscape format. The name of the format says it all. If you produced images with different cameras, different amounts of background content and holding the camera horizontally (landscape) or vertically (portrait) you might create a bit of a ‘design mess’ when placing them all on the same web page, and your page may not flow well with content looking unbalanced or jumbled.

This issue also comes up if you have an eCommerce store and your images are going to be the featured image for each product. To ensure your product display looks tidy, you’ll need to check what shape and orientation your images need to be for the final display. For WordPress website using Woo Commerce as the commerce system, the final display image is likely to be square. If that’s the case, does your image content fit within a square? Classic examples of images that are not square are pictures of wine bottles (tall and slim). Try to fit one of those into a square display and you can end up with the top and bottom cropped off.

The ‘trick’ is to produce images the right shape and format (landscape or portrait) and enough boundary space around the subject to allow for cropping without losing content for your target placement in the website.

Image size:

The next item to look at before uploading to your site is the size of the image. Image size is measured in Pixels. Do not try to measure your images by looking at the file size (kb or mb) as these won’t accurately predict what size the picture actually is. Images that you plan to display very large to cover a computer screen may need to be around 2000 pixels in width. Because that type of image is likely to be in horizontal (landscape) format, the height will be less than 2000 pixels. The image size might be: 2000 pixels wide by 1200 pixels tall – which is about the right size to cover most screens. If your image has to cover the width of the website content section (but not the whole screen), then you probably need an image that is 1200 pixels wide. For coverage within a column in a two column website, then 600 pixels wide is probably fine.

Important: If you never intend for an image to display at full screen width on your website, use images that are sized to the maximum size you will want to display them. This will save precious space on your web hosting platform and also help make your website as faster to load.

Full website width image (1100 – 1200 pixels wide)

Column width image (500 – 600 pixels wide)

Thumbnail size (150 pixels wide)

Image file types:

The image file type is an important decision to make before uploading. That’s because the file type you use has to be one of the globally supported file types that can be displayed on the internet. There are only three types:

1. JPEG – a compressed file type, good for most web applications, good for photographs, but does not allow for any transparent parts in the image.
2. GIF – a file type ideal for minimising file size and bandwidth use, but might not be ideal for photographs. Best for images with solid colour, like in logos. Also supports transparency. GIFs can also be made into animations.
3. PNG – a file type that retains maximum image quality, but offers less compression so takes longer to load. Avoid this file type unless quality is critical. Supports transparency.

Using JPEG:

When saving a JPEG file you can choose how much compression is used to minimise bandwidth when loading on your website. You should ideally compress these files as much as you can, while retaining the most quality possible. When the compression starts to make it look bad, you compressed it too much. You need to assess this on a case by case basis. JPEG images can cause colour banding in delicate shading within the image, or show ‘artefacts’ that look like light or dark patches or splotches in the image. When you see things like that in a JPEG file, try less compression.

Using GIF:

GIFs are great for solid colours. That’s because if you have a block of a single colour, the GIF format allows the file to ‘group’ pixels into a single clump of data. GIFs are often terrible for photographs with lots of fine detail in them, because too much content colour can get clumped together and you may lose the detail that the photograph provided. When you are using GIF for things like plain buttons, logos or solid colours in the website, they can allow you to use very small file sizes – and that makes the image load much more quickly for the user of the website. Use a GIF when you have the need for speed.

Using PNG:

You should use the PNG format for your images if you want to retain as much quality as possible and also need to have part of the image transparent. If there is no transparency needed, you are probably better off using JPEG at minimal compression. Whichever you use, your goal is to display the image as well as possible, and with the least number of kilobytes file size.

You can’t use other image file formats to display on your website, such as PSD (Adobe Photoshop) or AI (Adobe Illustrator), or BMP (bitmap).

Optimising your images:

In most cases, you will need to optimise your images to either:

1. Change the shape by cropping
2. Change the number of pixels by re-sampling or resizing
3. Change the file type to get the fastest load speed and most appropriate format

To achieve these three steps you may need to hire someone with skills and software to manage the images for you. Remember – the way an image looks in the site has an extremely large impact on how your website is perceived. It’s worth investing time and effort to make sure they are good to go.

Loading your prepared images into your WordPress website:

You can load images as you need them, or if you know you will use a bunch of them soon, you can upload them in a group, all at once.

Loading bulk images:

The WordPress system allows you to drag and drop into the Media Library. From the admin side of the website, hover your mouse on “Media” in the main menu and select “Add New”. You can simply select a single image or series of images on your computer and drag and drop them into the “Drop files here” box. They will upload automatically and you can access them later when you need to.

Images will also resize into several sizes:

1. Original (“full” size as uploaded)
2. Large (exact size depends on your site settings)
3. Medium (exact size depends on your site settings)
4. Thumb (usually 150 pixels square but exact size depends on your site settings)

If your uploaded size is smaller than Large or Medium then WordPress may not create these sizes.

Loading images ‘as you need them’:

While adding text or other content to a page or post, you can add an image within context. For example, you can place an image directly into a text box among your text by using the “Add Media” function in the text editor. By clicking the Add Media button, you are directed to the Media library. From there, just click on “Upload Files” or simply drag and drop your new media into the “Insert Media” page of the Media library. You can do one image at a time, or add multiple images.

If your image is already in the Media library, don’t upload it again*. Just locate the right image from the Media Library, select it and then from the bottom right menu select the image size you want (Thumb, Medium, Large, Full / Original). You then need to decide if you want that image to link to something, such as the larger version, which you select in the “Link To” drop down menu selector. This will automatically add a link in the front-end view of your page that links to the original size image. If your image original is smaller than the Medium or Large sampled images, then those sizes won’t be available in the size selection. If you don’t want the image to link to anything, then select “None” from the drop menu. You may also want to select how the image will be displayed in the front-end. It can have either no alignment, centred or left or right aligned.

*There are some situations where you might need to upload the image again:

1. You might need the same image for both a slide show (much larger) and in context (smaller)
2. You might want to tag the image with a different ALT tag. This is an SEO process and you might need to read further about that or ask us for advice.

If you make the wrong selection and already clicked the “Insert Into Page” button, don’t panic, you can still edit and change these settings when you have gone back to the Text Editor.

Image Alignment:

You can choose any of four alignment settings for your images: None, Left, Right and Centre.

When you select None, the image will sit in line with the position that your cursor was when you hit the Add Media button. After you have added the image you can still drag it to another spot.

By selecting Left or Right within surrounding text your text will wrap around the empty space to right or left of the image.

By selecting Centred you image will appear with clear space to left and right.

Alignment setting: None

Alignment setting: Left aligned

Alignment setting: Centre aligned

Other Data for your Images:

Your images can all be tagged with Meta data. This includes a Title, Caption, Alt Text and Description.

The Title: this is the title of the image and is not typically visible to users of the front end of your website, however they may be shown when the user hovers their mouse over the image. Ideally, write a good title that briefly describes the content of the image. By default, the title will be the image name, and often that isn’t ideal.

The Caption: this may be visible to the front end user of the website, and some WordPress themes may place the caption at the bottom or top of the image in small text. If you don’t want a caption to appear, leave this blank.

The Alt Text: this is a snippet of text that further describes why the image is in the website page. It is displayed to users when if for some reason the images don’t load on their screen. The Alt text should both a) accurately describe the meaning of the image and b) have the keyword(s) in it for which your page is optimised for Google rank. You can learn more about how image meta data effects SEO here.

The Description: an extended description for the image. It doesn’t appear in the front end and is useful for the administrator only.

Other Image-Based Functions in Your Website:

Your WordPress website may support other image-based functions like Slide Shows, Teasers, Single Image display, Albums, Grid Displays and Fancy Media.

Adding images to your Media Library for use in those functions are the same, however the practical application in each may differ. Because these function vary a lot from one website to another, it’s best to contact us for advice if you get stuck with adding media to these.