How to Replace an Image in WordPress (and Reduce its Size)

High-quality images greatly impact a website’s presentation. As your site ages, updating images is a key part of staying fresh, current, and relevant.

Fortunately, replacing images in WordPress is a simple process. You just need to follow a few guidelines. On this page, you’ll learn how to replace an image in WordPress without causing broader problems for your website — and reduce its size while you’re at it.

What to do before replacing an image in WordPress

If you’re solely looking to replace images in WordPress to boost your site performance, going through every page and post and deleting old photos, then uploading new ones is pretty unrealistic. 

Instead, you can optimize all of your images files much more efficiently using a plugin. It’ll save time and your images will be optimized automatically.

Jetpack Boost is the top option for this.

Install a tool like Jetpack Boost

Jetpack Boost is an incredible time-saver, automating the process of resizing images (and more!).

The Image CDN feature serves media files from Jetpack’s global content delivery network. It automatically resizes images, converts them to more efficient formats, and delivers them from the server closest to each individual visitor.

The Image Guide tool automatically fixes file sizes, suboptimal resolutions, and aspect ratios for your images, improving both the user experience and load time.

To install Jetpack Boost, go to Plugins → Add New Plugin in the WordPress dashboard. Search for Jetpack Boost. Locate it from your options and click Install → Activate.

Activate the “Image Guide” and “Image CDN”

Once Jetpack Boost is installed and activated, it’ll ask you to choose which version you want — free or premium.

The free version can help you:

• Optimize critical CSS loading
• Cache site pages
• Defer non-essential JavaScript
• Concatenate JavaScript and CSS
• Harness the power of an image CDN
• Fix image size errors

The Premium version adds features like:

• Auto CSS optimization 
• Automatic image size analysis
• Historical performance scores
• Image CDN quality settings
• Dedicated email support

For the purposes of this tutorial, we’re using the free version. To get started, click Start for free.

Once the page refreshes to the Settings screen, scroll down to Image CDN and Image Guide. Enable both toggles. Both Image CDN and Image Guide are ready to optimize your images.

Optimize Critical CSS Loading is enabled by default. It generates the critical CSS automatically. Stay on this page until the process is completed.

Use Jetpack Boost for automatic image resizing and optimization

Image CDN and Image Guide work in the background. There’s no need to adjust settings. Once they’re enabled, Boost provides an overall score for your site.

Overall Score

The overall score displays individual results for mobile and desktop. This shows your site’s speed and historical performance. The score is part of the free features, while unlocking historical performance requires the premium version. To see your score, go to Jetpack → Boost and select Refresh to see the latest score.

The score varies depending on your site’s content and optimization. Let’s say a test site scores 87 for mobile and 90 for desktop before enabling Boost. Then, after enabling the plugin, it scores 93 and 95 respectively. The site now loads faster and uses fewer server resources.

Image Guide

Image Guide displays information on the front end of the website. Click Image Guide in the top menu to activate or pause it. When active, information appears within green circles in the upper-left corner of each image. 

Hover over them to see information about the images. A popup provides information regarding the file extension, image size, potential savings, and a link to learn how to optimize the images.

This example shows the image is 1.14 times smaller than expected for this screen, which could appear blurry. It also provides the dimensions of the file, the size on screen, and the file size.

How to replace an image in WordPress (four ways)

There are several methods to replace an image in WordPress without causing errors, whether you’re replacing the image in the WordPress media library or within specific content. Let’s look at four ways to replace an image in WordPress.

Method 1: Using the block editor

This method leaves the old image in the WordPress media library while replacing it in the content. Any other content that uses the old image will continue to do so. This is ideal if you only want to replace the image in one or two locations while keeping the original for other posts.

Open the content and select the image you want to replace. This opens a menu above the image block. Click Replace to see a small popup. Select Open Media Library.

Navigate to the image you want to use in your WordPress media library and select it. To do this, click Select in the lower-right corner of the library.

Your new image will replace the old image in the WordPress block. The original image still exists in the media library and all other pages or posts that use it still display it as normal.

Manually replacing an image within a few posts doesn’t take a lot of time, but it becomes time-consuming if you need to replace multiple images within lots of posts. It’s also possible to miss a post, leaving the old image in place rather than swapping it in all locations. 

Because of this, it’s better to replace the image in the media library if it’s used in multiple posts, and you want to swap it for all locations.

Method 2: Using the WordPress media library

This method replaces the old image within the WordPress media library. Any content that uses the old image will have the new image in place of the old one. This method is ideal if the image is used in lots of posts across the website, and you don’t want to keep the old image at all. It keeps the URL intact, reducing link errors within the website.

Install a plugin

Use a plugin to add the option to replace an image inside of the media library. The plugin replaces the image without causing errors within your content. There are several good plugins to choose from. The Enable Media Replace plugin is the most popular. It gives you control over the replacement process.

To install the Enable Media Replace plugin, go to Plugin → Add New Plugin in the WordPress dashboard. Search for “Enable Media Replace.” Find the plugin from the listed options then click Install Now, then Activate. Once installed, Replace Media will be an option within your media library.

Replace an image in the media library in list view

Replacing an image in the media library with the Enable Media Replace plugin is simple. In the WordPress dashboard, go to Media → Library. Select the list icon, search for the image you want to replace, hover over it, and click Replace Media.

A new window opens with replacement options. Choose your options at the bottom of the screen before selecting the new image. This plugin has two replacement options, including:

• Replace the file. Use a media file of the same type and keep the file name. This will only replace the file. 
• Replace the file, use the new media file name, and update all links. Replace the file name and update all the content to display the new file. This won’t update external websites that directly link to the new image, however, so those links no longer work.

Regardless of which replacement options you choose, you can also select options for the new file date. Options include:

• Replace the original date with the current date.
• Keep the original date.
• Use a custom date.

At the top of the Enable Media Replace screen, you’ll see an area named Select Replacement Media. It shows the current file on the left and an area for the new file on the right. Click New to open a location on your computer or drag your new file to the area from your desktop.

Preview the new image and compare the before and after prior to uploading the image. In this example, the resized image is being uploaded at 510 KB, which is much smaller than the original at 5 MB. The image was manually resized and compressed via an image editor.

Click Upload at the bottom of the page.

Once the upload is completed, a message informs you that the file was replaced, and you’re taken to an image editor. Upload a new image from this editor if you want and scroll down to choose the image size you want to use as the thumbnail in the right sidebar.

Replace an image in the media library in grid view

Select the image you want to replace to open the attachment details. Select the grid icon if it isn’t active.

On the right side of the popup, click the button labeled Upload a new file.

This takes you to the Replace Media Upload screen where you can replace the image as described in the previous example.

Method 3: Using your page builder’s editor

This method works similarly to the process using the block editor. It replaces the old image within the content but keeps it in the media library. This way, all other content that uses the old image still uses it. This is ideal if you want to replace images in a few posts but keep the original in the library for use with other posts.

Elementor is one of the most popular page builders, so let’s discuss how to replace images using it. 

To replace images in Elementor, click on the image in your content that you want to replace. A menu opens on the left side of the screen. This menu includes all the options for the image block. There should be three tabs at the top of the menu. 

Select the Content tab, if it hasn’t been selected already. Hover your mouse over the image in the menu. A small button appears at the bottom of the image in the menu then click the button labeled Choose Image to open the media library.

Choose the new image and click the Select button in the bottom-right corner of the media library screen.

The new image will replace the old image in the content but the original image still exists in the media library to be used in other content.

Method 4: Via FTP or your hosting file manager

Another option is to use FTP or your host’s file manager to replace an old image in the media library with a new one while keeping the image’s URL intact. This approach is ideal if you don’t want to use a plugin to replace images in every location they’re used.

You will need a FTP client or the file manager provided by your hosting company. The file navigation is the same for both. For this tutorial, let’s use the file manager. 

Log into your cPanel and select File Manager from the menu options.

If you have multiple websites, click on the folder of the website you want to modify. If you have one website, or you want to modify the primary website, click on public_html.

Open the wp_content folder.

Then open the uploads folder. This folder contains all the files you’ve uploaded to your WordPress website.

The files are sorted into folders by year. Select the folder for the year you uploaded the image, and then the month.

Inside this folder, you’ll see all the images you’ve uploaded for that month. You can upload a new image with the same name as the image you want to overwrite or delete the old files before uploading. If you want to overwrite, click Upload. 

If you want to delete the old files, select all versions of the image and delete them. This ensures that all sizes update to the new image. WordPress automatically creates multiple versions of the new image in various sizes.

Click Confirm to delete the files.

Next, select Upload at the top of the screen.

If you decide to overwrite the old files instead of deleting them, select Overwrite existing files on the Upload screen. Upload a new image with the same name as the old one. Every post that used the old image will now use the new image.

Best practices for image replacement and management

It’s important to follow some best practices when replacing media files and managing them in WordPress. Otherwise, the WordPress media library becomes bloated and images load slowly. It also makes the media library itself load slowly on the backend as you attempt to work on your site. 

Choose the right image formats

There are many file formats available, and each has advantages. There isn’t a perfect format for every need. Choosing the correct file format does matter though, so select one that balances quality and file size based on what would best serve the content. 

Here are a few guidelines to help you decide.

• JPEG. Use JPEG for detailed photos and images with gradients. This raster format offers lossy compression and low file sizes. There is a small loss of quality, but it’s less noticeable for smaller images.
• PNG. Opt for PNG for text, logos, and graphics with sharp edges and transparency. This raster format provides lossless compression, preserving image quality but does result in larger file sizes.
• SVG. This is a vector graphic with a lossless compression that remains sharp as it scales. It’s great for logos and icons that need to remain sharp at any size.
• WebP. Consider newer formats like WebP for high compression. This format offers moderate quality images with lower file sizes. Make sure to check browser compatibility when using newer formats, however.

Maintain consistent image quality

Keep image quality consistent across your website. Inconsistent image quality appears unprofessional. Consistency helps build a site’s branding and maintains a professional appearance overall.

Regularly update and audit images

Regularly updating your images helps maintain consistency as well. It also gives you a chance to update older images that may no longer be on brand or that lack the desired quality level. Conducting an image audit periodically can speed up load times and reduce storage usage, too.

How Jetpack Boost helps automate these best practices

Boost provides the tools needed to perform these best practices in a straightforward way. It automatically resizes images and converts them to the best formats in the proper sizes. Boost beats the top five performance plugins, so it’s a great choice for website optimization.

Tools like the Image Guide and Image CDN take the guesswork out of identifying images for improvement and speeding up load times. Automated code optimization further streamlines your site files for premium-level performance. 

Finally, everything about Jetpack Boost is meant to help your Core Web Vitals score, which is key to improving your search engine rankings. 

If you want to speed up your site while protecting your time and your wallet, Jetpack Boost is the plugin you’ve been looking for.

Frequently asked questions

A lot of ground has been covered here about how to replace images in WordPress, but if any of your questions have yet to be answered, the following should address them.

What image file types can I use in WordPress?

WordPress natively supports the JPEG, PNG, GIF, and ICO (the format used for favicons) image file types. WordPress can support media file types like SVG, BMP, and WebP, but these require a plugin.

Where can I find the media library in WordPress?

To find the media library in WordPress, go to the dashboard then click on to Media → Library. This shows all the images in your library. Here, you can sort, search, or select an image. To add a new image file, go to Media → Add New Media File.

Can I bulk replace images in WordPress?

You can’t bulk replace images in WordPress without a plugin. By default, the media library only has a bulk select feature for deleting images.

What should I do if I accidentally delete an image from my WordPress site?

If you accidentally delete an image, you can re-upload it or restore a recent backup. It’s best to use a service that provides real-time backups so nothing is lost.  

For the best quality backups, use a plugin like Jetpack VaultPress Backup. This is a premium plugin with real-time cloud backups, 10GB of backup storage, a 30-day archive log, and one-click restores.

Why is image optimization important for website speed?

Image optimization is important for website speed because large media files load slowly, causing higher bounce rates, fewer visitor returns, and lower search engine rankings. Larger file sizes also require more storage space and bandwidth.

How can I tell if an image is too large for my website?

The Image Guide feature in Jetpack Boost provides tools to test image sizes at a glance. It reveals suboptimal resolutions, aspect ratios, and sizes.

What is a CDN, and how does it help with image delivery?

A CDN (content delivery network) is a network that compresses and stores images until they’re requested by a user. The images are then decompressed in real-time and delivered based on the user’s location. A CDN delivers images faster and reduces the strain on the website’s server. Jetpack Boost provides an Image CDN, which helps deliver optimized images effectively.

What are the benefits of using WebP images on my WordPress site?

Developed by Google, the WebP image format improves website loading speed while maintaining decent image quality at small file sizes. This results in faster page loading, a better user experience, and improved search engine rankings. Conveniently, Image CDN in Jetpack Boost automatically converts WordPress images to WebP.

Can I automate the process of image optimization in WordPress?

Yes. Jetpack Boost provides automated image optimization.

What other WordPress optimization features does Jetpack Boost offer?

Jetpack Boost is available in a free and premium version. The free version includes critical CSS optimization, site page caching, the ability to defer non-essential JavaScript, and concatenation of JavaScript and CSS.

The premium version includes auto CSS optimization, image size analysis, historical performance scores, an Image CDN, auto image resizing, and dedicated email support.

Where can I learn more about Jetpack Boost?

You can learn more about Jetpack Boost and its features on the Jetpack Boost product page.