How to set the best WordPress image size for quick loading
The content management system WordPress offers the possibility to use individual image formats in addition to standard image sizes. We present important steps to customized 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 standardized image sizes on the server when uploading media.
| WordPress standard image sizes | Size (L x H) in pixels | Aspect ratio |
|---|---|---|
| Preview images | 150 x 150 | Can be deactivated |
| Medium | 300 x 300 | Retained |
| Large | 1024 x 1024 | Retained |
| Original image | As uploaded | Retained |
Let your name do the talking. Have it your way with domain registration.
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 additional 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)
- sampleimage.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 unpleasant surprises. That applies to WebP image format, which is not natively supported by all browsers.
These are the recommended image sizes for use in WordPress themes:
| WordPress image sizes | Size (L x H) in pixels |
|---|---|
| Logos | 200 x 100 |
| Preview images | 150 x 150 |
| Background images | 1920 x 1080 |
| Post images in portrait format | 900 x 1200 |
| Post images in landscape format | 1200 x 900 |
| Header images (banner) | 1048 x 250 |
| Slider images (theme dependent) | Up to 1920 x ca. 600 |
The concrete required image dimensions depend on the components and structure of a WordPress theme. They can be found in the documentation of the respective theme.
Resize images in the WordPress media library
WordPress image sizes can also be adjusted. Besides changing the original image dimensions, cropping, rotating and flipping are possible. For example, to create a slider photo from an image with larger dimensions 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 dimensions to perform the operation.
Want to store files as safely as possible? Use HiDrive Cloud storage. You can rest assured your data is safely stored to the highest data storage standards.
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 automatically assigned ID …-e1667121439976. The newly created image sizes can be selected from the media library in the Gutenberg editor when inserting or exchanging them. The pixel dimensions of the image are then also available there.
If your chosen WordPress theme doesn’t offer sliders, you can take a look at the range of WordPress slider plugins.
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 afterwards within broad limits. The WordPress Gutenberg editor offers much more extensive possibilities 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 accidental modification. This is a huge labor saver if you frequently publish new posts.
For profession-specific sites, such as a photographer’s website, additional 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.
WordPress lazy loading is another way to improve website loading times. In this case, images are loaded only when they enter the visible area while scrolling the web page.
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 deselected 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.
Adding further image formats or suppressing them is also possible with entries in the WordPress core files functions.php and index.php. However, this should be reserved for experienced programmers. A first overview of the programming language can be found in our PHP beginner tutorial.
Further optimize 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 disadvantage of this method is that each image must be “touched” individually and then uploaded. Plug-ins are a more elegant solution. These often have a wide range of functions, so a close look at the documentation of the plugin used is advisable.
High installation 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
- Regenerate Thumbnails: not updated for some time now
- Image Regenerate & Select Crop: likewise
Remember before trying plugins: A WordPress backup protects against data loss if something really goes wrong.
Summary: Optimize WordPress image sizes
With the on-board tools of WordPress, many optimal image sizes can already be achieved. With plugins more extensive possibilities are available. The intervention in the PHP code of a WordPress site should be reserved for programming professionals. And finally: Keep the image SEO in mind when optimizing.
Related articles
Image editing: the best apps for iOS and Android
For many years now, optimizing images on a smartphone or tablet has been viewed as just another step in the photography process. With digital technology becoming ever more sophisticated, photo-editing apps that can be installed directly on mobile devices look and perform in an increasingly similar manner to their desktop predecessors, saving users from the tedious task of editing on a PC. But what…
How to remove an Image Background
Background removal is one of the most important processes in graphics programs. We show you how you can use Photoshop, GIMP, Paint.NET, online tools, or even PowerPoint to easily remove image backgrounds – an essential skill for those who run e-commerce sites, or who wish to create online collages and graphics.
Rawpixel.comShutterstock The best free Photo Editing Software
If you want to edit images, you don’t always need to pay for a pricey tool like Photoshop. The market offers various image processing programs that are both free and highly functional. As well as classic desktop programs, online applications are playing an increasingly important role. But how do you find the software that best suits your needs? Our guide provides you with information and tips…
How to compress images and reduce file size
Computer storage volume is increasing by the year. But while we have access to more gigabytes and terabytes, it’s best to keep the file sizes down to a minimum–especially if you operate a website. This is because compressed data leads to quicker loading times, happy visitors, and a good Google ranking. Pictures bound for the internet in particular should be compressed. We’ve compiled some of the…
Image SEO: improve your Google ranking with image optimization
There’s no doubt that having engaging images on your website is of central importance. Photographs and graphics can be much more than just decorative; they can inspire visitors to read more content and possibly lead to conversions. Many webmasters neglect to take appropriate measures here. In adjusting the standard SEO of the website, all too often, little or no attention is paid to the search…
Image file formats: An overview of 10 image file types
JPG, PNG, TIFF, and more: there are many image file formats out there. Most users don’t know the exact differences and fall back on a standard image file type. It’s worth looking into the differences, so that you can make sure you’re presenting your pictures in their best possible quality. We’ll explain which image file formats exist and dig into their advantages and disadvantages.
