[wp-trac] [WordPress Trac] #44655: Introduce alternative srcset option for custom logo

[WordPress Trac]

#44655: Introduce alternative srcset option for custom logo
-------------------------+-----------------------------
 Reporter:  mrmadhat     |      Owner:  (none)
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  normal       |   Keywords:
  Focuses:               |
-------------------------+-----------------------------
 When adding theme support for custom-logo I can define the recommended
 size for the logo:

 {{{#!php
 <?php
     add_theme_support( 'custom-logo', array(
         'height'      => 38,
         'width'       => 186,
         'flex-width'  => true,
         'flex-height' => true,
     ));
 }}}

 The user will then be notified that they should upload their image at
 these dimensions. If they follow the advice the_custom_logo() will output:

 {{{
 <img width="186" height="38" src="http://www.domain.co.uk/wp-
 content/uploads/2018/07/img.png" class="custom-logo" alt="test"
 itemprop="logo">
 }}}

 Due to the small size srcset is not included and viewing on mobile could
 produce a blurry image. So to get srcset increase the height and width 3x
 making height 114 and width 558 we will now get:


 {{{
 <img width="558" height="114"
       src="http://www.domain.co.uk/wp-content/uploads/2018/07/paul-reeve-
 logo-2.png"
       class="custom-logo" alt="test" itemprop="logo"
       srcset="
           http://www.domain.co.uk/wp-content/uploads/2018/07/img.png 558w,
           http://www.domain.co.uk/wp-content/uploads/2018/07/img-
 350x72.png 350w,
           http://www.domain.co.uk/wp-content/uploads/2018/07/img-
 186x38.png 186w,
           http://www.domain.co.uk/wp-content/uploads/2018/07/img-
 372x76.png 372w
       "
       sizes="(max-width: 558px) 100vw, 558px">
 }}}

 We now have srcset but have had to use a larger image than we want, we
 have the option to resize the image via css to produce the correct
 dimensions but we are still potentially loading an image larger than
 needed. Also, from my testing I cannot seem to get this method to swap
 images at all, this could be due to my own error/misunderstanding however,
 I did find another person with a similar issue on SO

 [https://stackoverflow.com/questions/49177239/srcset-and-sizes-not-
 working-consistently-across-browsers]

 and viewing the following page always shows large.jpg as the image being
 used in my browser (chrome):

 [https://simpl.info/srcsetwvalues/]

 It would be good if we could specify the type of srcset to use e.g use 1x,
 2x, 3x instead of 350w, 500w...


 {{{
 <img
     srcset="
         http://www.domain.co.uk/wp-content/uploads/2018/07/img-186x38.png
 1x,
         http://www.domain.co.uk/wp-content/uploads/2018/07/img-372x76.png
 2x,
         http://www.domain.co.uk/wp-content/uploads/2018/07/img.png 3x"
     src="http://www.domain.co.uk/wp-content/uploads/2018/07/img-
 186x38.png" alt="test">
 }}}


 This way we could specify the required logo size to be 3x then server the
 appropriate size according to the pixel density of the device the user is
 viewing on.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/44655>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform