How To Serve Scaled Images (Properly Sized Images) In WordPress

Pictures could make your blog post wonderful, and we all know that, but some pics could create problems for your site in terms of speed.

If a pic that you have uploaded is too small, then the browser will scale it up (make it big) and it will decrease the quality of the pictures, and if the pic is too large then the browser will do the opposite, it will shrink the pic as per the screen dimension.

Also, the pic will lose its value. That’s why it becomes so important to properly serve scaled images.

In this tutorial, we gonna look at the most reliable ways to serve scaled images. The tutorial will be a step-by-step process so that you won’t face any issues while following.

Plugin Method

Fixing scaled images issue with plugins is the easiest way. I’ve found 5 plugins that can help you do that. These plugins offer both free and paid services. So, let’s begin the list and learn more!

1: Optimole Plugin

Adavntages of Optimole

  • Compresses images without comprising quality.
  • Easy to use
  • Retina and WebP images Supported
  • Serves images from a global CDN for free
  • Optimizes based on the visitor’s actual device (Scaled Images)
  • Lazy load without jQuery
  • Supports Elementor

Disadvantages Of Optimole

  • Free up to 5k visits only
  • Some limitations are there

How To Use Optimole To Optimize Images

  • Register

Once you install the plugin. You’ll have to sign up to get the API key (the plugin won’t work without the API Key). It is really simple, just enter your email and Optimole will send the API Key.

  • Copy The API Key, Paste It, And Click On Connect Optimole Service

Open your mail, find the mail from Optimole, and copy the API Key.

Paste the Key and hit the connect button.

Wait for some time.

  • Look for the green signal

Once optimole finishes optimizing your images, it should show a green connected button at the top.

I don’t think you’ll have too much difficulty while setting up this plugin. However, if you’re having any trouble or want to set up extra, then you can let me know in the comments or mail me.

2: Smush

Advantages Of Smush

  • Lossless Compression – Lossless compression is a great feature, it means that as the file size is compressed, the picture quality stays the same – it does not get worse.
  • Lazy Load – Lazy loading is awesome for long web pages with some heavyweight content (like images, gifs, embeds, and videos) that are not important to the user experience on the first load. Using lazy loading for your site content has many potential advantages: It helps your website load faster.
  • No Traffic Limitation – Optimole has a limitation of 5k visits but with Smush, you dont have to worry about it.
  • Image Resizing (Serve Scaled Images) – Smush allows you to set a max-width and height and large images will scale down as they are being compressed.
  • Automated Optimization – Asynchronously auto-smush your attachments for faster compression on upload.

Disadvantages Of Smush

  • Bulk Optimization Limitation – With Smush free version you can only bulk optimize 50 pics which could be frustrating for people with thousands of images.
  • Heavy Plugin – Smush could increase the pressure on your site’s server, especially if you are on shared servers.
  • No Free CDN Use – You have to upgrade the plan to connect a CDN with Smush
  • Forces to upgrade – You may see many banners or suggestions about updating Smush.

How To Use Smush To Serve Scaled Images

  • Go To Settings

After installation, go to the settings section of Smush. You’ll see a pop-up with a line Preset configurations are here! Click on Awesome, Let’s Go!

  • Go To Bulk Smush

In the Bulk Smush section, you’ll be able to see how many images are there to compress. Hit the BULK SMUSH NOW button to begin optimizing them. Note: only 50 images can be optimized at once with the free version of Smush.

  • Enable Image Resizing (Serve Scaled Images By Enabling It)

Scroll down a bit and you’ll find the Image Resizing Feature. Enable to fix serve scaled images.

I’ve set max-width to 1024 and max-height to 1024 as well, but yours could be different.

Note: Smush can’t resize Gifs as they will lose their animation, so smush has suggested using a tool such as http://gifgifs.com/resizer/ to resize then re-upload.

Click on Save Changes once you’ve followed everything shown above.

EWWW Image Optimizer

Ewww plugin is not as popular as SMush and Optimole but it does the job quite efficiently. I like this plugin cause it is lightweight and easy to use. According to the developer, this plugin helps you make your site faster, reduces your bounce rate, and boosts your SEO.

Advantages of Ewww Image Optimizer

  • It can compress big files – You can read more about it here.
  • Smooth Handling- Ewww image optimizer uses industries to notch tools to give smooth experience and pixel-perfect optimization.
  • High Torque – Ewww plugin promises to bring the best compression/quality ratio.
  • Bulk Optimization Available – This plugin is absolutely awesome. It lets you compress or scale every image present on your site with one click.
  • Everything Automatic – With Easy IO, images are automatically compressed, scaled to match the page and device size, lazy-loaded, and turned to the next-gen WebP format.

Disadvantages Of Ewww Image Optimizer

  • No disadvantages!

How To Use EWWW Image Optimizer

  • Go to the settings

When you’ll go to the settings section of Ewww image optimizer, Ewww will ask you to select the goals of your site. Select everything but only select “Activate 5x more optimization and priority support” if you wanna use a paid version or premium version of this plugin.

Currently, I am using its free version, but if you want, you can upgrade the plan at any time. The plan starts from 7 dollars a month which is very affordable.

Click on the Next button.

  • Set up More

Now, select Remove Metadata, Lazy Load, Embedded Help. And, set up the Max width and height.

Only select WebP if you’re about to use the paid version because it can increase server load.

Do not enable Anonymous Reporting, it may increase server load as it sends reports to the developer about how the plugin behaves. However, turn it on if you wanna make this plugin better in the future because these kinds of data help the developer to make the plugin even better.

  • Open Bulk Optimizer

A new page will open after saving the settings. Open Bulk Optimization to optimize images that are not optimized. Also, now Ewww will take care of the future pics. It will optimize every pic without your need.

  • Click On Scan For Unoptimized Images

Click on Unoptimized Images, Ewww the Image optimizer will begin finding those images that are not optimized. Once Ewww finishes finding those pics that aren’t optimized, click on optimize to optimize them.

Note: you may see a lot of images ready to get optimized. It is because WordPress forms 4-6 resizes by default for every image you upload to your blog.

Your theme, or other plugins you have installed, may add extra sizes to be created for each upload. So while you might look at the Media Library and think you only have 500 images, it is likely that you have at least 5,000.

Wait for sometimes and please don’t stop optimization the process.

Btw, I am not going into detail on how to set it up completely. In the future, I’ll publish a post on how to set up an Ewww Image optimizer plugin properly.

ShortPixels Image Optimizer

Shortpixels is a very effective plugin in fixing scale images problem. Also, it is a lightweight plugin so it won’t consume too many server resources.

I definitely recommend this plugin to those who are willing to spend a few bucks on speed optimization.

Advantages of ShortPixels

  • Compresses JPG, PNG, GIF (still or animated) images, and also PDF documents.
  • Can help you in converting JPG PNG or GIF (even animated ones!) to WebP and AVIF (a very effective way to improve site speed).
  • Option to automatically turn PNG to JPG if that will result in smaller images. Ideal for large images in PNG format.
  • Let’s test lossy/glossy/lossless versions of the images with a single click in your Media Library. It is a really unique feature.
  • It uses progressive JPEG for larger images to speed up the image display.
  • It works great for eCommerce websites using WooCommerce and other plugins

Disadvantages Of ShortPixels

  • Limited features of free users.

How To Use ShortPiexls Image Optimizer To Serve Scaled Images

  • Go to the settings

Once the plugin is installed, go to the settings section to change a few things.

ShortPixels will ask you to enter your email address to receive an API key. Enter the email address.

Once you have the API key simply paste it and click Validate.

If the validation is successful, you’ll see a new page where you can set up ShortPielxs according to your need.

Select Lossy image compression as it works really well for most sites because it offers the biggest reduction in data and with the least effect on image quality. For sites that preference visual integrity more than average, glossy is the best option.

Also, you can test the difference between Lossy, Glossy, and Lossless image compression here.

Click on save changes.

  • Advance Settings
  • Cloudflare Integration

ShortPiexels lets you connect to Cloudflare which is rare to see. Most plugins suggest purchasing premium CDN, but it’s not the case with ShortPixels which is a positive point about it.

Connecting Cloudflare with ShortPixels is really easy. You need to enter your Cloudflare account and find Zone ID and Global API Key.

The Zone ID is present in the overview section of Cloudflare. Copy it!

To find the Global API Key, you need to click Get Your API Token (It is visible under Account ID)

Under API Keys, Global API Key is available. Click View to view the API Key and copy it once it’s visible.

Paste both Zone ID and Global API Key in the CDN section of ShortPixels, enter your Cloudflare email and click on save changes.

Here is a video that I found very helpful:

All done!

Imagify – Optimize your Images & Convert WebP

Imagify is specially dedicated to optimizing images. It can easily improve the site speed score in the page speed insight once it’s running.

Advantages Of Imagify

  • Compresses the image without affecting the quality at all!
  • Aggressive lossy compression feature – According to Imagify, it is a stronger compression with a tiny loss of quality most of the time this is not even noticeable at all.
  • Ultra Compression – The strongest compression method using a lossy algorithm.

Disadvantages Of Imagify

  • Only free for 20MB of images (about 200 images) every month.
  • Forces to buy the premium version.
  • Not good for small bloggers

How To Set Up Imagify

  • Sign up to Imagify

The signup process is pretty simple. The option will be visible on your WordPress dashboard once the installation is done.

Check your mail to get the API keys

Click on I have my API key to enter the API key you copied.

Click on connect me!

  • Go to the settings

Check Out More Tutorials!

12 Plugins To Make Your WordPress Site Faster Than Yesterday

How To Clean WordPress Database In Less Than 2 Minutes

W3 Total Cache Settings For Beginners (Cloudflare + BunnyCDN)

Manually Scaling Images

Scaling images manually can be really effective way, however, it consumes a lot more time compared to the plugin method. But, it can also eliminate the requirement of installing a plugin.

Find the unoptimized images

To find out the images that are creating this issue, you can visit GTmatrix.com, it’s a really good tool that will let you know about images that need to be scaled.

Google page speed insight can also give you info about unscaled images, but for this tutorial, I am using Gtmatrix.

  • Run A Site Check

Enter your site’s URL and click Test your site.

Once the test is completed, you’ll see your site’s score out of 100. More than 90 is considered to be good.

  • Click On Structure

Now, find “Properly Sized Images” and click on it.

Under properly sized images, you’ll be able to see the images that are causing these issues.

Click on the image link, you’ll see a noticeable difference in size. It tells that the image needs to be scaled. By comparing the two differences of your images side-by-side, you can see how large the image really is (and why the page it’s on maybe loading late).

Resize the image

Now you know which image needs to be scaled, it’s time to resize it. I use an online tool called, simpleimageresizer.com, a very easy-to-use tool. Highly recommended if you’re about to manually resize the images.

  • Change the old image with the new one

In my case, my logo was not optimized, so I went to my dashboard, clicked on customize, and changed the logo to the new optimized one.

In your case, the image location could be different but the process would be the same.

Properly Size Images With WordPress Setting

There is also a really cool hake that doesn’t require any plugin help. WordPress allows users to fix some images sizes. Default images sizes for WordPress images are Thumbnail, Medium, and Large size.

Note: Large size dimensions in media settings are the dimension of which the images would be uploaded to the website. You can’t make changes for these kinds of pictures in the Media settings.

To resize another default image size, go to Settings > Media.

Put the maximum width and max height you need for the image size category you want to modify. Set these values in the corresponding fields as applicable.

To change the thumbnail size, check the box below the thumbnail section. Following, specify the dimensions you want. The thumbnails would be edited proportionally.

Click Save Changes.

It’s A Wrap!

Images tell a lot of stories, it not only engages the user more but it also plays a big role in improving your earnings. However, some images take too much cellular data unnecessarily. To fix this, we need some plugins like Ewww, Smush, and Optimole.

However, it is possible to fix the issue without installing any plugins. But manually doing it could take too much time. In this post, I’ve shown you some of the best methods and I hope this post helped you somehow.

Thanks for reading!

Check Out More Tutorials!

WP Super Cache Ideal Settings With Screenshots (Updated Version)

How To Set Up Hummingbird Plugin Step By Step: Quick Tutorial

Autoptimize Plugin Ideal Settings – Step By Step (CDN Tutorial)

Sumit
Sumit

Sumit is a regular contributor to Hostinggrow.com. He has 6 years of experience in blogging, and he loves football, his favorite player is - Lionel Messi (GOAT), but he has no hate for Ronaldo.

Articles: 54

Leave a Reply

Your email address will not be published. Required fields are marked *