How To Resize And Compress Images For Your Website

In this tutorial, we’ll delve into the essential steps to resize and compress images for your WordPress website. You might be wondering, why is this important? Well, images can take up a considerable amount of space and time on your website, drastically affecting its speed and performance. A slow website can lead to impatient visitors leaving before they even see your content, and Google may penalize you in search rankings.

Why Do You Need to Resize and Compress Images?

If your website runs slow, your visitors will get impatient. They won’t wait to see what you have to offer, and they’ll abandon your site. Therefore, it’s crucial to make your site as lean as possible. There are two main aspects of image optimization:

1. Dimensions: The width and height of the image
2. File Size: The actual file size in kilobytes (KB) or megabytes (MB)

Knowing the Right Dimensions

A fantastic tool to determine the necessary dimensions for your images is My Theme Examples. This tool provides the width and height dimensions for Divi images in a 16:9 ratio.

Resizing and Compressing Images: A Step-by-Step Guide

Preparing Images Before Upload

It’s best to resize and compress your images before uploading them to your WordPress site. This ensures your images are the right size and won’t bog down your site.

1. Resize your image dimensions: Before uploading, adjust the dimensions to fit the requirements.
2. Compress the images: Minimize the file size to less than 500KB, which is generally suitable for web use.

Tools for Resizing and Compression

Bulk Resize Photos

One effective tool for resizing image dimensions is Bulk Resize Photos. Here’s how to use it:

1. Drag the image you want to resize onto the platform.
2. Choose the image dimensions. For instance, if you want the image to be three-fourths of a column size, specify dimensions like 795 by 447 pixels.
3. Ensure the image format is JPEG, as JPEG files are generally smaller than PNGs.
4. Adjust the image quality settings to find the balance between quality and file size.

   

After resizing, download the compressed image.

Tiny PNG

If Bulk Resize Photos doesn’t compress the file enough, you can use Tiny PNG. Here’s how:

1. Drop your image onto Tiny PNG.
2. Tiny PNG will compress the image and show you the new file size.
3. Download the compressed image.

Tiny PNG allows you to drop up to 20 images at a time, with a maximum file size of 5MB each.

Uploading Images to WordPress

When you upload an image to WordPress, it creates three versions: thumbnail, medium, and large. If you want to prevent WordPress from generating these extra versions:

1. Go to your WordPress dashboard.
2. Navigate to Settings > Media.
3. Set the thumbnail size and medium size to zero if you don’t want them.

   Screenshot of WordPress media settings

Checking Your Website’s Performance

To ensure your images and overall website are optimized, use GTmetrix. Here’s how:

1. Sign up for a free account to get more functionality.
2. Navigate to your account settings and enable legacy reports.
3. Select the server closest to you for more accurate results.

When using GTmetrix, if an image is the wrong size, it will recommend the correct size. Simply resize the image to the suggested dimensions and re-upload it.

> "Images are one of the biggest factors in optimizing your website for speed." - V. Evans

Final Tips

If you prefer not to manually optimize each image, you can use plugins like ShortPixel or Smush for automatic compression. However, manual optimization often yields the best results.

Conclusion

Optimizing your images before uploading them to your WordPress site is crucial for maintaining a fast and efficient website. By following the steps and tips outlined in this tutorial, you’ll ensure your site’s images are just the right size—both in dimension and file size—keeping your visitors happy and your SEO in good standing.

Remember to subscribe to our channel if you enjoyed this tutorial and want to stay updated on more helpful tips. Happy optimizing!

Links to tools

For reference on the size images have to be on your Divi website

• https://www.divithemeexamples.com/how-to-choose-the-right-divi-image-size-and-optimizations/
• https://divigallery.com/blog/ultimate-guide-to-divi-image-sizes/

For image resizing https://bulkresizephotos.com/en or

Free image program called Gimp https://www.gimp.org/

For image compression https://tinypng.com

For website speed checking https://gtmetrix.com (create an free account and in account settings enable legacy reports and default to legacy reports).