Have you ever used GT-Metrix to view your Web / Blog Page Score? Have you ever experienced Serve Scaled Image problem in the PageSpeed section of GT-Metrix?
In this article, I will show you how to solve the Serve Scaled Image problem easily.
If you have ever checked your Blog / Website page on the GT-Metrix, surely you have experienced a problem with the Serve Scaled Image which has a value below 50% or even has a value of 0.
In the past I was dizzy and confused to solve it, but after I did some experiments , finally the problem can be resolved easily.
Serve Scaled Image problems usually often occur on the Home Page (Homepage) on Blogs, especially on Thumbnails. This issue can occur because the image that is loaded the first time is too large.
You can solve this problem by changing the image resolution using Image Editor Software or with the help of JavaScript (Again JavaScript, but whatever power).
In the image below, I have an example of a low Score / Grade Serve Scaled Image (56%). Actually the overall score for the EL Creative Academy Blog is quite high, but as an example, I will show you how to improve (Even if it only increases by 1%).
In the picture above, you can see that I am using an image with a resolution of 680 x 453 , while what appears on the Homepage has a size of 100 x 100 .
The question : How do I change the resolution without using the Image Editor Software?
The answer is simple : you can change the resolution from 480 x 453 to 100 x 100 with the Image Editor, the problem is that the image can be cropped / cropped and the impact will look ugly in the Post section.
Well, the way to fix this can use JavaScript help:
Here is an example of the code:
<script type='text/javascript'>
//<![CDATA[
function snippetimage(a,e){var g=100,i=100;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"-p/")+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}
//]]>
</script>Replace the PURPLE number with the appropriate Thumbnail size on your Blog.
In the code above, I changed the Thumbnail to 100 (Pixels). You can put the code before the </body> tag .
Note : The script above does not work if you are using Lazy Load Image.