Are you looking to serve scaled images on your WordPress site?
Beginners often slow down their websites by uploading images without paying attention to their size. Serving images that have the correct dimensions will improve your WordPress performance without reducing quality.
In this article, we’ll show you how to easily serve scaled images in WordPress.
Why Serve Scaled Images in WordPress?
On your WordPress website, you’ll need images for your blog posts, thumbnails, page headers, cover images, and more.
Depending on your theme, these images will occupy a certain number of pixels. For example, your featured image might occupy 680×382 pixels, and a thumbnail 100×100 pixels.
It is important to use images that have been scaled to fit the correct dimensions needed for your site. For example, if your featured images occupy 680×382 pixels, then you should save them at exactly that size.
Otherwise, your site can be slowed down or the quality of the user’s experience will be lowered. Here are a few of the common reasons for this:
- Your visitors will have to download larger files than necessary, increasing load times.
- If you use images with fewer pixels than the space allowed, then they will look blurry when displayed at a larger size.
- Your website will have to change the image sizes on the fly, which means it has to run more processes before it can show the content to users
Regardless, it will give your users a bad experience and may also have a negative impact on your image SEO.
That’s why if you test your website performance using GTMetrix scan, it will often recommend that you serve scaled images to speed up your website.
With that being said, let’s take a look at how to easily serve scaled images in WordPress. We’ll cover two methods:
Method 1: Serving Scaled Images With a Plugin
The simplest way to serve images scaled is to use a plugin that automatically displays your website images at the correct size. This method is the easiest but doesn’t allow as much flexibility as the second method.
The free Optimole plugin is one of the best WordPress image compression plugins and will automatically scale your images. However, if you get over 5,000 visitors per month, then you’ll need the premium version.
First, you need to install and activate the Optimole plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you will be automatically taken to the Media » Optimole page and asked to sign up for an API key or enter your existing API key. This is very easy.
Simply make sure that your email address is correct, then click the ‘Create & connect your account’ button. The connection to Optimole will then happen automatically. You won’t even need to visit another website or manually paste the key.
Optimole will now start to optimize your images in the background. It will automatically choose the correct image size for each visitor’s device and browser, and the images will be served from the fast Optimole Cloud Service CDN.
When you click on the Settings tab, you will see that the images in your posts and pages will be automatically replaced with those optimized and scaled by Optimole.
This isn’t done on the fly because it’s through a CDN, meaning your site will not take a performance hit.
Also, the plugin has enabled lazy load, which means that images on the page that are not currently visible won’t be loaded until they are needed. This is another effective way to reduce page load time and improve website performance.
These settings will work well for most websites. However, you can customize Optimole further using the settings on the ‘Advanced’ menu to see what works best for your website.
If you make any changes to the settings, then don’t forget to click the ‘Save changes’ button at the bottom of the page.
Method 2: Serving Scaled Images Manually
You can also scale images without a plugin. There are three ways to do this: you can use the image editing software, the image editing feature in the WordPress Media Library, or by changing the values in the WordPress Media Settings.
Scaling Images With Image Editing Software
You can scale your images to the right dimensions before you upload them to your website by using photo editing software on your computer, such as Adobe Photoshop or Affinity Photo.
The software allows you to choose the correct number of pixels for your image and save it with a small file size and the file format you prefer.
For example, here’s a screenshot demonstrating Affinity Photo’s crop tool.
Besides getting the image size right from the beginning, there are other things you can do before you upload your images to make sure they don’t slow down your website.
For more information, see our guide on how to optimize images for web performance.
Scaling Images in the WordPress Media Library
Did you know that you can do basic image editing in WordPress? The WordPress ‘edit image’ feature allows you to crop, rotate, flip, and scale images.
When editing a post or page, you need to click on the image you wish to edit. Next, you should click the ‘Replace’ button and then select ‘Open Media Library’ from the menu.
This will open the WordPress Media Library with the image selected.
On the right is an area where you can add alt text, a title, a caption, and a description for your image. You will also find an ‘Edit Image’ link.
Just click that link to be taken to the ‘Edit image’ page.
Here you’ll find a preview of the image, editing buttons, and several other options that are useful when scaling or cropping the image.
To scale the image, simply change one of the ‘New dimensions’ values under Scale Image on the right.
For example, this image has a very large resolution of 2560×1637 pixels. We can reduce it to a width of 1200 pixels by typing in the first ‘Scale Image’ field.
All you have to change is the Width because the image’s height value will be changed change automatically to keep the image in proportion.
After that, just click the ‘Scale’ button to change the resolution of the image.
Note that you can only scale an image down in WordPress. You cannot make images larger by increasing the image dimensions.
For detailed instructions, see our guides on how to do basic image editing in WordPress and how to crop and edit WordPress post thumbnails.
Adjusting Image Sizes in Media Settings
When you upload images to your website, WordPress automatically creates several copies in different sizes. You can customize these sizes by visiting the Settings » Media page in your WordPress admin area.
Here, you can easily change the dimensions for thumbnail, medium, and large image sizes.
On some websites, you may need more image sizes than just thumbnail, medium, and large. You can learn how to create these sizes by following our guide on how to create additional image sizes in WordPress.
If you change the default image sizes or create additional image sizes, then only new images will be affected. You need to regenerate the image sizes for existing images.
When you add an image to a post or page, you can select an image size in the block settings on the left of the page.
We hope this tutorial helped you learn how to serve scaled images in WordPress. You may also want to learn how to create a landing page or check out our list of social media plugins for WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
The post How to Easily Serve Scaled Images in WordPress (Step by Step) first appeared on WPBeginner.
