Site Accelerator upscaling images

Hi –

Do the images from the sports site act differently if you use a default WordPress theme like Twenty Twenty? I would also disable all your other plugins so you can rule those out as being interference.

Good call! I used the Twenty-Twenty theme and the image did display correctly – the size was 564 x 274.

Here are the site accelerator links for the image on the twenty-twenty theme.

<img width=”564″ height=”274″ src=
“https://i2.wp.com/localskim.com/template/wp-content/uploads/sites/3/2020/08/Dunn-Photo-123-e1596861050565.jpg?fit=564%2C274&ssl=1&#8243; class=”attachment-post-thumbnail size-post-thumbnail wp-post-image” alt=”” srcset=
“https://i2.wp.com/localskim.com/template/wp-content/uploads/sites/3/2020/08/Dunn-Photo-123-e1596861050565.jpg?w=564&ssl=1 564w, https://
i2.wp.com/localskim.com/template/wp-content/uploads/sites/3/2020/08/Dunn-Photo-123-e1596861050565.jpg?resize=300%2C146&ssl=1 300w” sizes=”(max-width: 564px) 100vw, 564px”>

Any idea why it is serving up images that are enlarged for my regular theme and serving up the proper sized image for the twenty-twenty theme?

In this case, I recommend checking with your theme’s support on this: https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990/support

We size images based on the width and height set by the theme.

So I think I figured out why this is happening but not how to fix it.

In the functions.php file, it is set to crop all featured images (entry_without_sidebar) to 1128 x 550

function modified_thumb_for_blog_pages( $size ){
  $size['entry_without_sidebar'] = array('width'=>1128, 'height'=>550 );      
  return $size;

The physical space for the image on my website is only 564 wide but to accommodate retinal displays, I make the images double the size (1128 x 550). But on a regular monitor, the image will be scaled down to 564 x 275.

The photo that I had the problem with had an original size of 1024 x 819. So the featured image would be automatically cropped to 1024 x 550 (as per the code in the functions.php file). However, I used the media library editor in WordPress to crop the picture to 564 x 275 so it would display properly. But when the image is shown on the website, site accelerator serves the original image of 1024 x 550. (photo shown is 564 x 303 pixels, intrinsic 1024 x 550 pixels)

Here is the image url served by site accelerator:

<img width="1024" height="550" src="https://i2.wp.com/localskim.com/stcatharines/wp-content/uploads/sites/2/2020/08/Dunn-IceDogs-e1597206081885.jpg?resize=564%2C274&ssl=1" class="attachment-entry_without_sidebar size-entry_without_sidebar wp-post-image jetpack-lazy-image jetpack-lazy-image--handled"

However when I edit the original image to 564 x 275 using a photo editor program and then upload the image into WordPress, the image displays correctly since that is the only sized image site accelerator has.

Here is the image url from site accelerator when I edit the image before uploading to WordPress:

<img width="564" height="275" src="https://i1.wp.com/localskim.com/stcatharines/wp-content/uploads/sites/2/2020/08/Dunn-IceDogs-Edited.jpg?resize=564%2C275&ssl=1" class="attachment-entry_without_sidebar size-entry_without_sidebar wp-post-image"

So besides editing all images that are less than 1128 wide before uploading to WordPress, is there any other fix for this issue.

Outstanding! Would you please report that via https://github.com/Automattic/jetpack/issues/new?template=bug_report.md ?

That way, you’ll get credit for the report. ??

Done. I have reported it via github.

Thanks