Serve scaled images

Customize ColorMag WordPress theme – solve serve scaled images problem

In this article I will show you how to solve serve scaled images problem with ColorMag theme. I recently decided to change the theme for my fantasy Premier League blog. I installed the beautiful ColorMag theme by ThemeGrill. This is a very well developed WP theme, but no theme is 100% perfect.

This is why some changes and tweaks are necessary to make it better.

Serving (un)scaled images on category (archive) pages problem

OK, so I decided to show latest posts on my homepage. When I performed GTmetrix test I got the “Serve scaled images warning“. It is because first post excerpt has the large featured image (800×445 px). Other post excerpts below have much smaller featured images.

Served scaled images ColorMag problem

The problem

So why is this a problem? Here’s the quote from GTmetrix page:

Serving appropriately-sized images can save many bytes of data and improve the performance of your webpage, especially on low-powered (eg. mobile) devices.

Source: GTmetrix

Considering that page load time is a ranking factor, there is a SEO motive to solve the problem.

I checked under the hood and realized that the_post_thumbnail function gets the colormag-featured-image argument.

This is an image size set in ColorMag functions.php file and it is, you guessed it, 800px wide and 445 px high.

This essentially means that the latest post excerpt gets the image of an appropriate size, but all of the other post excerpts get the inadequate sized image. Now browser has to scale images and this is what triggers “Serve scaled images” issue in GTmetrix performance report.

The solution

So what is the solution to this SEO problem in ColorMag theme? Obviously, you can change the layout with some CSS magic. You can set all of the excerpts to be identical to the first one.

This, however, is not a good solution. You would avoid images scaling issue, but you would compromise the looks of the homepage. On top of that, you would still have a “heavy” homepage (or category page) with ten large images downloaded.

I figured out the answer on how to keep the design of the homepage intact and solve the scaling images issue in the same time. If you take a look at the ColorMag functions.php, you’ll see that 4 image sizes have been added.


add_image_size( 'colormag-highlighted-post', 392, 272, true );
add_image_size( 'colormag-featured-post-medium', 390, 205, true );
add_image_size( 'colormag-featured-post-small', 130, 90, true );
add_image_size( 'colormag-featured-image', 800, 445, true );

colormag-featured-image size is used and it is causing problems, but what if wee keep that size for the latest post excerpt and use colormag-featured-post-medium size for all the rest post excerpts?

Open up your child theme’s content.php file that you copied from the parent theme.

Find the following block of code:


<?php if ( has_post_thumbnail() ) { ?>
<div class="featured-image">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'colormag-featured-image' ); ?></a>
</div>
<?php } ?>

Replace it with this modified code:


<?php if ($wp_query->current_post == 0){ ?>
<?php if ( has_post_thumbnail() ) { ?>
<div class="featured-image">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'colormag-featured-image' ); ?></a>
<?php } ?>
</div>
<?php }
else{ ?>
<?php if ( has_post_thumbnail() ) { ?>
<div class="featured-image">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'colormag-featured-post-medium' ); ?></a>
<?php } ?>
</div>
<?php } ?>

So what does this block of code do? We are using the if-else statement to figure out if the current post in the loop has the index of 0. The first post has the index of 0 and we tell the WordPress to set the colormag-featured-image image size. In all other cases (else) we are calling the colormag-featured-post-medium image size.

This is it. Now run your GTmetrix report again 🙂

Solved - serve scaled images

The above screen shot shows that this solution increased the PageSpeed Score and decreased the Total Page Size.

If you have an alternative solution to the issue I addressed above, please do share in the comments. Also please be social and share this tip if you find it useful.

Information: I solved the same issue for The Voux theme as well. Read more about it here.

Attention

Please be aware that this solution won’t work on the old posts published before you switched to the ColorMag theme. If this is the case you will have to re-upload the old images in order for this to take effect. Same goes if you decide to create your own image size.

Further reading for fully optimizing images on the web

Check out these two articles on similar topics, to fully optimize images on the web and improve UX:

Why WP Smush is not best free image optimization plugin and which one to use

Responsive images with srcset and sizes attributes vs picture element

24 comments

  1. Hello,
    Thanks for great guide! I tried the trick and it almost worked. I made child theme, copied content.php and everything was working as before. But once I used your code in content.php the images were scaled properly which is great, but then I had only one column of those medium-sized posts. Any idea how to fix that?

    See the screenshot:
    https://s4.postimg.org/5ibiepo19/scaling1.png

    I have disabled all plugins, used clean ColorMag theme and created new posts to eliminate all incompatibilities. Would you be able to send zipped colormag-child folder so I can compare if there are any differences?

    1. Hi Wojciech, sorry I couldn’t reply sooner, but I am glad hat you figured it out 🙂
      Anyway, I will look to update this post with new customizations, so if you find some more things that could be done to improve the theme, let me know 😉

      Regards

  2. is this trick working for all the themes or only for yours ?
    I have SwiftIdeas theme and I’ve the same “serve scale image” on GTmetrix …

    Thanks

    1. Hi Alex, this trick is kind of a theme specific, but if your theme has a similar setup like the Colormag, it might work on your theme as well with additional tweaks. Please send me a link to your site or let me know which theme are you using through the contact form here https://learnedia.com/contact/ and maybe I’ll be able to assist you.

  3. seems like my problem is still unresolved. But I think this is still a pretty good way to fix this. Thank you for the article

    1. Hi Nguyen, thanks for your comment. It didn’t help you at all? Are you also using ColorMag theme? Do let me know if you need some help. Regards

    1. Hello Ciro,
      yes I’ve seen The Voux theme demo, and they have a similar problem with images there as well. As it is a premiun theme, you might be able to get support from the theme authors. Otherwise, you could maybe try to apply the solution I provided in this article. Check out the template and try to force pulling of the appropriate size images. Serving a scaled images does improve te UX so it should be solved. If you are struggling to fix it, contact me with the details through this form here https://learnedia.com/contact/
      Regards

  4. Hi there,
    I wish someone would write the solution for Divi theme.
    I have tried quite long to follow your instructions but without any luck.

    Regards,
    Iztok

  5. Hi,
    I don’t have experience with Think up themes, but I suppose it could work with some tweaks. Please drop me a link to your site through contact form so I can take a look

    1. Hello Jenny, I think your problem might be easier to fix, but yes, similar solution could apply. You could also manually resize some images, the one in the sidebar for example

  6. Hi Learnrr,

    I’ve only just recently had this problem since February 9th, before that I wasn’t receiving the problem and I had a GTMetrix score of 92 and the scaled image was 100, A! But now its an F.

    I am using woocommerce so every image is auto optimized to scale down according to whether its a thumbnail, part of the product gallery, etc. Now when I manually scaled one to test, it was OK but when I clicked on the product and went on the gallery, it was disproportioned in relation to the other images.

    I am using BeTheme, a developer installed it for me.

    https://al-nura.com

    Thanks

    1. Hi Lynn, thanks for the comment. I am not sure, I would have to take a look. Could you send me a link through the contact form. There’s often problem with images in WooCommerce based themes, maybe you have the same issue

  7. Hello, I checked the demo for that theme, it looks good, no “serve scaled images” issue there, could you send me the link to your site via contact form so I can take a look whats going on there. Thanks

  8. Hi, I am using another theme (Pressive Theme from Thrive Themes), and expericiencing the exact served scale image problems.

    Does your method work for other themes ? If not, I’d like to get some advice from you

    Regards

    1. Hello, I’ve seen the Pressive theme demo and it has “serve scaled scaled images” issue on GTmetrix report but it’s not the same problem I solved in this article. Further more, your setup might be different from that demo, so please send me your site URL via contact form and I will take a look what’s going on.

Leave a Reply

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