How to Serve Scaled Images in WordPress

How to Serve Scaled Images in WordPress

Introduction

Images play a major role in making your site informative, user-friendly, and exciting. So, it is very important that your WordPress site Serve Scaled Images. The images you use on your site have to be sized properly according to the rules set by your active theme. After all, a picture says a thousand words.

If an image is too small, the browser will scale it up (i.e. make it bigger), and it will become blurry and unattractive. Likewise, if an image is too big, the browser will shrink it to the right size.

When an image shrinks, it will not affect how the image looks. But it will add to the file size of the page, and cause it to load sluggishly. Thus the efficient thing to do is to size images properly so that the browser doesn’t have to download and resize images.

In this tutorial, we’re going to explore what scaled images are and how you can serve scaled images on your WordPress site. Also, we will examine good WordPress plugins you can use for image optimization on your site.

Content

 

What does Serve Scaled Images Mean?

Why you need to use it

How to Serve

What does Serve Scaled Images Mean?

A scaled image is an image that is adjusted to match (scaled to) the exact size dimensions of images required for a site. So when you “serve scaled images”, you adjust these images to the right size before sending them to the browser.

A properly scaled image should not lose its qualities after resizing is done. This means the image will remain clear and sharp, but should only be smaller or larger as the case may be.

Here is Why you Need to do it

Serving scaled images on your website improves your site’s performance. Scaled images could save resources that would be used in image download as they do not take up a lot of space on your site. Because of this, your website becomes significantly faster.

Further, fast page loading time and minimal use of resources makes your site perform better in the most important ways.

Firstly, the speed of your site improves your SEO and helps you rank higher. This means more people will find your site.

Secondly, more people who find your site will stay longer and will return and reuse it. You see, internet users are a very impatient bunch. This means a slow loading site will cause many users to abandon your site. Conversely, a fast site is a pleasure to navigate, and you will see more users viewing multiple pages and coming back.

How to Serve Scaled Images

When you upload images to your WordPress site using the Add Media button, the images are added without shrinking the size. To serve properly sized images, you can either edit images manually or, you guessed right, use an image plugin. The plugins would optimize and serve scaled images on your site effortlessly.

Manually Scaling Images

Analyze your website

To manually scale images, you need to know which images need to be scaled, and the recommended dimension.

You can analyze the size of images you serve using site speed optimizer tools like GTMetrix or Google pagespeed insights. For this tutorial, we’re using GTMetrix because it displays the images that need to be scaled. More so, it recommends ideal image dimensions for the images.

      1. Go to GTmetrix .
      2. Type your site’s URL into the textbox provided.
      3. Click Test your site button.

GTMetrix site analyzer - Serve Scaled Images

Your website’s pagespeed result displays. Next, click on the Serve scaled images drop down button.

GTMetrix pagespeed result - Serve Scaled Images

A list of incorrectly sized images that needs to be scaled will display along with the dimensions. The recommended scale will display as well.

GTmetrix result - Serve Scaled Images

Locate and Resize images on WordPress site

Having done the analysis on your site, you now know the images you should resize, and the recommended size as well. The next step to take is to locate the target images on your site. And scale down the images as well.

Edit Images in the Media Library

On the admin area of your site, go to Media> Library> Select image

Click Edit Image

Edit an image in WP - Serve Scaled Images

The original dimension of the image displays.

      1. Input the new dimension for width.
      2. Do the same for height as well.

adding new width and height - Serve Scaled Images

Under Thumbnail Settings, choose where you’d like to apply your changes to. Click Save.

apply changes made on the images. - Serve Scaled Images

You can resize images while editing a recent post or a page on your site. Click the Add Media button, next click the Media Library tab. Choose an image from the library and click on the Edit Image link. You will then go through the same process as seen above to resize the image.

Edit Images in Paint

Open up the image you want to scale with Paint photo editor. You can use any other graphics design or image editor of your choice.

image selected for edit in paint - Serve Scaled Images

Click Resize under the Home tab

A popup box will appear. Next, select the Pixels radio button.

Edit the horizontal dimensions. So, if you check the Maintain aspect ratio box, then the vertical dimensions will resize automatically.

After making your adjustments, click OK.

Resize menu - Serve Scaled Images

Save your newly scaled image file in Paint, and name it accordingly. Then upload the new image to replace the original image on your WordPress site.

Serve Scaled images with WordPress Media Setting

You can edit images through WordPress Media settings on your site’s admin dashboard.

Default images sizes for WordPress images are Thumbnail size, Medium size, Large size. Large size dimensions in media settings are the dimension of which the images would be uploaded to the site. You cannot make changes for these kinds of images in the Media settings.

To resize the other default image sizes, go to Settings > Media.

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

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

Click Save Changes.

WordPress media settings - Serve Scaled Images

WordPress Plugins to Serve Scaled Images

WordPress plugins for image optimization makes serving scaled images effortless. We will review three popular WordPress plugins you can use on your site.

Smush Image Optimization

Smush - Serve Scaled Images

Smush Image Optimization, Compression, and Lazy Load plugin compresses any image in your site’s directory and preserves its quality as well.

To use this wp smush plugin, first install and activate it. The Smush icon will appear on your dashboard.

WordPress smush - Serve Scaled Images

Go to Smush > Dashboard.

The Bulk Smush feature of the plugin immediately analyzes your site and detects images that should be optimized. Click BULK SMUSH NOW to automatically optimize the detected images.

optimize bulk images

In order to set the plugin for further/continuous image optimization, scroll down to the “Settings” section .

Leave Image Sizes set to All and enable Automatic Compression.

Every image upload on WordPress sites have some information that accompanies it called the Metadata. Smush gives the option of stripping images of this information. Enable the Strip my image metadata feature to remove metadata information on your site.

stripping an image of metadata with wp smush plugin

Next, enable Image Resizing and set the max width and height values for images on your site as you wish.

image resizing with wp smush plugin

Click the SAVE CHANGES button.

Smush image optimization will automatically scale the images on your site to your site’s specification.

EWWW Image Optimizer

EWWW Image Optimizer plugin

The EWWW Image Optimizer is a WordPress plugin that optimizes images on your site, including new uploads and existing images to the best file format. The bulk scanner feature optimizes all the images on the site. To use this plugin, Install and activate it from the admin area of your WordPress site.

Still on your dashboard, click on Settings>EWWW Image Optimizer.

EWWW Image Optimizer on wp dashboard

On the Basic settings page, check Remove Metadata to strip images of metadata. Set optimization level for JPG, PNG, and GIF picture formats to Pixel Perfect. The plugin’s free version doesn’t have the option to set PDF optimization level.

EWWW optimization level for JPG, PNG, and GIF

Next switch to the Resize tab.

Check the Resize Detection option.

In Resize Images, set the max width and height permitted for images on your site.

Below this, enable Resize Other Images and Resize Existing Images.

image resize options in EWWW

You may decide to disable image resizing for certain kinds of images, e.g. thumbnails. To achieve this, check the boxes as appropriate.

Remember to Save Changes.

save image settings made with EWWW

EWWW Image Optimizer will resize all the image uploads on your site.

Imagify Image Optimizer – Serve Scaled Images

Imagify Image Optimizer

Imagify – WebP & Image Compression and Optimization plugin resizes your images using lossless compression. Images get scaled without losing their quality.

After enabling the plugin on your site, it optimizes all the images at the point of upload into WordPress. Including thumbnails as well.

To use this plugin, install and activate it from within your WordPress admin area. After activation, and still on your dashboard, click on Settings>Imagify.

Imagify settings on wp dashboard

On the Imagify settings pages, enter your API key in the text box available. You can create a free API key if you do not have already.

Click on the CREATE A FREE API KEY button.

create API key with Imagify

You will be prompted to enter your email address and will be directed to check your email for your free API key.

successful account creation with API key

Copy the API key you received from your email, and paste it in the API key textbox.

Enter API KEY in Imagify settings

You will receive a congratulatory message of the validity of your API key. Click OK to continue with the plugin’s settings.

successful API key creation

The general settings page indicates three optimization levels that the plugin offers. The normal, aggressive, and ultra levels. Choose the level of your choice. We chose the aggressive level for this tutorial.

Check the options as you deem fit for proper resizing of images on your site.

Aggressive Imagify settings

On the Optimization page, the media library section, you may check Create webp versions of images.

Also, check the Resize larger images box to resize larger images in your media library.

Place your cursor on either the upper or lower arrow image width. Continue to click until you get to the value you want your large images to resize to.

Imagify image dimension settings

For Files optimization, check the available options that you want to be optimized (usually all).

check image size for optimization on Imagify

To access the plugin menu from your toolbar, you need to check the box to be able to enjoy this feature. Next, click the SAVE CHANGES button. Or you could click the SAVE & GO TO BULK OPTIMIZER button.

save image settings on Imagify

That’s it. The plugin will begin to optimize images in your media library, as well as fresh image uploads on your site.

Conclusion

We have shared the different ways to serve scaled images in WordPress. You can analyze the scale of images on your site, and manually adjust them to meet the site requirements. Or you can engage WordPress plugins to resize or scale images for your site without effort.

Using this guide, please go on to select an image scaling option for your site. The benefits of serving scaled images would be good gains in site speed, SEO, user experience, and your overall website performance.

Also, if you found this article helpful, kindly share it.

More Resources: