Image resolution too high on home page ‘thumbnails’ – Illustratr

Ok, think I am getting somewhere with this problem. Basically, the image served by srcset works fine when you have an image taking up the full width of the site. But on the homepage, images are not taking up the full width of the site (on a desktop you are likely to get three columns, each column taking up about a third of the total site width).

The problem seems to be with the following which appears in the tag of each image:

sizes=”(max-width: 800px) 100vw, 800px”

I don’t think this is letting the browser know that at certain resolutions the images will be split into columns and not appear full width. Therefore, srcset is always getting the larger version of the files.

If I change it to:

sizes=”(min-width: 800px) 33vw, 800px”

then the browser is basically being told, ‘once the screen size is over 800px then the images will probably only take up a third of the usual size’. This seems to work, and you get a much more appropriate image resolution served.

Now I just need to figure out how I can get this changed for each portfolio image on the home page. I can change media.php in wp-includes but then it changes it for every image.

Ok, just to confirm, I’ve changed:

// Setup the default ‘sizes’ attribute.
$sizes = sprintf( ‘(max-width: %1$dpx) 100vw, %1$dpx’, $width );

to:

// Setup the default ‘sizes’ attribute.
$sizes = sprintf( ‘(max-width: %1$dpx) 100vw, 25vw, %1$dpx’, $width );

in media.php and this nearly halved the speed of my homepage loading and had no noticeable effect on image quality. This is a bit of a hack as I’m not sure what I’m doing, but thought some people might find this a useful starting point.

• This reply was modified 7 years, 11 months ago by rignano. Reason: Typos

After a bit further investigation it seems that the proper solution is to amend the theme’s functions.php file and add in a wp_calculate_image_sizes() function to basically set it so that when the portfolio-page template is used that the maximum-width of the images changes depending on the width of the screen (and therefore the number of columns).

I’ve tried several times but I just can’t seem to get it working.

Just thought I would mark this as solved as I did manage to sort out the issue. I added the following to functions.php

function illustratr_content_image_sizes_attr($sizes, $size) {
    $width = $size[0];
    //Portfolio thumbnail pages
    if (is_page_template('page-templates/portfolio-page.php')) {
       	return '(max-width: 767px) 767px, (max-width: 959px) 480px, 340px';
    }
    //Regular pages
    return '(max-width: ' . $width . 'px) 100vw, ' . $width . 'px';
}
add_filter('wp_calculate_image_sizes', 'illustratr_content_image_sizes_attr', 10 , 2);

This tells the browser what size images will be needed on the homepage depending on the size of the viewport.

However, I did run in to some other issues with images occasionally not displaying correctly in Microsoft Edge until the page is refreshed. Apparently this seems to be a common issue with Edge and srcset, so I’ve now disabled responsive images in WordPress and the theme seems to run better now in Edge. Microsoft are working on a fix apparently.

Hi Rignano, thanks for posting this fix.

I am setting up a new site and like the Illustratr theme for it, but I have noticed that the portfolio page is very slow to load, even with only a few images, and I want the site to have a lot more. The site I am just trying things out at is here: https://demo2.barmouthwales.uk/

I’m not confident adding things to the functions.php but would cautiously try it out, except I am not sure what this code is doing and where exactly to add it. Does it need to be in a specific place? But also my understanding is that if you edit any of the theme files and then if the theme is updated any modifications you make will be lost. So for that reason you need a child theme, but setting that up always seems too complex to me.

Surely it must be something anyone using the theme in this way will experience, so isn’t it in that sense a bug to report to the developers? A bug because the theme is not working in a good way in relation to how it is managing the thumbnail images for the portfolio page.

Hi Karen. Your site is looking good.

I turned off responsive images and tweaked some of the portfolio files to load lower res thumbnails and think it is working a bit better now. Also, I’ve installed an image compressing plug-in to knock a few more bytes off my images. I think this template was created before WordPress had responsive images. I also don’t think it was designed for the homepage to display loads of thumbnails, so I think it will need a bit of tweaking if this is needed, or perhaps using a different theme. I’ve also found out that there doesn’t seem to be a way to set up the homepage for infinite scrolling (so it loads more thumbnails when you reach the bottom of the page).

As for amending functions.php, make a backup version of the file so u can revert it if needed. All the changes I’ve made just involved adding code to the end of the file, rather than changing existing code, so if something doesn’t work I just delete it. I’m pretty new to this myself (more familiar with Joomla).

Yeah, making a child theme is the best way to make amendments to the theme so you don’t risk loosing them when the theme gets updated. However, I’ve not made too many amendments, so I just made a note of what I’ve changed (rather than create a child theme) so I should be able to redo them again when the theme gets updated.

Good luck with the site.