WordPress Image Sizes: How to Modify and Optimize Your Images

As competitiveness in content increases along with the decreasing attention span of your viewers, visual elements like images have become more valuable than ever. Therefore, choosing the right WordPress image sizes is one of the very important decisions you will make.

Due to the flexibility that WordPress offers, you can change the default sizes in WordPress and even add custom image sizes. Plus, several image optimization plugins make your job even easier.

So, we’ll learn in this blog how to modify WordPress image sizes, how to regenerate thumbnails (i.e., apply changed settings to the photos you uploaded earlier), image optimization tips, and the pros and cons of different image formats.

WordPress Image Sizes Overview

Every time you upload an image to your WordPress media library, WordPress generates multiple different sizes for that image, for example, 700px x 400px. This means an image is 700 pixels wide and 300 pixels in height.

With this functionality, your website shows the right size to fit the context in which you are using the image – this enhances the loading speed, as well as the appearance.

These numbers are also referred to as image dimensions. In other words, the larger the dimensions of the image are, the more pixels it has, and therefore, that’s the size of the file.

The size of an image also means the amount of storage space it takes on any device. It is normally expressed in bytes, for example, 100KB (kilobytes).

If an image is very large in size, then the time taken for the users to download it is longer hence slowing the rate at which your website is running. Thus, the file size must remain low while the dimensions have to be appropriate. More on image optimization later.

Speed Up Your Site with Cloudways Autonomous (Lazy Load for Images!)

Improve your page load times and user experience by loading only visible images, thanks to Cloudflare integration to Cloudways Autonomous. Get managed WordPress host that cares.

Start Free

How WordPress Processes and Handles Images?

When you upload an image to the WordPress media library, WordPress creates multiple versions of the image in various sizes. The image you upload is referred to as the “full-sized image.” WordPress automatically generates additional versions in predefined sizes, such as thumbnail, medium, and large.

These sizes are defined in the WordPress settings and are used throughout your site depending on where the image is displayed (e.g., post, gallery, or sidebar).

The size uploaded by you is called the full-sized image.

Why does it do this? Imagine it is like WordPress making sure your image is ready for prime time, whether it’s placed in a sidebar, a footer, a post, or a page.

For instance, a small image of 100px might be ideal for a blog post preview, while the same image may look good when enlarged to a banner size.

WordPress develops these different sizes for images to meet the conventional zones of a site without distorting images to extremes.

WordPress Default Image Sizes

The copies of your image that WordPress generates are the default WordPress image sizes. You can adjust these sizes according to your specific design needs. We will learn how to do that in this blog post:

• Thumbnail (150×150 pixels): Typically used for small image previews.
• Medium (300×300 pixels): A mid-sized image often displayed within blog posts or pages.
• Large (1024×1024 pixels): Primarily used for featured images, full-width images, or any situation where a larger image is required
• Full Size: This is the original size of the image you uploaded.

To view these options, upload the photo to your page and click on it. The options for image size will appear on the right panel.

Recommended Image Sizes for WordPress

Different sections of your website have different needs. Each area will need a different size.

Here are details on that:

Image Type	Recommended Size	What to Keep in Mind
Logo	200 x 100 px (or larger, depending on design)	Ensure the logo is high-resolution in PNG format with a transparent background if possible
Header/Banner Image	1200 x 600 px	It should be large enough to fill the screen width but optimized to prevent slow loading times.
Featured Images (Blog Posts)	1200 x 628 px (for social sharing) or 800 x 450 px	Optimized for sharing on social media platforms.
Thumbnail Images	150 x 150 px	Used in blog previews, archive pages, and widgets. Doesn’t need to be very large.
Product Images (WooCommerce)	Main Product: 800 x 800 px Catalog Thumbnails: 300 x 300 px Gallery Thumbnails: 100 x 100 px	Product images should be square for consistency.
Background Images	1920 x 1080 px	Large enough to cover full-screen widths; keep file sizes under 500 KB for faster loading.
Social Media Images	1200 x 630 px	Optimize for sharing on platforms like Facebook and Twitter.

WordPress Image Optimization

There is no reason to have images larger than needed.

Large image files cause web pages to load slowly, which can annoy visitors enough to cause them to leave your site. This could also negatively impact your search engine rankings.

Ideally, WordPress image sizes should be below 150KB, but more size can be tolerated for large pictures.

Here are a few things to keep in mind when optimizing WordPress image sizes.

Compressing WordPress Images

Compression is the process where you reduce the size of the file without affecting the quality of the picture.

Source: Imagify

Compressing images on your WordPress website is one of the ways you can significantly improve its speed.

There are several online tools you can use to do this. Some of them are:

• TinyPNG
• Squoosh
• Imagify
• Optimizilla
• Compressor.io

Compress all JPEGs (photos) and PNGs (graphics) to enhance your website’s speed and efficiency.

There are two main types of image compression: lossy and lossless.

• Lossy compression reduces file size greatly by removing some of the image data that you may not see. It is good for web images, but if applied to the limit, it causes a slightly lower-quality image.
• Lossless compression preserves the quality of the image but decreases the size of the file to a very limited extent. It is useful if one wants to maintain as much detail of the image as possible.

Plugins can greatly help with compression. More on that ahead.

Resizing

Resizing an image means changing the actual size of the image (not the pixel size) in terms of width and height.

Large images consume more disk space and time to be loaded by the browser hence the need to optimize.

Many themes already offer multiple sizes, so you can always choose from there. However, it is always better to manually adjust it before uploading it to the site.

SEO Optimization

SEO optimization for images in WordPress is crucial for both search engine ranking and site performance. Compressing, resizing, and optimizing images not only helps improve load times but also enhances your website’s SEO.

Here are some tips to help you optimize your images effectively:

✅Before uploading the image, make sure to rename it. It shouldn’t be “IMG1425″. Give it a descriptive name like “red sneakers for men.jpg”.

✅Use alt texts. They’re great for both visitors (for accessibility) and crawlers (to understand what the image is about and maybe rank it).

✅Use responsive images because they will maintain or improve mobile performance, a possible ranking factor for engines.

✅Add schema markup for specific types of images, such as product images, to improve SEO. Additionally, create an image sitemap to help search engines better index your images.

Picking a fast hosting provider is a smart and efficient way to ensure that your images are optimized and your website is performing well at all times.

Cloudways instantly reduces website load times by 70% with Cloudflare Enterprise. Features like Brotli compression and Polish image optimization dramatically improve performance compared to free CDN.

Reduce Website Load Times By 70% with Cloudways

Get managed WordPress hosting that speeds up your website. Experience faster page loads, improved user engagement plus ironclad security.

Start Free

Choosing the Right Image Format (JPEG, PNG, GIF, etc.)

Other than resizing, it is crucial to choose the right image format. Each image format has its own pros and cons.

Here are some formats you can choose from:

Format	Pros	Cons
JPEG	Highly compressible Ideal for images with many colors Widely supported across browsers and devices	Lossy compression reduces quality No transparency support
PNG	Lossless compression preserves image quality Supports transparent backgrounds Ideal for graphics, logos, and images requiring sharpness	Larger file sizes compared to JPEG Not ideal for large photographs Older browsers may have limited support
WebP	Superior compression Supports transparency with smaller file sizes Better quality at smaller sizes compared to JPEG and PNG	Limited support in older browsers (e.g., Internet Explorer, older Safari) Requires more processing power to encode/decode Not universally adopted across all platforms

 

Plugins for WordPress Image Sizes

Plugins are a great help when optimizing WordPress image size. Many easy-to-use plugins are available for different needs.

For compression and resizing, you can use the following:

EWWW Image Optimizer

EWWW Image Optimizer is a popular image optimization plugin that automatically comprresses your images. Key features include:

• Unlimited file size
• WebP conversion
• Upto 80% compression with paid services
• Supports PNG, JPEG, GIF, WebP, and PDF files

Ratings: 5/5 (1,725)

Price: Free or starting from $8/month

Smush

Smush is great for both compressing and resizing. It has more than 1 million installations, making it a very popular WordPress image plugin. Key features include:

• Lazy load images
• Convert to WebP
• Lossless compression for free
• Gutenberg Block integration

Ratings: 5/5 (6,000)

Price: Starting from $6/month

Imagify

Imagify is another image optimization plugin that offers both resizing and compression without reducing quality. Key features include:

• Converts to AVIF and WebP
• Image optimization for mobile devices
• Bulk optimization

Ratings: 4.5/5 (1,406)

Pricing: Free or starting from $4.99/month

Changing Default Image Sizes on WordPress

As discussed before, WordPress already provides three default sizes. However, if you think the default settings do not meet your needs, you can change them.

For example, you may think that the default thumbnail setting, i.e., 150×150 is too big, and you need it to be smaller. You can change it to 100×100.

Here’s how:

• Go to your WordPress Admin Dashboard.
• On the left panel, click Setting > Media.

• In the Media Settings section, you can adjust the pixels for each size. In this example, I changed the thumbnail size.
• Hit the Save Changes button to save the setting.

💡The settings you have changed will apply only to the new images you upload. However, the images you already uploaded remain the same, and to apply the new dimensions, you will need to regenerate thumbnails.

How to Regenerate Thumbnails

Don’t worry. It is easy to apply your new settings to existing images. You can do this with the Regenerate Thumbnails plugin.

Here’s how you can do so:

• Go to your WordPress Admin Dashboard.
• On the left panel, click Plugins > Add New Plugin.

• Search for the Regenerate Thumbnails plugin.
• Click Install.
• Click Activate.

• After activating, go back to your dashboard and click Tools > Regenerate Thumbnails on the left panel.

• Here, click the Regenerate Thumbnails Attachments to regenerate all images to new settings.

Adding Custom Image Sizes to WordPress

There are three default WordPress images, but let’s say you need more image sizes. I mean, you don’t just want to change the default settings but have more options.

You can do this as well by adding custom image sizes to WordPress by editing the function.php file.

Here’s how:

1. Go to your WordPress dashboard.

2. On the left panel, go to Appearance > Theme File Editor.

3. Locate the functions.php file on the right.

4. In your functions.php file, you’ll add a function to define new image sizes using add_image_size().

For example:

add_image_size('custom-size-name', 800, 600, true); // 800px wide, 600px tall, cropped

Here:

• ‘custom-size-name’ – A unique name for your custom image size.
• 800, 600 – The width and height of the image in pixels.
• True or false – This is the crop mode. True enables a hard crop (exact size), and false keeps the original aspect ratio (soft crop).

5. Click the Update File button to save the file.

6. To display the custom image size in your theme, paste the following code:

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>

💡 Back up your site before making ANY changes!

7. Replace “your-specified-image-size” with the name you set in the previous step. For example, you might change it to “custom-size-name” size.