🎉 AgentWP is now in Public Beta Testing.

close
By: Christy Cañete
Published: July 17, 2024

How to Edit Images in WordPress [Quick Guide for Beginners]

Want to quickly edit an image on your website? Follow the steps in this guide as we show you how to resize, crop, and scale your images without leaving your WordPress dashboard.
share

Table of Contents

Need to adjust the size of your image before publishing a post? You’re in luck! WordPress comes with a built-in image editor that lets you make quick adjustments without leaving your dashboard.

In this quick tutorial, we’ll show you how easy it is to resize, crop, or flip images without using another software. Read on!

How to Crop, Rotate, Scale, and Flip Images in WordPress

Editing an image right on your WordPress dashboard is straightforward. Here are the steps to follow:

Step 1: Access Your Media Library

Head to your WordPress dashboard and click on Media > Library. This is where you’ll find all your uploaded images.

Step 2: Choose Your Image

Browse through your library and click on the image you want to edit. A popup window will appear, showing you a preview and some details.

WordPress image library

Step 3: Open the Editor

You've got two ways to start editing your image. First, you can click the 'Edit image' button under the preview. Or, hit 'Edit more details', then click the 'Edit Image' button on the next page.

WordPress image editor

Step 4: Access Tools for Image Editing

You'll see a toolbar at the top with editing options, and a column on the right for resizing. These are your go-to tools for image editing.

WordPress editor tools

To crop an image, simply click the 'Crop' button. Select the area you want to keep, and adjust as needed. When you're happy, click the checkmark to apply.

To rotate, click on “Rotate left” or “Rotate right.” If you want to flip an image, choose “Flip vertical” or “Flip horizontal.” Don't worry about mistakes – you can always “Undo” or “Redo” it.

Step 5: Resize Your Image

Look for “Scale” from the editing tools and click it. Enter your desired dimensions. Note that in WordPress, you can only scale your image down, not up.

resize WordPress image

If you want to maintain a specific shape, go ahead and click the "Aspect Ratio" option. This is great for keeping your image proportional. However, it only works if you’re cropping an image.

Step 6: Choose Which Sizes to Edit

WordPress can create multiple sizes for each of your images. 

To do so, just go to Settings > Media. Under “Image Sizes,” set the maximum dimensions (in pixels) to use when uploading an image to your library.

WordPress media settings

Step 7: Save Your Work

Once you're satisfied with your edits, hit the “Save” button. WordPress will create a new version of your image while keeping the original intact.

How to Restore an Original Image After Editing

So, you’ve just finished editing your image, but suddenly realized you’ve gone a bit too far. Luckily, WordPress offers simple ways to undo your changes.

First, look for the “Undo” button in the image editor. Click this to undo your most recent change.

Another way is to access the Edit Media page for your image. Look for the box labeled “Restore original image.” Expand it and click 'Restore image.'

restore WordPress image size

Just like that, your image is back to its original state. You can now start fresh or keep the original as is. 

How to Edit Product Images for WooCommerce

As an online store owner, you know that great product photos can make or break a sale. 

To edit your WooCommerce product images, follow these steps:

Step 1: Access Image Settings

From your WordPress dashboard, hover over Appearance in the left-hand menu, then click on Customize. Then, in the Customizer, click on WooCommerce > Product Images.

Customizer product images

Step 2: Set the Main Product Image Size

Next, find the "Main image width" setting. Set this to between 600-800 pixels. Doing so will make your primary product image large enough to showcase details without slowing down your site.

Customizer main image width

Step 3: Adjust Catalog Thumbnails

Look for the "Thumbnail width" setting for shop pages. Aim for 200-300 pixels. This size should provide a good preview while maintaining a clean, organized look on category pages.

Customizer thumbnail width

Step 4: Choose Cropping Style

Depending on how you want to display your thumbnails, you can choose between "1:1" for square images or "Custom" for specific ratios. Make sure to choose the right one that looks good for your products and theme style.

Customizer cropping style

Step 5: Save and Test

Finally, click “Publish” to apply your changes. Then, view your store on different devices and check your images. They should look good and load quickly across all screen sizes.

Tips to Optimize Images for Faster Loading Speeds

Images that are not optimized can slow down your website. If you have hundreds to thousands of product images on your WooCommerce store, then you must not skip this process.

First off, make sure to use appropriate file formats. This could be JPEG for colorful photos, PNG for images needing transparency, or WebP for superior compression if your site supports it.

Then, you’ll need to compress your images to reduce their file sizes without losing the quality. 

There are several plugins that can help you achieve this. Simply install, activate, and configure your chosen plugin, and all your images will be automatically compressed as you upload them to your site.

These are the plugins we recommend you to try:

1) EWWW Image Optimizer

EWWW Image Optimizer

EWWW Image Optimizer is a versatile plugin that solves image bloat. It offers a free version focused on image compression. If you want advanced optimization features like page caching and code minification, you can get the premium version. 

If you want to enhance SEO and efficiently manage your media library, you should consider this plugin.

Key Features:

  • Handles JPG, PNG, GIF, and even PDF files
  • Choose between lossless (keeps quality) or lossy (smaller files) compression
  • Works with popular plugins like WP Retina 2x and NextGEN Gallery

2) Imsanity

Imsanity

Imsanity is a free plugin that automatically resizes your images to a configured width and height as they’re uploaded. 

If you’re working on multi-contributor sites, we highly recommend this tool, as it maintains image consistency without requiring your users to manually resize their uploads.

Key Features:

  • Resizes large images on upload
  • Can convert BMP and PNG to space-saving JPG
  • Easy to set maximum dimensions and quality

3) ShortPixel Image Optimizer

ShortPixel Image Optimizer

ShortPixel Image Optimizer compresses your images and converts them to more efficient formats such as WebP and AVIF. It offers different compression levels (lossy, glossy, and lossless) to balance image quality and file size. It also supports bulk optimization and offers advanced features like automatic scaling and WebP/AVIF generation​.

Key Features:

  • Optimizes images as you upload them
  • Bulk optimization for your existing media library
  • Keeps original images as backups
  • Great for PNG, JPG, and GIF files

Editing Images in WordPress - FAQs

How do I adjust an image in WordPress?

To adjust an image in WordPress, go to your Media Library, select the image you want to edit, and click on "Edit Image." From there, you can crop, rotate, scale, and flip the image as needed.

How do I format an image in WordPress?

To format an image in WordPress, insert the image into your post or page. Click on it to access formatting options. Then, you can adjust alignment, add captions, set a custom size, and even link the image to a URL.

How do I change the alignment of an image in WordPress?

To change the alignment of your image, click on it in the editor to access the alignment options. Choose from left, center, right, or no alignment to position the image as desired.

That’s It!

Well-edited images can speed up your website, improve SEO, and keep your visitors engaged. Thankfully, WordPress allows you to make basic adjustments right from your dashboard.

But if you’re looking for more advanced editing features, there are plenty of plugins you can try. As mentioned in this article, our favorites are EWWW Image Optimizer, Imsanity, and ShortPixel. Feel free to do your own research and find the best one you’re comfortable to use.

We hope this guide has been helpful!

By: Christy Cañete
Technical Writer

AgentWP Mascott
Try The Only AI Agent for WordPress
Use AgentWP to learn, create, maintain, secure, code... the list goes on.
Use For Free

Join The AgentWP Newsletter

Product updates, AI news, and WordPress content.

Related Content

Do Anything WordPress.

Start For Free