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

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, 3 months ago by rignano. Reason: Typos

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 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.