[wp-trac] [WordPress Trac] #39253: Head Image Quality Issue

[WordPress Trac]

#39253: Head Image Quality Issue
---------------------------+------------------------------
 Reporter:  richardevs     |       Owner:
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:  trunk
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:
---------------------------+------------------------------

Comment (by laurelfulford):

 Good catch, @richardevs!

 It looks like the image quality issue is happening because the header
 image file itself is set to be 100% of the screen width on page load:

 {{{
 function twentyseventeen_header_image_tag( $html, $header, $attr ) {
         if ( isset( $attr['sizes'] ) ) {
                 $html = str_replace( $attr['sizes'], '100vw', $html );
         }
         return $html;
 }
 add_filter( 'get_header_image_tag', 'twentyseventeen_header_image_tag',
 10, 3 );
 }}}

 ... and then it's being scaled up further with `object-fit: cover` in the
 style.css. It's much more noticeable on vertical screens, because the
 image is getting scaled up a lot more than on a horizontal screen to fit
 the space.

 I'm not sure if the best fix is to simply increase the image size for
 smaller screens, or perhaps there's some really specific case we can check
 for before assigning a size?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/39253#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform