WordPress makes it easy to add images to your blog posts and pages. But, if you want those images to look good, you must get the image size just right. That's what we're talking about today: WordPress image sizes.
That’s why it’s crucial to know how image sizes on WordPress websites work and how to add custom image sizes to your website. You’ll then be able to use the most appropriate image file type in the correct size and the right location.
Not only will this make your website look more cohesive, but it will also make your blog posts more shareable.
To achieve that for your WordPress website, keep reading to learn:
- How WordPress manages the images you upload
- How to resize and edit images in WordPress
- The best image sizes for WordPress
- WordPress image sizes best practices
- How to add custom WordPress image sizes
- Final thoughts: decoding WordPress image sizes & overall best practices
How WordPress manages the images you upload
As mentioned earlier, image size matters when it comes to WordPress. If you get the size wrong, your images will look blurry. Worse yet, if your images are too big, they can slow down your website.
Here’s the good news — WordPress has a built-in setting to help you avoid these problems.
WordPress image sizes
- Thumbnail size: 150 x 150 pixels
- Medium size: 300 x 300 pixels
- Largest size: 1024 x 1024 Pixel
- Full size: defaults to the original size of the uploaded image.
By default, when you upload an image to WordPress, it will create four different image sizes.
The reason why WordPress creates these image sizes is twofold. Firstly, it ensures you don’t have to resize images manually. Secondly, it ensures that the correct image size is selected for different locations on your website.
For example, WordPress will display the thumbnail images in a blog post list in a sidebar or a footer widget. But an image that’s supposed to go in your header area or the post itself needs to be bigger. Therefore, WordPress will select one of the larger image sizes to ensure the image is clear and recognizable.
So, if you want to use the same image in different locations on your website, you don’t have to waste time manually resizing them or trying to remember which image dimensions you need. Simply upload one image, and WordPress will take care of the rest.
How to resize and edit images in WordPress
WordPress lets you resize the default image sizes within WordPress. All it takes is a couple of clicks, and you’ll have set the image sizes in no time.
To resize default image sizes, go to Settings > Media. As you can see from the screenshot, all the default image sizes are listed there. You can easily adjust them by typing in your preferred dimensions.
When you’re done modifying the default WordPress image sizes to your preferred dimensions, click Save changes. Moving forward, all the images you upload to your website will be resized to fit the new dimensions.
When to change default WordPress image sizes
There are a few situations when you might need to change the default WordPress image sizes. For example, if you bought a WordPress theme that uses custom image sizes and want to make sure WordPress resizes your image uploads to those dimensions.
Another example is a photographer or another creative who needs specific image sizes to showcase their work. Changing default image sizes may also be necessary if you have an online store and want specific image dimensions for your product images.
WordPress image sizes best practices
Besides getting the image dimensions right, there are a few other best practices for WordPress image sizes.
Optimize image file size
Images are often one of the main culprits for slow loading times. If your image file sizes are too big, your visitors will have to wait a long time for the browser to download them before they’re visible.
Therefore, before you upload any photos to your website, you should reduce their file size. Generally speaking, aim for 150kb or less when it comes to image file sizes. You can reduce the file size by saving the image in a lower quality.
If you’re dealing with large photos such as background images, you’ll need to find a fine balance between image file size and quality. In other words, you’ll want to reduce the file size but prevent the image from becoming pixelated.
How to Optimize Images for WordPress: The 6 Most Popular Image Compression Plugins
You can also use image compression tools. These help you to reduce the file size without compromising the quality. We present you 5 plugins for optimizing your images.
TinyJPG is an online image compression tool that will significantly reduce the size of your images, even up to 70%, without a noticeable difference in quality.
You can compress up to 20 images up to 5MB in size at once for free. Or, you can sign up for TInyJPG’s Pro plan starting at $25/year for one user. The Pro plan lets you compress more than 20 images at once and removes the 5MB WordPress image size limit.
TinyJPG is an excellent solution for images that you want to upload to your website. But what about images that are already on your website? That’s where a plugin like ShortPixel comes in handy.
The plugin will help you compress images that you’ve already uploaded to your website and process and compress any future image uploads. It reduces the file size up to 75% without a noticeable difference in quality.
In addition, the plugin lets you convert any JPG, PNG, and GIF to WebP and AVIF image file formats explicitly designed to provide superior lossless and lossy compression for images on the web and in your media library.
ShortPixel is free for up to 100 images/month. You can buy additional image credits starting at $4.99 for 7,000 image credits.
Use the correct image type
WordPress lets you upload images in several formats. Most commonly, images are saved as JPG, PNG, or GIF. However, each of those formats has its own set of advantages and disadvantages.
Here they are:
- JPG (JPEG) – stands for Joint Photographic Experts Group. This file type supports 16 million colors and typically results in the smallest file size for photos. This file type is an excellent choice for background images, product photos, featured images, and generally speaking, any image or photo you may want to use on your website.
- PNG – stands for Portable Network Graphic. This image format supports fewer colors than JPG. However, it lets you save images with a transparent background. It’s a great choice for your logo images, background patterns, decorative website graphics, social media icons, and similar. Images saved as PNG can result in larger file sizes if the image has a lot of details.
- GIF – stands for Graphics Interchange Format, and it supports 256 colors as well as transparency. GIFs can also be animated. GIFs can be small, but they can also result in larger file sizes if they contain complex animation.
Keep image resolution in mind
Another aspect to keep in mind when optimizing images for the web is image resolution. Image resolution is measured in dots per inch (DPI), and it determines the quality of the picture. The bigger the DPI, the higher the image resolution will be.
Your image resolution should be set to 72 DPI for web purposes as this is considered the standard. A larger resolution will result in a large size and contribute to your website loading slowly.
"*" indicates required fields
How to add custom WordPress image sizes
You can add custom image sizes by editing your functions.php file. For example, let’s say you want to add a custom image size for your featured image.
All you have to do to add it to your theme is the following:
In your WordPress dashboard, go to Appearance > Editor. Open the functions.php file and search for the following line of code:
add_theme_support( 'post thumbnails' );
If it’s not there, paste that line in and then click the Update file button. Then, paste the following line into the functions.php file:
add_image_size( 'blog featured image', 1280, 630 );
The line above adds the custom size to your theme and specifies the width and height of the new image size. Update the file to save the changes.
You’ll then need to update the code in your theme to have it display the new custom image size for you to select during uploading. This time, open up the index.php file and add the following line of code:
the_post_thumbnail( 'blog featured image' );
After that, update the file to save the changes. Keep in mind that your custom image size will be overwritten with each theme update if you use the manual method.
Therefore, we recommend using a child theme or adding custom image sizes using the Image Regenerate & Select Crop plugin. This plugin lets you easily register new custom image sizes and regenerate thumbnails to the new set of image sizes.
Final thoughts: Decoding WordPress image sizes & overall best practices
Images help tell your story and make it easier for your readers to relate to your posts and pique their interest in the first place.
That’s why it’s crucial to get the image sizes just right for your website. The tips shared in this article will help you size images properly and add custom WordPress image sizes.
To ensure your WordPress image size optimization efforts pay off, make sure to back up your website with reliable hosting. After all, there’s no use in trying to speed up your website if it’s tied to subpar web hosting.
Try WordPress hosting with Raidboxes to give your website the fast loading times your audience deserves. You can contact us if you want to learn more about the benefits of Managed WordPress Hosting.
2 Comments on "WordPress Image Sizing: How Images Work in WordPress & Best Practices for Your Website"
Ich habe es eben ausprobiert und ein Foto mit 240 dpi und das Gleiche mit 72 dpi exportiert. Die Dateigröße ist dabei die gleiche geblieben. Also macht es keinen Unterschied und spare nichts ein.
Ein Pixel ist ein Pixel. Außer bei Retina-Displays interessiert es auf Websites schlicht absolut gar nicht, was für eine Auflösung die Bilder haben. Die Auflösung ist nur dann interessant, wenn das Bild gedruckt werden sollte. Ich frage mich, wann dieser blödsinnige Mythos endlich stirbt.