Jetpack Site Accelerator Poor Image Quality

  • Resolved consumerista

    (@consumerista)


    2 years, 6 months ago

    Hello. how’s it going?

    Whenever I activate Speed up image load times” under Performance –> Site Accelerator, there is a marked reduction in image quality.. I have tested it on another website, as well, with the same effect.I have also added the following code to functions.php which is supposedly supposed to get it to leave image quality intact.

    `function sa_custom_params( $args ) {
    $args[‘quality’] = 100;

    return $args;
    }
    add_filter( ‘jetpack_photon_pre_args’, ‘sa_custom_params’ );`

    See the two images below, the clear one being with the feature deactivated.

    My images are already compressed/optimized, so not sure why Jetpack is working on them further. And no compression I have ever done reduces the quality to this level. I was going to activate the images to speed up page load time, but can’t if the images are going to blurry.

    https://ibb.co/dp4YthQ
    https://ibb.co/8KfPbLp

    Thanks–great plugin otherwise

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Support lastsplash (a11n)

    (@lastsplash)

    2 years, 6 months ago

    Hi @consumerista –

    Without knowing your URL and how you have your site set up, my sense is that if your images are already compressed and optimized, that is why you are seeing this reduction in quality. You should have better results if you start with higher quality images and then rely on Site Accelerator to handle the optimization.

    Could you share your URL so that we could take a look?

    Thread Starter consumerista

    (@consumerista)

    2 years, 6 months ago

    https://creatorvilla.com

    When I compress the images with tinypng, there is no visible reduction in quality, and the thumbnail version is clear. I tried not optimizing and just enabling Jetpack feature and the images were blurry.

    FYI, the uploads I did ^ your browser has to be horizontal or the images look messed up. But the difference is quite clear even with the “100” set, and I checked across multiple domains with/without plugins installed.

    Thank you for checking

    • This reply was modified 2 years, 6 months ago by consumerista.
    Plugin Contributor Dan (a11n)

    (@drawmyface)

    2 years, 6 months ago

    Hi @consumerista

    You appear to have “Speed up image load times” disabled currently. Could you enable it again and send us a link to a page on your site where we can see the issue, so we can check what is happening?

    Thanks.

    Thread Starter consumerista

    (@consumerista)

    2 years, 6 months ago

    https://tinyurl.com/rwn8hvka

    it’s activated now. header image seems unaffected on this blog, but images in body are reduced quality. my other blog it affects header images, as well.

    I disabled that snippet yesterday since it didn’t seem to affect anything

    Plugin Support lastsplash (a11n)

    (@lastsplash)

    2 years, 6 months ago

    Hi @consumerista –

    Thanks for activating Site Accelerator and sharing a link to where we can see this. I had trouble initially with the page as it was cached, but I was able to refresh it, it’s possible the cache may be causing issues here at times. However, by adding ?=klsdhaksjhdaskh (or any random string) I was able to force a load of a fresh page.

    That said, I tested an image on that page:

    http://creatorvilla.com/wp-content/uploads/2022/03/straight-outta-ohio-confessions-midwestern-suburbanite-mother-7.jpg

    and compared it to the Site Accelerator version:

    https://i0.wp.com/creatorvilla.com/wp-content/uploads/2022/03/straight-outta-ohio-confessions-midwestern-suburbanite-mother-7.jpg

    They both appear to be the same. The original source is very low quality with lots of pixelation and noise. Consequently, I think we can expect the Site Accelerator version would be similarly low quality.

    I looked at another combination:

    https://i0.wp.com/creatorvilla.com/wp-content/uploads/2022/03/straight-outta-ohio-confessions-midwestern-suburbanite-mother-3.jpg

    and:

    http://creatorvilla.com/wp-content/uploads/2022/03/straight-outta-ohio-confessions-midwestern-suburbanite-mother-3.jpg

    Since that file seemed a bit higher quality (although Site Accelerator and the version on your site were the same), I decided to test manually resizing it to see if Site Accelerator introduced issues during resizing. I resized the original image in an image editor (down to the same 326×340 that Site Accelerator is using) and got identical results to what we see in Site Accelerator:

    https://d.pr/i/TznGlY

    Based on this page, the issue seems to be with low quality source images.

    We can look at additional examples if you have another scenario that shows something different.

    Thread Starter consumerista

    (@consumerista)

    2 years, 6 months ago

    Thanks for looking into it.

    So here’s a before and after of the second photo in that same article. As you see, the otherwise high resolution images are blurry with Jetpack enabled.

    Jetpack enabled
    https://ibb.co/RS7nkSF

    Jetpack disabled
    https://ibb.co/HpmfY5V

    Here’s another example from this article

    Jetpack enabled
    https://ibb.co/TLynR9L

    Jetpack disabled
    https://ibb.co/WKjRXD4

    This is a typical difference in quality across my other blog, as well. A few of the images may be poor quality in which you may not be able to notice a difference, but the better quality the image is, the more marked the reduction is.

    The original images are larger than their display both in desktop and mobile, but the image quality does not get reduced with the Jetpack feature disabled as you can see in screenshots^.

    Plugin Contributor Stef (a11n)

    (@erania-pinnera)

    2 years, 5 months ago

    Hello @consumerista,

    I can see the difference in the images you linked. Let’s see if the following can help address this 🙂

    Let’s try to display images at the original quality: you can test this code snippet to do it:

    https://jetpack.com/2020/05/14/jetpack-hooks-control-jetpack-cdn/

    function sa_custom_params( $args ) {
	$args['quality'] = 100;

	return $args;
}
add_filter( 'jetpack_photon_pre_args', 'sa_custom_params' );

    You can also set the image quality being returned by our site accelerator module using this other code snippet:

    add_filter('jetpack_photon_pre_args', 'jetpackme_custom_photon_compression' );
function jetpackme_custom_photon_compression( $args ) {
    $args['quality'] = 90;
    $args['strip'] = 'all';
    return $args;
}

    If you need a plugin to easily add the codes above, you can try Code Snippet:

    https://wordpress.org/plugins/code-snippets/

    Hope that helps! Let me know how you get on.

    Thread Starter consumerista

    (@consumerista)

    2 years, 5 months ago

    Thanks for your reply. As I alluded to in my initial post, I tried that code but it did not have a noticeable effect.

    Mehdi Benchalal

    (@muffinpeace)

    2 years, 5 months ago

    Hi @consumerista

    Did you try to add the code snippet my colleague Stef mentioned using the Code Snippets plugin? You can keep the default settings there while adding the code snippet, so it’s on the “Run snippet everywhere” filter.

    Let us know how this goes.

    Thread Starter consumerista

    (@consumerista)

    2 years, 5 months ago

    Yes, it did not resolve the issue of low image resolution. This seems like a unique Jetpack problem because other image plugins do not seem to have this effect.

    Plugin Contributor Dan (a11n)

    (@drawmyface)

    2 years, 5 months ago

    Hi @consumerista

    I noticed the screenshots you sent were from a mobile device. Can you confirm whether this issue is only happening on mobile?

    From what I can see, Jetpack is correctly resizing your image to 255×491 on desktop (which should be determined by your media settings):

    https://d.pr/i/JJV32C

    But when the screen width is below 520px, there is a CSS rule that is stretching the image to full width, resulting in the pixelation:

    @media screen and (max-width: 520px)
.entry-content img {
    width: 100%;
}

    You’ll either need to remove/override that CSS rule, or ensure that your media settings are set to display your images at least 520px wide.

    Hope that helps!

    Thread Starter consumerista

    (@consumerista)

    2 years, 5 months ago

    That is a good catch, and yes I want the image to be 100% mobile.
    The Desktop looks good to me.

    Where are relevant “media settings” that sets it to 255 by 491? I assume that’s L x W, which would explain the distortion.

    I have default thumbnail set to 150 100, medium 300 300, etc. in WP admin

    Not sure where I would want to go to edit it. The distortion happens with horizontal-oriented images, as well, where you’d think little stretching is needed but I guess if it’s programmed to do that it would make sense.

    Edit: I looked at the theme’s CSS media queries and media code.not really seeing anything there that specifies a resize. however, it’s a Jetpack only issue as when I disable it the image resolution is fine even at 100% on mobile. is there a way to edit settings in Jetpack? Or am I looking for something more theme-general?

    The original images are at least 520 wide, but sometimes in the body of post I make them less wide (primarily for desktop, ironically, where they are often aligned right). The theme then “stretches” the image to 100% width for mobile — doesn’t affect resolution at all.

    • This reply was modified 2 years, 5 months ago by consumerista.
    • This reply was modified 2 years, 5 months ago by consumerista.
    • This reply was modified 2 years, 5 months ago by consumerista.
    • This reply was modified 2 years, 5 months ago by consumerista.
    Plugin Support lastsplash (a11n)

    (@lastsplash)

    2 years, 5 months ago

    Thanks for the additional information.

    Looking at the example post:

    https://creatorvilla.com/best-5-resources-to-learn-spoken-colloquial-arabic/

    The image you shared is being resized by Site Accelerator based on the width and height attributes set:

    
<img loading="lazy" src="https://i0.wp.com/creatorvilla.com/wp-content/uploads/2021/11/lughatuna-app.jpg?resize=255%2C491&ssl=1" alt="" class="wp-image-8321" width="290" height="559">

    you can see this with the ?resize=255%2C491 parameter. When Site Accelerator isn’t set, the image is being served at its original size (1125 x 2170) but the width and height attributes are just resizing the canvas, not the actual image. That’s why it is displaying better. You are loading a very high quality image and fitting it into an area that is substantially smaller, which results in a higher pixel density. However, when Site Accelerator is on, it is resizing the image. Additionally, the image is a JPG which is not the best format for images that contain text and as a result, some visual noise is being introduced.

    Site Accelerator looks at the img element’s width and height attributes and then serves an image resized to those dimensions or to the width of the containing element (whichever is smaller). By default, Jetpack will constrain images to the larger of the size indicated when adding the image to a post or to your theme’s “content width” setting. If one isn’t set, Jetpack will default to 1,000px. This is to help ensure that sites are not trying to serve images larger than what the theme intended to be able to display.

    > The original images are at least 520 wide, but sometimes in the body of post I make them less wide (primarily for desktop, ironically, where they are often aligned right).

    I would suggest that you refrain from setting an explicit image size (width and height). That will prevent the distortion on the image as Site Accelerator won’t try to resize them dynamically. As an alternative, you could size the image appropriately before inserting them on your site.

    > However, it’s a Jetpack only issue as when I disable it the image resolution is fine even at 100% on mobile. is there a way to edit settings in Jetpack? Or am I looking for something more theme-general?

    There isn’t a way to adjust the resolution/sizes in Jetpack. Site Accelerator is designed to pick the proper size based on the container. If you aren’t setting the width and height directly, you might want to try testing with a different theme in order to rule out a theme conflict.

    A good plugin to test with is:

    https://wordpress.org/plugins/health-check/

    Once you’ve installed and activated the plugin, you can go to Tools → Site Health:

    * Select the Troubleshooting tab and then click Enable Troubleshooting to automatically disable all plugins and add a new Troubleshooting Menu item in the toolbar at the top of the wp-admin dashboard.
    * From here, you can enable and disable plugins and change the theme for your site, but without affecting normal visitors to your site.

    Please try with a default theme such as “Twenty Twenty” and see if you experience the same issue. If you do not, the issue is with your theme.

    I hope that helps.

    Thread Starter consumerista

    (@consumerista)

    2 years, 5 months ago

    Thank you for that info. Yeah, I’m not setting the default image length. Those paramaters (290 by 559) are no where in the theme’s CSS files or WP “Media” section.

    I tried a preview with another theme and the image resolution is equally low.

    What’s interesting, however, is that the top image in each post (not officially “featured”, per se, even though I tend to use the top image as featured so it serves both roles.)

    I have another site with the same theme where top image in each post IS affected but on CV it doesn’t seem to be affected by the resizing/low resolution issue, only the images in the body.

    I’m going to disable the Images part of Site Accelerator for now since the images are too low resolution for me.

    • This reply was modified 2 years, 5 months ago by consumerista.
Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Jetpack Site Accelerator Poor Image Quality’ is closed to new replies.