Introduce alternative srcset option for custom logo

[mrmadhat]

When adding theme support for custom-logo I can define the recommended size for the logo:

<?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.

[swissspidy]

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

Have you tried add_image_size() with both 186x38 and 372x76? If WordPress sees that the image is available in both sizes, it will print the srcset accordingly.

[mrmadhat]

Replying to swissspidy:

Have you tried add_image_size() with both 186x38 and 372x76? If WordPress sees that the image is available in both sizes, it will print the srcset accordingly.

I have both 186x38 and 372x76 defined:

with:

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

I get the following:

<img width="558" height="114" 
    src="http://www.domain.co.uk/wp-content/uploads/2018/07/img.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">

The image is still allowed to reach it's original width and height if the container allows and no styling has been applied to modify width or height.

[joemcgill]

@mrmadhat Thanks for raising this issue, there definitely may be more we can do to improve the native responsive image code here. A few notes: resizing with CSS should be totally fine as long as the sizes attribute is modified to match the expected layout needs. One of the reasons you're likely not seeing the changes locally is that once a browser has downloaded and cached a source that is equal to or larger than what is needed, it will use that instead of downloading a smaller size in order to avoid an unnecessary additional request.

[mrmadhat]

@joemcgill I've taken some time to look at srcset and sizes to try and get a better understanding of what is happening.

From my understand, srcset is providing the browser with multiple options of images to choose from and 000w is telling the browser the width so it doesn't have to fetch each image to find out their dimensions. sizes is saying what size the image will be based on a given dimension. CSS then dictates the actual width/height. From that information the browser will choose the most appropriate image.

I can see that this works when sizes is given the correct information but the output doesn't seem to be correct. If I specify a height (186) and width (38) I would expect the following given a user uploading at the correct dimensions:

1x - 186 x 38
2x - 372 x 76
3x - 558 x 114

However with the current sizes value sizes="(max-width: 558px) 100vw, 558px" the 3x image will always be chosen (regardless of the css width and height values). I have created a sample showing this ​https://codepen.io/relativemc/pen/rrpWxm and here is a screenshot showing the result on a 1x screen: