Sunday, September 25, 2022
HomeWordpressTipsAll You Need to Know About WordPress Image Size

All You Need to Know About WordPress Image Size

WordPress image size is more complicated than you might think. Understanding how image sizes work in WordPress, what are the default image sizes, and how to define custom image sizes to effectively manage your site is critical.

Having this knowledge will ensure that you have the right type of image at the right size in the right place so you can get the most out of your visual content strategy.

These strategies will also increase the share value of your posts, which will translate into more visibility and traffic. Statistics show that after three days readers only remember 10% of the textual content they read, but if you add visually appealing images to your content, that number goes up to 65%.

How to Manage Uploaded WordPress images

Uploading images to WordPress is pretty straightforward, but pretty much happens when they are processed in the WordPress backend.

When you upload an image, the first thing WordPress does is create three different image sizes. That means you get four images for every image you upload:

  • Thumbnail size
  • Medium size
  • large size
  • original size


WordPress creates all these different sizes in order to serve your images in the most suitable size for each visitor. Your website will always show your readers the correct image based on the device they are using, speeding up and enhancing their experience.

You can always manually edit an image to provide these extra dimensions, but editing it accurately in a tool like Photoshop is not an easy task. This would involve a lot of tedious work, which is why WordPress saves you the trouble. We recommend some useful tools here: 20 foolproof on-line drawing tools and software

WordPress Image Size: Basic Things to Keep in Mind

Before we dive into more technical aspects of WordPress image sizing, there are some important notes you should know.

We’ve discussed how WordPress creates three default image sizes for you, but what if you need a different size than WordPress’ default? What if you want more sizes?

The good new is that you can do this easily. WordPress allows you to change the default image size and add as many other sizes as you want. We’ll explain this in more detail later.

But before we start, you should know that there are specific requirements to work as you wish.

One of them is that you should try to upload the largest size image you need. While WordPress will make it smaller on smaller devices, it will use full size (original size) where images need to be the largest.

Suppose you upload an image that is smaller than the maximum size you have defined in WordPress. In this case, WordPress will not display that particular image correctly at the maximum size. Also, the quality will drop significantly.

It means you must also must not upload images larger than the maximum size required. WordPress will never use such images because they are too large and take up unnecessary space on your server.

Therefore, before uploading to WordPress, you should check the size of the image you upload and make sure it is the maximum size you want, but not larger than that.

Where are those WordPress images are saved.

As far as your dashboard is concerned, WordPress stores your uploaded images in the media library. You can view all uploaded images by hovering over the media option and clicking on the library.

WordPress image size

You can sort them by media type (image, video, audio, etc.) and date. However, please note that if you don’t disable this feature in Settings, you can only sort images by date.

There is also a search box on the right to help you find uploaded images. Just enter the word you use in the title, description or description of an image to find it.

Your images are stored in your website’s uploads folder ( wp-content/uploads/ ). To access this folder you need to use an FTP/SFTP client. Your site’s uploads folder will have several subdirectories containing your images by upload date (assuming you’ve turned on the sort by date option in Settings).

You can also create custom folders for your media files, but we recommend that you only do this if you consider yourself an senior user.

What is the default WordPress image size?

When it comes to WordPress and image sizes, we always look at four different images, including your original image file and the three different sizes that WordPress creates by default:

  • Thumbnail size: 150px (square)
  • Medium size: max width and height 300px
  • Large size: max width and height 1024px
  • full size: the original size of the image


Again, as we mentioned before, if you plan to use only these default image sizes, you’ll need to upload a 1024px image. This will allow your images to be served correctly even at the maximum size, which may not be possible if your image size is smaller than the maximum size used by WordPress (1024px by default).

How to change the default WordPress image size and when

While the default WordPress image size works for most users, some users may have different requirements. You may prefer a slightly larger thumbnail size or a smaller large image size.

When you find yourself editing most of the images you want to upload, it makes sense to change the default image size in WordPress because WordPress’ default image size is not suitable for your use case.

Before adding new custom image sizes on top of the default image sizes, be aware that you will be storing more image files in your site’s database than you need. This can cause performance issues on your site and consume more space than it needs.

The same is true for image-based websites that need to stick to specific image sizes. Photographers, designers, and others who provide a large number of images like to maintain consistent dimensions anywhere throughout the site to ensure uniformity.

Likewise, some landing pages need to display specific image sizes, and the default WordPress image sizes may not fit. And an e-commerce store usually needs to use larger thumbnails, which reveal more detail.

There are many more reasons why you might want to change the default image size, but you get the idea.

WordPress understands this too, which is why it allows you to change these default settings.

Steps to Change WordPress Default Image Size

Here is a step-by-step process to change the default image size in WordPress.

Step 1: Hover over Settings and click on the media options that appear:

WordPress image size

Step 2: Change the size as you want by editing the numbers as follows:

WordPress image size

Step 3: Click the “Save Changes” button at the bottom.

All images you upload from here will now be in these new default sizes.

Some tutorials will suggest that you enter “0” as the default image size. However, we don’t recommend doing it, even if it helps you save space.

If you change these values to “0”, then WordPress will use your full-size (original) image in all locations and on all devices, which will cause a spike in bandwidth usage on your site. Also, this will almost certainly slow down page load times for sections that display many of these images.

Use the WordPress built-in image size editor

As we emphasized earlier, you should only create custom image sizes that you use frequently. For image sizes that you plan to use only in rare cases, it makes sense to manually edit the image size using the WordPress built-in image size editor.

We’ll give you a quick demonstration explaining how to edit image sizes quickly and easily using the built-in editor.

First, click on the media menu you want to go to the media library. Next, click on the image you want to resize.

Then click the Edit Image button just below the image:

WordPress image size

You will see the current image size and can adjust it here. Just enter the size of the image you want, click the “Stretch” button, and you’re ready to go.

WordPress image size

Edit WordPress images in Gutenberg

If you’re using Gutenberg, you can quickly edit the image size of images when adding them during article creation.

WordPress image size

As you can see in the image above, when you upload an image when you create a post in Gutenberg, you can choose an existing image size or change the image size in the post options.

If you’ve added new custom image sizes to your theme file, you’ll find them in the Image Size drop-down menu.

You can also change the image size using the fields below it. All you need to do is enter the desired dimensions in the fields and the image will automatically adjust to your new specifications.

Optimize your images

Any tutorial about WordPress image is complete without mentioning image optimization. While we’ve discussed optimizing images in detail, it certainly doesn’t hurt to mention some quick tips.

After all, when you add custom image sizes, you need to know how to optimize your images to make sure they don’t affect your site’s performance or consume more server resources than they need.

Having said that, here are some quick tips to help you get started with image optimization.

Decide on image type

Simply choose the correct file type for your image to significantly reduce its size. While there are many different types of image files, the vast majority are JPEG or PNG.

When it comes to color images, JPEG wins. Additionally, you can further compress JPEG files to reduce their file size with only a slight loss in quality (if done correctly).

PNG, on the other hand, often becomes a better choice for drawings, text, most screenshots, and graphics.

Resize images

Resizing an image is a quick and easy way to reduce the file size of an image. As a rule of thumb, you should make sure that all images on your website are only the size they need to be.

If your website has a maximum width of 1200px, it doesn’t make sense to put an image on your website that is wider than the 1200px maximum.

We also said it important not to create new custom image sizes unless needed, so keep that in mind.

Choose lossy compression

Lossy compression is a great way to further reduce file size after you’ve already optimized your images using other methods.

This means removing some image data, which won’t have much of an impact on image quality, but can help reduce file size considerably.

Regarding to this topic, you can refer to this post: How to compress images to speed up WordPress websites. There are several recommended plugins, such as WP Smush and Optimus WordPress Image Optimizer which you can use to compress WordPress images

Use lazy loading

Lazy loading helps you to prioritize the loading of images on your website pages. It loads images in time as the visitor scrolls the page. This means that the topmost image will load immediately, but all images below the fold will not load until the user scrolls past the fold.

There’s more to it, but you’ll find it all in our image optimization tutorial, so let’s jump right into some image optimization plugins you can use.

This tip post has more: Worry about your WordPress Website Speed? Try this Lazy Load Plugin

Summary

You now know all about WordPress image size and how to get the most out of the features and customizations WordPress offers in this department. Now that you know how to handle WordPress images from the inside out, you should find it easier to optimize your website for performance and functionality.

You can create custom image sizes and manage them directly from the theme code or using a plugin built for that specific task. Remember to update your old thumbnails anytime you plan to update your images – it’s also an easy task thanks to the helpful plugins we’ve listed above.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular