If you want to include 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 the 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 noted down my own workflow for preparing images for websites 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 e.g. via https://www.iloveimg.com/compress-image/
Image size reduction between 50-70%! After that, post images should be < 100 kb, narrow panorama images < 200 kb. - Rename compressed file to Originalname_1200x800_c.jpg
- 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-70%, usually with a loss of quality that is only visible on very good monitors.
Free compression services are e.g.
iloveimg.com: https://www.iloveimg.com/compress-image/
Squoosh: https://squoosh.app
You can upload several photos at the same time and compress them with one click. There are no settings to make. The files are downloaded automatically and are then located in the download folder specified in your browser. I recommend renaming the compressed files there, e.g. to Originalname_1200x800_c.jpg. This way you will always know which is the compressed file.
You can now upload this 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 screen, Contact us 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!