elbajong

Right, that did the trick. Now then, time to poke around and experiment…

I’m afraid I don’t know how to do that, I don’t really “read” PHP, I’m an almost complete analphabet in that language :-/

If it helps, the only two places in the functions.php file where twentysixteen_content_image_sizes_attr is mentioned is in the two places seen in the piece of code I pasted above.

Would it help if I simply pasted the entire contents of the parent theme’s functions.php file here?

I already have a child theme, though its functions.php file is currently empty of any modifcations. I tried experimenting, by copying the entire piece of code I cite above into the child theme’s functions.php, and then playing around with it.

That, however, caused the entire page to crash. Then I tried pasting the code unchanged into the child theme’s functions.php, like what you see below. This also resulted in the entire thing crashing. I assume I’ve left some crucial symbol out which causes this, but I don’t know what it is, since I’ve simply copy pasted this from the parent theme’s functions.php.

<?php
/* Write your awesome functions below */

/**
 * Add custom image sizes attribute to enhance responsive image functionality
 * for content images
 *
 * @since Twenty Sixteen 1.0
 *
 * @param string $sizes A source size value for use in a 'sizes' attribute.
 * @param array  $size  Image size. Accepts an array of width and height
 *                      values in pixels (in that order).
 * @return string A source size value for use in a content image 'sizes' attribute.
 */
function twentysixteen_content_image_sizes_attr( $sizes, $size ) {
	$width = $size[0];

	840 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';

	if ( 'page' === get_post_type() ) {
		840 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
	} else {
		840 > $width && 600 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px';
		600 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
	}

	return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10 , 2 );

Here’s a screenshot, JPEG saved via Photoshop at quality setting 12. https://purremedia.no/wp-content/screenshot.jpg Note the artifacting where the blue sky meets the mountains.

Here’s the full size, lightly compressed version, as it should look: https://www.purremedia.no/wp-content/uploads/2016/06/IMG_1261.jpg

I’m currently seeing this on a 1366×768 screen. I also have an external monitor of 1920×1200, which I used to view the site two days ago. It didn’t look good on that monitor either, though I’m not sure if the stretching was better or worse.