The Voux theme optimised

The Voux theme images optimised

The Voux is an excellent looking and very popular Premium WP magazine theme. However, it has one flaw: it doesn’t handle the images very well. If you are using The Voux theme, you might be getting a warning about serving scaled images when running GTmetrix report. Actually, I got couple of requests to fix The Voux theme through my earlier article where I showed you guys how to fix serve scaled images issue in ColorMag WP theme.

Fixing serve scaled images problem in The Voux theme

Luckily there is a simple solution to fix The Voux theme serve scaled images issue as well. Now that I solved it for one of my clients, I want to show you how to fix it on your own.

Your situation might be different, depending on the features you are using with The Voux theme. But the same principle could be recycled where you need it within the child theme.

I am going to show you how to fix archive pages (category, blog, author etc.) that are showing latest posts (including home page). These latest posts are pulling featured image which is served in size of 600×460 px. This is too much for the space available on wide devices (desktop).

I guess theme authors picked that size because the layout is different on devices up to 640px. In that case, featured image is in full width. It makes sense to serve 600px wide images on devices with a width in a range of 400px – 640px. However, this is not the best scenario for other devices.

Srcset image attribute comes to rescue here. Basically, we need to define two image sources for different screen sizes. In my earlier article, I showed you how to use srcset attribute. On the image below, you can see results from GTmetrix test – “Serve scaled images” is the only issue, but it is affecting overall score a lot.

The Voux theme speed score before optimization

The solution

So we need to find the code that is used to pull the article featured image in the size of 600×460 px and add another image source. But keep in mind we can’t modify the parent theme. We need to use The Voux WP Child Theme to protect ourselves from future updates. So how do we do all that? Piece of cake, just follow the steps below:

Step 1. Locating the file pulling the featured images on archive pages

In my case, file in question was style1.php located in inc/templates/loop/ folder of the parent theme. This file is included using the awesome WP function get_template_part(). Why is it awesome? Find out here. So we just need to copy the style1.php file to the child theme and replicate the same path to it. In that case, if The Voux Child Theme is activated (and it really should be!) WP will first look for that file in the child theme.

Step 2. Modifying style1.php file in child theme

Now when we have a copy of the file in the child theme, we need to modify it. We need to add srcset and sizes attributes to the img HTML tag. Easier said than done, as we are dealing with a template file, so we don’t actually know the images source URLs. We need to create two variables that will get the image URLs. Place this code underneath the following if statement: <?php if ( has_post_thumbnail() ) { ?> on line 5.

<?php
$bigger_featured = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thevoux-style1')[0];
$smaller_featured = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thevoux-blog-list')[0];
?>

We are declaring two variables. First one gets the value of the URL to the featured image in size thevoux-style1 which is 600×460 px. This size is what we had in the first place. Other variable is the more important one, we are storing the URL to the smaller version of the same featured image – 370×190 px.

Step 3. Adding two sources for the browser to choose the right one.

Now we have to create srcset attribute and declare when the browser should pull the right one using the sizes attribute. I used the following code, placed inside the anchor tag on line 12:

<img src="<?php echo $bigger_featured; ?>" sizes="(max-width: 400px) 370px, (max-width: 640px) 600px, 370px" srcset="<?php echo $smaller_featured; ?> 370w, <?php echo $bigger_featured; ?> 600w" />

For a detailed explanation on what’s going on there, I encourage you once again to check out this article if you haven’t already. We are telling the browser to use the 600px wide image while device width is less than 641px but wider than 400px at the same time. For bigger and smaller devices, the browser will download the smaller image.

The Voux theme speed score after optimisation

And that’s pretty much it, we improved the situation in three easy steps. As you can see on the image above, we don’t have the “Serve scaled images” issue anymore and the overall PagSpeed Score soared. One thing yo could also do is to modify the featured image container by reducing the number of columns it can span on the large device from six to five on line 4:

<div class="small-12 medium-5 large-5 columns">

And then increase the container for the excerpt to span over 7 columns on line 16 like this:

<div class="small-12 medium-7 large-7 columns">

Conclusion

That’s it guys, I showed you how to fix The Voux theme serve scaled images issue with these simple code snippets. It might not remove the problem completely for you, but it will improve the situation. Hope you find this article useful and if you do, please share with others. If it helped you optimize your site, please let me know in the comments below. There could be some extra stuff to fix in this theme (depending on the features you are using) and if you need further help, please use the contact form to send me an inquiry.

3 comments

    1. Hi Sandy, thanks for the feedback. You can use the code above, it should work if you followed the previous steps as well and if you are using the Voux theme

Leave a Reply

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