How to change the quality of featured images

Hi, the featured images generated by Beans are kinda low in quality for my website, how can I change the default quality of featured images? Thanks.

Hey Zack,

Beans doesn't change the WordPress default image quality (82%). That said you may set the quality for the post images (small and large) by adding the following snippet to your child theme.

add_filter( 'beans_edit_post_image_args', 'example_edit_post_image_args' );
add_filter( 'beans_edit_post_image_small_args', 'example_edit_post_image_args' );

function example_edit_post_image_args( $args ) {
  $args['set_quality'] = array( 100 );

  return $args;
}

It as been requested to make that the default behaviour so keep an eye on the changelog as it might change in the future.

Have fun,

Thanks for your help, Thierry. I've tried that, still doesn't work. And I just realized there is a line infront of my featured image:

<source media="(max-width: 480px)" srcset="https://atzack.com/wp-content/uploads/beans/images/municipal-house-prague-2978a33.jpg">

When I open this image (https://atzack.com/wp-content/uploads/beans/images/municipal-house-prague-2978a33.jpg), it's only 400px wide. I wish it to be at least 800px, and I don't see anything in my child theme is related to this, how can I change it? Thank.

I found this in Code Reference:beans-post-image (http://www.getbeans.io/code-reference/functions/beans_post_image/):

/**
    * Filter the arguments used by {@see beans_edit_image()} to edit the post small image.
    *
     * The small image is only used for screens equal or smaller than the image width set, which is 480px by default.
    *
     * @since 1.0.0
    *
     * @param bool|array $edit_args Arguments used by {@see beans_edit_image()}. Set to false to use WordPress
     *                              small size.
    */
   $edit_small_args = apply_filters( 'beans_edit_post_image_small_args', array(
      'resize' => array( 480, false ),
    ) );

I guess you are right, Thierry. But I should be after resize, rather than quality. So I tried this:

add_filter( 'beans_edit_post_image_args', 'zack_edit_post_image_args' );
add_filter( 'beans_edit_post_image_small_args', 'zack_edit_post_image_args' );

function zack_edit_post_image_args( $args ) {
    $args['resize'] = array( 1024 );
    $args['set_quality'] = array( 100 );

    return $args;
}

And it seems to work, but I'm worrying if this is a setback for speed/efficency?

Hey Zack,

The small image set to 480px by default is only used for devices which are 480px and smaller, not for the desktop (this article might help to better understand responsive images HTML). I see that your images (for desktop) are 800px wide so you shouldn't really change the sizes to improve the quality (unless if you want to add support for retina screen, in which case you must have another `` tag with the image size x2).

On thing to keep in mind is that WordPress compresses images on upload to 82% quality. If you want to make sure all your images are 100%, you may change the WordPress default quality as follow:

add_filter( 'wp_editor_set_quality', 'example_default_image_quality' );

function example_default_image_quality() {
 return 100;
}

Note that you will have to re-upload all your images for the snippet above to take effect. If you opt for the snippet above, you may remove the previous snippet given as Beans will automatically use the newly set default value.

Happy coding,