High-quality photos can make your website stand out. However, it’s essential to use the correct WordPress image sizes. ✂️ Otherwise, you might end up with blurry visuals or slow loading times.
Fortunately, WordPress enables you to customize the dimensions of your images. This way, you can select suitable sizes for different uses and ensure that your photos look great on the front end.
In this post, we’ll look 🔎 at the default WordPress image sizes and discuss the importance of optimizing your photos. Then, we’ll show you three ways to configure the size of your images, including creating your own custom WordPress image sizes.
Let’s get started! 😎
The different image sizes in WordPress (and when to use them)
When you upload a photo to your site, WordPress automatically generates multiple versions of it using different dimensions. The default WordPress image sizes are:
- Thumbnail: 150px square
- Medium: Max width and height of 300px
- Large: Max width and height of 1024px
- Full Size: The original size of your image
Thumbnails are typically used in blog feeds. They’re the small featured images that you see above or next to the title of the post:
Meanwhile, you can use medium and large photos in blog posts. If you’re displaying an image gallery, you might opt for medium-sized graphics. This way, you can show a group of pictures without making them too small:
However, if you want to display full-width or high-quality images, you can select Large or Full Size for clearer photos. 👉 For example, if you have a travel blog or a photography portfolio, you might want to use larger sizes to highlight the details in your images.
As you’re creating content with the WordPress Block Editor, you can upload images and customize how they look. By selecting the photo, you can view its size and dimensions. You can also change these values if needed:
⚠ Note that your WordPress theme might offer additional image sizes. 👉 For example, you might have access to thumbnails with different dimensions.
Similarly, some plugins will add their own image sizes as well.
If you want even more flexibility, you can also create your own custom WordPress image sizes, which is what we’ll cover below.
The importance of image sizes for performance optimization
By choosing the optimal image size for each specific use case, you can reduce the size of your image files.
By reducing their size, you can speed up your site. ⏩
However, while using different image sizes is one smart image optimization tactic, you’ll also want to implement other tactics, such as image compression and optimized file formats like WebP.
For the easiest way to implement all of these strategies, you can install an image optimization plugin like Optimole:
This plugin will automatically compress any images you upload to WordPress, while also optimizing their formats and serving them up from a content delivery network (CDN).
For some other useful options, you can check out our full collections 🥷 of the best image optimizer WordPress plugins or the best image optimizer tools.
How to configure WordPress image sizes (3 ways)
Using suitable photo dimensions can help improve your page load times. It can also ensure that your visuals look crisp and clear on the front end. Without blurry or heavy images, you can increase the chances that your online visitors have a positive experience on your website.
Although optimizing images can have many benefits, you might not know how to do it. Fortunately, there are many methods you can use to configure your WordPress image sizes. Here are three of them! 👇
- Change the default image sizes
- Add custom image dimensions
- Customize images in the Block Editor
1. Change the default image sizes
As we mentioned earlier, WordPress generates different sizes for each image you upload to your site. However, you might want to change these dimensions to suit your needs better. This way, you won’t have to crop or modify each image when you upload it to your post or page.
To get started, navigate to Settings > Media in your WordPress dashboard:
Here, you’ll see the default dimensions for each version of your image. To change these sizes, simply enter your dimensions in the Width and Height fields.
👉 For example, you might want to generate smaller thumbnails of your images. All you’ll need to do is go to the Thumbnail size section and change its values:
However, it’s important to ⚠ note that your current theme has specific image sizes. If you install a new theme, it will likely override any changes made to the Media Settings.
This can become a problem when you have old thumbnails on your website. Although new images will be adjusted to the new theme, previous thumbnails will have outdated sizing.
To update all of your existing images to the new theme, you can regenerate your thumbnails. Using a plugin such as reGenerate Thumbnails Advanced, you can fix all of your image sizes at once:
First, head to Plugins > Add New and search for the plugin. After locating reGenerate Thumbnails Advanced, install and activate it:
Then, navigate to Tools > Regenerate Thumbnails. This will take you to the plugin’s settings page:
You can select the images you want to regenerate on the right-hand side. If needed, you can also add a custom image size:
This plugin also enables you to clean up your Media Library and remove old thumbnails. Under the Advanced Options, just check the box next to Delete Unselected Thumbnails. Once you regenerate your images, these thumbnails will be removed:
When you finish customizing these settings, click on the Regenerate button. It will resize your old thumbnails to meet the settings of your new theme!
2. Add custom image dimensions
As we have seen, WordPress generates different dimensions for your images that you can adjust as needed. However, you might want to add more default options so that you don’t have to customize photos individually.
Fortunately, you can use a plugin such as Image Regenerate & Select Crop to add new custom image sizes to your site:
Once you’ve installed and activated the plugin, navigate to Image Regenerate & Select Crop > Additional Sizes. In the Define Custom Image Sizes tab, enter a name for your new image size and set your preferred dimensions in the Max Width and Max Height fields:
You can also choose to crop your images to those exact dimensions. When you’re ready, click on Save Changes.
Then, head to Image Regenerate & Select Crop > General Settings, locate the new custom image size you’ve just created, and click on the Regenerate button:
This will make a copy of your images in those dimensions. You can create as many sizes as you wish. However, we recommend that you only do this if it’s absolutely necessary. These custom image dimensions will take up space in your server storage, which can negatively impact your site’s performance.
To remove a custom size, go to Settings → Media and locate the option you want to delete. Then, erase the text from the Image Sizes Name field and click on Save Changes:
How to add custom image sizes with code
Alternatively, you can add a custom image size by adding code to the functions.php file of your child theme or a free plugin like Code Snippets. Before you do this, however, be sure to back up your website.
Then, search for this code in the functions.php file:
add_theme_support( 'post-thumbnails' );If you don’t find it, paste the code and save the file. This will update your theme to support custom image sizes.
In the same file, look for the add_image_size string. You can edit it to include your custom sizing:
add_image_size( 'my-custom-image-size', 800, 640 );Be sure to replace my-custom-image-size with a more descriptive identifier, such as post-thumbnails-size. Then, edit the numeral values with your desired height and width. Finally, save the functions.php file of your child theme.
3. Customize images in the Block Editor
You may also want to customize WordPress image sizes on a case-by-case basis. Rather than relying on default settings, you can edit individual images in the WordPress Block Editor.
To open the Block Editor, just add a new post or page. Then, click on the + icon and insert an Image block:
Now you can upload an image or select one from the Media Library. Alternatively, you can insert a picture from a URL:
If you choose an image from the Media Library, you can resize it as it uploads. To do this, click on Edit Image under the Attachment Details:
In the image editor, find the Scale Image option. Here, you can enter new dimensions for the picture:
To feature a smaller section of the image, you can also crop it. Keep in mind that it’s often better to scale the image first to avoid any decrease in quality.
Without leaving the image editor, click on the Crop button. Next, move the selection box to edit out anything you don’t want in the picture:
To finish cropping the image, select Crop again. After you save this new cropped version, you can upload it to the post or page.
You can also resize the image using the Block Editor. After uploading a picture to the post, you’ll see small circles on its edges, which you can simply drag inward or outward:
However, this isn’t your only option. In the Block Settings, find the Image size section. Using the dropdown menu, you can change the size to Medium, Large, Full Size, or Thumbnail:
You can edit the image’s dimensions if you want to enter a more precise sizing. Under Image Dimensions, just change the pre-set height and width values:
Once you make changes, you’ll see WordPress resize the image for you. To make sure it’s appropriately sized, you can preview the post and check the picture quality. Remember to Save if you’re happy with the results.
Conclusion 🏁
Using the right image sizes in WordPress can help prevent slow loading times. Additionally, it can ensure that your photos look clear and visually exciting on all devices. Fortunately, WordPress makes it very easy to customize your images.
In this post, we looked at three main ways to configure image sizes in WordPress:
- Change the default image sizes.
- Add custom image dimensions.
- Customize images in the Block Editor.
However, remember that using the right image sizes ✂️ is only half of the battle when it comes to performance. To fully optimize your WordPress images, 🦸 you can use a free plugin like Optimole.
Do you have any questions about using different WordPress image sizes? Let us know in the comments section below!
Free guide
5 Essential Tips to Speed Up
Your WordPress Site
Reduce your loading time by even 50-80%
just by following simple tips.
Keep reading the article at ThemeIsle Blog. The article was originally written by John Hughes on 2022-07-26 09:41:25.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.