It’s a universal truth that website performance can be improved by serving a scaled image. High-quality images will deliver better site performance. But all kind of images needs to be scaled. That’s why website creators should know how to resize and serve scaled images with WordPress properly.
How to serve scaled images with WordPress?
Basically, scaled images have an accurate size which matches exactly with the size defined in HTML or CSS. Images on the websites have to be in proper size. They should be just right, not too large or not too little. Small or scaled up images become blurry. On the other hand, large size images will shrink down by the browser to the right size. It will add to the file size of the page, though it doesn’t affect the image looks.
If an image is bloated and oversized, it will take up a lot of file size space. To improve the page speed, images should be the number one on your list of things to optimize. Additionally, it will increase your conversions or sales. We will help you to learn how to properly size images in WordPress. In this post, we will try to show you how to improve your image optimization.
Advantages of serving scaled images
Properly sized images will definitely improve the performance of your site. It can save many bytes of data especially on tablets or mobile devices. A scaled image will be loaded faster than the unscaled image and reduce resource usage, as well as will take less space.
It will also improve your site’s ranking on Google and helps to boost SEO. Because website optimization tools always recommend serving scaled images to have a better score. You may need some image editor and FTP access before you begin this optimization.
Step 1- Analyze your website using GTmetrix
A popular website performance checking tools “GTmetrix” is the best recommendations for this step. This tool also specifies the exact image dimensions which should be used. If you can use this platform, you will get a list of images with their exact location and recommended values. A scaled image reduces the size of each image by more than 50% percent.
When your report is completed, look at your Page speed tab and click on “serve scaled images” pop up menu. Then it will be expanded and show you a list of images that needs to be scaled.
As you can witness, there is an image that is 2000×1095, but it is going to be scaled to 524×287. If we serve a more appropriate-sized image, you can reduce the file size significantly. You can note the image name and find where it’s being displayed on your website. The more images you have, the faster your images will load after scaling them.
Step 2- Find out the maximum display size
This step determines how large that image could potentially get. Possibly, every website is responsive in this new era. Now you must figure out what size the image needs to be served. Then resize your browser and take the note of “breakpoints” where your image resizes suddenly. It depends on which browser you use.
Keep doing this continuously before you see the largest size of the image is displayed, because most of the responsive themes have multiple breakpoints. Frequently saying, this is the highest size your image needs to be. Right-click on the image and click to the “Inspect” to find out precisely what pixel dimensions it is. Then the code of your image will be highlighted. You will see the sizes that it’s served at if you hover over the URL. This is the Natural size of your image.
The natural size declares the actual dimensions of the image. Your visitors or users are downloading this image. Note the first dimensions that you see here; you can say this the maximum display size. That’s how you can find out the maximum display size of the image.
Step 3- Resize or scale the image
In this step, you can use a photo editor just like Adobe Photoshop, GIMP, Paint, various online editor. Using these tools you can resize the photo dimensions down to the maximum display size. Depending on the type of graphic that you use, export your image for the web. We are discussing here about two basic types of graphic.
JPG: You should use JPG for photos, colorful and high detail images. In this image format, you can adjust the quality percentage; what you feel is acceptable.
PNG: Undoubtedly use PNG for logos and basic graphics with few transparency or colors. There are no quality adjustments to make in this format. Because it is a lossless format.
We can share you another way of resizing or scaling your images. So let’s proceed to the task. At first, you must download the photos to scale down your picture. You can easily download the images by using any FTP client. Then use an image editor like Photoshop, Paint or any other online tools to scale the images.
Storing the same file name on the images is also recommended. You need to only replace the old images without having to make any changes in the code or script in this way. The only thing left is to re-test the image, once the old images are replaced with the newly scaled items.
Step 4- Compress the image
You may need to run your images through a compression tool which is introduced by GTmetrix. Because image editors can’t do the best job of compressing images. Two of the most used tools for image compression are Kraken.io and Optimizilla. Normally Kraken.io offer their services for free. These tools have more advanced compression algorithms, and you can save even more space in file size.
It’s very easy to use these image compression tools. You have just to upload your uncompressed images and download the resulting optimized versions. After that, you should notice a substantial decrease in the file size.
You will get the size of the compressed image smaller than the original. If you think that it is not enough for you, then you can also use the optimized images which GTmetrix generates when expanding the “Optimize your images” menu.
Step 5- Replace the optimized image
After all the processing, your optimized image is now resized and compressed. Be sure, not to apply any CMS-level alterations to it. Now use “Full Size” instead of the pre-generated media sizes.
To maintain the optimization you did on the image, reinsert or replace your images at full size or original size. Now run another GTmetrix analysis on your page. If you can do the work properly, you will find that you now score better on “Serve scaled images” and “Optimize your images” recommendations.
Perfectly compressed and scaled images will soon disappear from these recommendations. To avoid 404 errors, make sure that the re-uploaded images have the same filename. This is one of the most important things that you should be attentive.
Important notes
- If your website is developed based on WordPress, then you should use Pilo! (great image optimization solution for WordPress). It not only compresses your images, but it also resizes them, serves them via CDN and adds lazy load.
It’s totally free for up to 1 GB of transfer per month and this is one of the best parts of this tool. It also works great for the majority of WordPress users who are looking to optimize their website images.
- If the image always follows your browser resizing, that means the image is likely within a container that has no maximum display size. It can happen even at a maximized screen. You can compress the image for file size savings and export at your best-perceived quality.
In this situation, this is the best thing you can do. You cannot address this issue unless you change your site design to have a maximum width. This kind of image may trigger the “Serve scaled images” recommendation.
- If the image does not change the size when you resize your browser, which means it’s already at its maximum display size. Note down of those dimensions and rescale your image as we say earlier.
- If you cannot find your image URL, then you have to be confirmed that it’s most likely a background image or the JavaScript is doing something with it. Check the CSS panel by using the “Inspect” function to see if your image was placed there via “background”.
Now use the “Inspect” tool to get details for your background images. To do this, click on the container where the image is displayed. Then take note of the container size on your screen. These are the dimensions that you will need when you rescale your image.
- You can choose 2x the maximum display size dimensions if you want to ensure maximum quality for the retina display. You can resize an image which has 400 x 200 maximum display size to an 800 x 400 size image.
- You may found “srcset” function along with a list of image URLs if you use a Word Press theme. Because the latest versions of Word Press automatically use “srcset” functions to deal with the overly scaled images. You don’t have to do anything here. Word Press theme will automatically deliver different-sized images at different screen resolutions.
We have discussed here how to serve scaled images with Word Press in this article. The best part to serve scaled images is that you don’t require any coding knowledge. On the other hand, it improves website performance and speed. As well as serving scaled images will highly reduce your resource usage.