Fuji camera - Image processing before upload - netzwerk.design
Photo | Robert Shunev on Unsplash

WordPress: Edit images before uploading into library


4 min.

If you want to embed images on your website, you must before the upload into the WordPress media centre. Minimal editing includes scaling to the required resolution and compression using a compression tool. Editing for image enhancement may be necessary beforehand. Why is this important?

How to prepare images for use on your website

The loading time of a website is an important criterion for the ranking of the page in search engines such as Google. In addition to many other factors, the size of the images and graphics used has a particularly strong impact on this and is a first major lever for significantly reducing the loading time of a website. After all, if a page takes longer than 3 seconds to load, many users will have already left before they have seen your content.

So if you still have unscaled or uncompressed images in your WordPress media library, it's worth revising and re-uploading them. I have summarised my own workflow for preparing images for websites for you below.

Quick guide

Workflow image processing before uploading:

  • Edit, crop, scale image (e.g. with Adobe Photoshop)
  • Panorama image resolution: 2000 x height (narrow: 700, medium: 1000, fullscreen: 1333) px
  • Resolution of post images: 1200 x 800 px (3:2)
  • File name e.g. post images: Originalname_1200x800.jpg
  • Compress the scaled image and convert it to the new image format .webp, e.g. with the online app https://squoosh.app.
    Image size reduction between 50-80%! After that, post images should be < 100 kb, narrow panorama images < 200 kb.
  • The compressed file is then called Originalname_1200x800.webp
  • Afterwards upload to the WordPress media library
  • Important: Add image description (copyright) and ALT text (alternative text: What can you see? + SEO keyword).

In detail:

Edit, crop, scale image

It does not matter which image editing program you use, most programs can do standard editing such as brightness, contrast and colour adjustments as well as cropping if you only want to use a section of the image and then scaling to the required resolution. Camera images have a size of around 10 MB as a .jpg with a camera resolution of around 6000×4000 px (3:2).

You do not need these high resolutions for a website and can therefore downscale the file without hesitation. The above resolutions are suggestions and may differ for your website. I usually use 2000×700 px for panorama images, 1200×800 px for post images (see above).

Save your edited image file under a new name (keep the original unchanged) and select a quality level of 80-90 %.

A file name with reference to the original file has many advantages later on. I therefore recommend something like Originalname_1200x800.jpg. A post image of this resolution should now have a size of 200-400 kB, depending on the subject.

Collect all your website images in a corresponding project folder.

Compress image

A file size of several hundred kB is still too large for a website if it is to be loaded quickly - and it should be. Modern compression methods can reduce the size of an image file processed according to the above pattern by a further 50-80%, usually with a loss of quality that is only visible on very good monitors. Use the modern .webp image format.

With the online compression service Squoosh: https://squoosh.app you can convert your .jpg or .png images directly to .webp when compressing them. This is recommended.

Now upload the compressed file to your WordPress media centre.

Finally: Set copyright and alternative text

In order to comply with copyright law, all third-party content must include the author's name on the work. (See picture in this article) Naturally, permission (licence) is also required for any use of third-party content. You do not need either for content you have created yourself, but you can still indicate the author. In the media library, add the author's name to the image in the "Caption" field.

If your website does not automatically evaluate this field and display it correctly on the image, please contact me and we will add this function to your website if possible.

The alternative text for an online image has two important functions. Firstly, it serves to explain the content of the image. All modern browsers can read out texts and alternative texts to images. This also enables visually impaired people to use the Internet. Furthermore, Google analyses the alternative texts of your image files. You should therefore always set them in a meaningful way. Briefly describe what can be seen in the image (for the read-aloud function). If possible, combine this description with the most important keyword for this post (SEO ranking).

More information on search engine optimisation.

If you apply this workflow to every image on your website, you have taken an important step towards a fast loading time for your site and for your search engine ranking. Congratulations!

Do you have any questions?

Call now