What more does my image website need

WordPress Tips and Tricks: How to Use Images Correctly

In her work, Annette Schwindt repeatedly experiences that users do not know how to properly deal with images in WordPress. They do not take into account the relationships between image dimensions and loading times, file names, image titles and descriptions, and the functionality of the media library and search engines. They ignore the fact that websites behave differently on different devices and thus achieve undesirable results in the frontend. You can find out how to do all of this correctly and a lot more in this post.

We last updated this post from April 2017 in October 2020. It now takes into account the changes made by the WordPress block editor.

What to do before uploading

Beginners in particular like to upload original files to the media library - including automatically assigned names and otherwise unedited. This wastes storage space and slows down the loading of the website on which the image will be used afterwards. In addition, search engines do not understand what the image is about, so they cannot index it appropriately, visually impaired users are excluded and it can no longer be found in the WordPress media library itself if you do not find the exact file name such as e.g. IMG12345.jpg knows. Therefore, an image should always be edited as follows before it is uploaded and used:

1. What image sizes does the theme use?

Each WordPress theme has its own specific image sizes for the standard versions Thumbnail, medium and Largethat you under Settings> Media look up and adjust. Any header or background images are often larger than the version there Large. Also, these default image sizes tend to change when you change themes. At the moment, however, a width of 2000 pixels is a good guideline for preparing images.

With UPLOAD Plus you can read such articles as e-books or PDF. And that's just one of many exclusive advantages. Find out more now ...

2. Save the original

Before you edit the picture, you should first copy the original file and keep the original in a safe place. Only the copy is processed. If something goes wrong, you can always go back to the original and create a new copy for editing.

3. Adapt the file name

Do not keep the automatic name such as IMG12345.jpg at. Change it to something that speaks like sanfrancisco2012.jpg. If you have several pictures on the same topic, you will be even more precise, e.g. strand_sanfrancisco2012.jpg or sanfrancisco2012_hotel.jpg. Important:Do not use umlauts, special characters or spaces in file names!Instead of spaces, you can use the underscore "_". I also try to consistently write my filenames lowercase, simply for the sake of clarity.

You will find the adapted speaking file name much more easily afterwards in the media library and the search engines will also pay attention to it.

4. Adjust image dimensions

As soon as the copy of the original image has been appropriately named, you can open it in an image editing program and adjust the dimensions. This program doesn't have to be Photoshop. Free variants like Gimp or Irfan View do it too. Photoshop Elements, for example, is an inexpensive multi-talent. The included tool can do this on the Macpreview or the inexpensive Pixelmator app.

As mentioned above, when reducing the dimensions, 2000 pixels should be enough for the longer side. Depending on which image size you choose afterwards in WordPress (Preview, medium, large, individual), the image is automatically recalculated there accordingly.

5. Don't forget to compress

If your image editing program already provides compression of the image for the web, you can do this before you save it for the first time. If not, you can use external services like tinypng.com (also works for .jpg files). Compression significantly reduces the storage requirement and loading time of the image, which in turn increases the user-friendliness of your website, especially mobile. Google now also takes these factors into account when ranking websites.

Reading tip: Frank Bueltge gives further tips in his UPLOAD article on how you can improve the performance of your WordPress website. And Vladimir Simovic gives you important tips and advice on the topic of SEO.

6. Upload picture

Only when all of these steps are done should you upload an image to your WordPress media library. You have two options for this:

  • Directly from the page or post in which you want to use the image: with the appropriate block e.g. picture or gallery
  • From the media library (Media> Media overview): Add file> etc.

7. What not to forget when uploading

Uploading is not enough, even if the image has been optimally prepared up to this point. Before using it in the frontend, there is still some meta data (or as WordPress calls it: Appendix details) to be filled out. You can do this either by clicking on the image that has already been uploaded in the media overview, or in the editor with the image block activated. The following screenshot shows the first variant:

There you will be asked for the following details:

  • Title: If not done before uploading, the title of the picture should be made meaningful now at the latest. This information is used for the organization in the media library and can be searched afterwards.
  • Alternative text: Here you should describe the picture in more detail. The alternative text is displayed when an image is not loaded or not yet loaded, or it is read by screen readers for people with visual impairments. It is also required by search engines for meaningful indexing.
  • Labeling: Is only required if you want an image text to be visible in the frontend under the image. If not, leave this area blank.
  • Description: Detailed description of the picture. Is displayed on attachment pages and is relevant for search engines.

When you have completed all of these steps, your image is perfectly prepared for actual use in WordPress! Here again everything in the overview:

Checklist for editing images

  • Check the image sizes of the theme
  • Save a copy of the original
  • Make the file name meaningful
  • Adjust image dimensions
  • Compress
  • Upload
  • Fill in the attachment details

How to embed images in WordPress

1. In the content area

Most images are usually used in the content area to illustrate text with individual images or in the form of image galleries. There are several ways to align the images with the text, and you can also select different image sizes. You can also link each image to a specific target.

a) Alignment

Text can flow around images that are narrower than the content area. That's what the variants are for Left justified and Right justified under Change alignment in the context menu of the inserted image:

If you place an image next to text, keep in mind that your content will be viewed on different devices, i.e. with different screen sizes and resolutions. This can lead to distortion of the text area, especially with mobile devices. So it is better to test the size from which an image is displayed on a small output device across the full width, and then apply this as the minimum size. Or refrain from flowing around completely and always put the images in a separate line. The best way to do this is through alignment Centered (arranges the picture in the middle).

b) size

As already mentioned, images in the content area can be in the theme-specific standard variants Preview, means and Large be used. WordPress also offers the optionFull size at. However, the content of the image cannot be displayed wider than the content area. This is only possible if you click on it in the frontend to look at it in a single view or in a lightbox (more on this in a moment). And of course only if it has been linked accordingly and uploaded in the appropriate size. But you can also set an individual size by either using the percentage buttons or entering image measurements manually. You shouldn't enlarge it, this would lead to pixelation and make the image blurred.

c) styles

Depending on the theme, you can select different styles (e.g. square or rounded) in the block menu of the image and also set a standard style.

d) Linking

Another picture detail decides what happens if someone clicks on the picture in the frontend afterwards. By default, the image is set up so that the attachment page opens. If you have installed a lightbox, it will open there. If an image is to serve as a link to another website, this can be done under Individual url in the individual view of the image in the media library.

Instead of individual images, you can also put several images together to form a gallery:

e) gallery

WordPress has a simple gallery function by default, which you can use with the block of the same name gallery can use: Simply select the images you want and at the bottom right Insert gallery click:

Before inserting, you can change the order of the images using drag & drop. You can get additional pictures via Edit gallery Add. Unfortunately, since version 5, WordPress can only use portrait or landscape format previews instead of the old square thumbnails. As long as all the images are in the same format, that doesn't matter. But if not, it quickly looks ugly.

That's why I use the FooGallery plugin instead, with which I can determine how my thumbnails should look and be arranged. In addition to the standard gallery (Responsive Gallery), I can also use other gallery versions (a preview image for several full images, thumbnails linked to individual URLs, etc.) and adjust their behavior individually. If you want even more, you can buy a pro version. As a lightbox I use:

WP Featherlight: Is a very easy to use plug-in that displays individual images or those from galleries in a lightbox when you click them and (in the case of galleries) makes it possible to leaf through. The only requirement: the pictures must be underLink to on Media file be set. Where the plug-in is not needed, it can be switched off in the editor by post or by page.

Alternatively, Lightbox with Photoswipe or one of the many other lightbox plugins can be used.

Stay Up to Date: Handpicked Reading On Content Strategy, Online Marketing And More!

Register now and you will always receive on Mondays:

  • The latest UPLOAD content
  • Selected reading tips on other pages
  • Discount codes for exciting events
  • … and more!

No spam! There are already over 2,400 readers.

Further information on the content and data protection can be found on this page.

3. Featured images

Except in the content area, most WordPress themes now use featured images, i.e. cover images for the individual blog articles. These illustrate the posts both in the overall list of blog articles (post overview or blog main) and in the individual view per post (if not deactivated). Depending on the sorting (article overview, category pages, etc.), they can be displayed differently. You should therefore ensure that not only the image itself, but also the automatically generated sections are selected appropriately. How does that differ from theme to theme. Featured images are uploaded in the editor via the widget of the same name in the blog editor on the right.

4. Headers / Background Images

Some themes also allow you to upload header images (i.e. images for the website header) and background images. This usually runs through the Customizer(also depending on the language To adjust), where the optimal image dimensions are given in pixels. The same applies here: Don't forget to compress and see how the images behave on the various output devices. This means that mobile wallpapers can sometimes be completely dispensed with.

No more problems with images in WordPress?

With all of these tips in mind, using images in WordPress shouldn't be a problem anymore. But what if you've been using your WordPress website for a while before you got these tips, or if, despite everything, you forgot something before uploading? You can make improvements with the following helpers:

Post processing in WordPress

a) Cropping / image size: The edge of one of the pages has not yet been cut off correctly, or have you uploaded the image with too large dimensions? Then call up the image in the media overview and select there Edit picture. Important: Tick on the right which variants the changes should apply to! If it was already inserted in a post / page, you have to use the replace function there for the old image.

b) Authorship: An author is also assigned to images and other uploaded media. In order to be able to edit this information, you may first have to use Customize view to make visible. By default, however, this only works individually for each image. You can find detailed instructions here. A plug-in such as the Media Library Assistant is required for the bundled editing of several images at the same time.

Other useful plugins

There are plenty of plugins for more complex problems. Four of them are:

Tips to read on

These articles will also be of interest to you:

This article belongs to: UPLOAD Magazin 44

Come with us to the WordPress workshop! Safety glasses and a helmet are not compulsory. The topics: Accelerate WordPress, make it fit for search engines, edit and use images correctly, tidy up the page and: Implement complex layouts with a pagebuilder - without any specialist knowledge.

Tags UPLOAD Magazin 44, WordPress