How to set the best WordPress image size for quick loading

The content man­age­ment system WordPress offers the pos­sib­il­ity to use in­di­vidu­al image formats in addition to standard image sizes. We present important steps to cus­tom­ised image sizes, based on WordPress 6.0.3.

The default image sizes in WordPress

The file size of images embedded on a website has a great impact on its loading speed. Optimal image formats shorten the loading time and reduce the memory load on the server. The WordPress CMS offers a set of stand­ard­ised image sizes on the server when uploading media.

Save WordPress images in the backend and adjust sizes

These image sizes are defined in the WordPress settings and can be adjusted there within certain limits. To do this, go to ‘Settings’ > ‘Media’ in the backend.

After the media upload, there are ad­di­tion­al files in the media library. The directory for this is https://mydomain.com/wp-content/uploads/ or https://mydomain.com/wp-content/uploads/2022/11/ (if month- and year-based folders are enabled). For example, an image is in the following files:

• sample-image-1024x683.jpg
• sample-image-150x150.jpg
• sample-image-1536x1024.jpg
• sample-image-2048x1365.jpg
• sample-image-300x200.jpg
• sample-image-620x413.jpg
• sample-picture-scaled.jpg (2.560 x 1.707 px)
• sampleim­age.jpg (the original)

This provides the best image sizes for most WordPress pages or posts. Images for upload to the media library should not be larger than 1,920 pixels at the long edge of the image. They can be resized before uploading with free image editing programs to avoid un­pleas­ant surprises. That applies to WebP image format, which is not natively supported by all browsers.

These are the re­com­men­ded image sizes for use in WordPress themes:

The concrete required image di­men­sions depend on the com­pon­ents and structure of a WordPress theme. They can be found in the doc­u­ment­a­tion of the re­spect­ive theme.

Resize images in the WordPress media library

WordPress image sizes can also be adjusted. Besides changing the original image di­men­sions, cropping, rotating and flipping are possible. For example, to create a slider photo from an image with larger di­men­sions in the media library, proceed as follows:

Step 1: Select image in the media library and click ‘Edit image’

Step 2: Set editing method and size

It is worth noting that the crop button must be used twice: once to activate the function and then a second time after setting the image di­men­sions to perform the operation.

Step 3: Save image to media library

After saving the scaled image, the upload folder contains the file

• preview-image-scaled-e1667121439976.jpg

in another five formats with the auto­mat­ic­ally assigned ID …-e1667121439976. The newly created image sizes can be selected from the media library in the Gutenberg editor when inserting or ex­chan­ging them. The pixel di­men­sions of the image are then also available there.

Adjust image size when inserting into the WordPress content

The images from the WordPress media library are inserted into the content. This enables sizes to be adjusted af­ter­wards within broad limits. The WordPress Gutenberg editor offers much more extensive pos­sib­il­it­ies compared to the classic editor TinyMCE.

If you want to save your custom settings for later reuse, you can use the Gutenberg ‘Add to reusable blocks’ section and also lock it against ac­ci­dent­al modi­fic­a­tion. This is a huge labour saver if you fre­quently publish new posts.

For pro­fes­sion-specific sites, such as a pho­to­graph­er’s website, ad­di­tion­al image formats may be needed to perfectly represent your vision. Our guide ‘compress images’ gives further help to adjust image sizes, e.g. for WordPress gallery plugins.

Disable WordPress default sizes for images

The easiest way to disable the default image sizes is to use the ‘Disable Media Sizes’ plugin. In its settings, all seven generated image formats are also listed.

With the plugin settings shown, the deselec­ted formats are not generated at all. The upload of the original image cannot be ‘switched off’. This is an advantage if you want to generate other formats later after all.

Further optimise images for WordPress with plugins

In practice, images are mainly used as JPG and PNG. The file sizes of these image formats can be further adjusted with image editing programs. In Photoshop, there is a query for quality when saving or exporting. The dis­ad­vant­age of this method is that each image must be ‘touched’ in­di­vidu­ally and then uploaded. Plug-ins are a more elegant solution. These often have a wide range of functions, so a close look at the doc­u­ment­a­tion of the plugin used is advisable.

High in­stall­a­tion numbers and good ratings have, for example, the following WordPress plugins for adjusting WordPress file and image sizes:

• EWWW Image Optimizer: Supports the formats: JPG, PNG, GIF, PDF, WebP, SVG
• TinyPNG: Supports JPG, PNG, WebP
• Imagify: Supports JPG, PNG, PDF, GIF, WebP
• Re­gen­er­ate Thumb­nails: not updated for some time now
• Image Re­gen­er­ate & Select Crop: likewise

Remember before trying plugins: A WordPress backup protects against data loss if something really goes wrong.

Summary: Optimise WordPress image sizes

With the on-board tools of WordPress, many optimal image sizes can already be achieved. With plugins more extensive pos­sib­il­it­ies are available. The in­ter­ven­tion in the PHP code of a WordPress site should be reserved for pro­gram­ming pro­fes­sion­als. And finally: Keep the image SEO in mind when op­tim­ising.