Site logo image is missing width and height

Running a few SEO and performance tests and I discovered that the site logo image tag doesn't contain a width and height variables!

How do you add image width and height to your site logo?

Working on the base that your theme file is a custom theme, then there are two files that you will need to edit:

• theme file; and 
• system branding block file

Starting with the workhorse theme file

Check if you have a hook_preprocess_block function in your custom theme file.

The core code that you will add is:

$image = \Drupal::service('image.factory')->get(DRUPAL_ROOT . $variables['site_logo']);
$logo_attributes['width'] = $image->getWidth();
$logo_attributes['height'] = $image->getHeight();

The image.factory gets the object of the image, that then allows us to extract the width and height.

Importantly, these three lines of code will need to wrapped in an IF statement checking that the image file exists.  Such as:

if (file_exists(DRUPAL_ROOT . $variables['site_logo'])) {
    // ... code magic .. //
}

Pulling this together in your custom theme file.  Location the hook_preprocess_block() function, and add if it doesn't exists or edit with the core elements of the code.

// Get the logo width and height.
if (file_exists(DRUPAL_ROOT . $variables['site_logo'])) {
    $image = \Drupal::service('image.factory')->get(DRUPAL_ROOT . $variables['site_logo']);
    $logo_attributes['width'] = $image->getWidth();
    $logo_attributes['height'] = $image->getHeight();
}

Now that you have access to the logo image width and height, lets make this accessible in your twig file.  There are a couple of methods you can apply:

Set the variable with the respective elements

$variables['site_logo_width'] = $logo_attributes['width'];
$variables['site_logo_height'] = $logo_attributes['height'];

Create a new Attribute

As we have already set the variables width and height in a $logo_attributes array.

$variables['logo_attributes'] = new Attribute($logo_attributes);

If you are using the second option, how about we add the alt attribute too.

$config = \Drupal::config('system.site');
$logo_attributes['alt'] = t('@site_name logo', ['@site_name' => Xss::filter($config->get('name'))]);
$variables['logo_attributes'] = new Attribute($logo_attributes);

Pulling all the code together, how does the theme file look?

/**
 * Implements hook_form_system_theme_settings_alter() for settings form.
 *
 * Example on how to alter theme settings form.
 */
function bales_preprocess_block(&$variables) {
  $block_id = $variables['elements']['#id'];
  $block = Block::load($block_id);

  $variables['region'] = NULL;
  if (!is_null($block)) {
    $region = $block->getRegion();
    // Add region as variable.
    $variables['region'] = $region;
  }

  if (bales_get_active_theme() == 'bales' && $variables['base_plugin_id'] == 'system_branding_block') {
    $variables['site_logo'] = NULL;
    if ($variables['content']['site_logo']['#access'] && $variables['content']['site_logo']['#uri']) {
      // $variables['site_logo'] = str_replace('.svg', '.png', $variables['content']['site_logo']['#uri']);
      $variables['site_logo'] = $variables['content']['site_logo']['#uri'];
      // Get the logo width and height.
      if (file_exists(DRUPAL_ROOT . $variables['site_logo'])) {
        $image = \Drupal::service('image.factory')->get(DRUPAL_ROOT . $variables['site_logo']);
        $logo_attributes['width'] = $image->getWidth();
        $logo_attributes['height'] = $image->getHeight();
      }
      $config = \Drupal::config('system.site');
      $logo_attributes['alt'] = t('@site_name logo', ['@site_name' => Xss::filter($config->get('name'))]);
      $variables['logo_attributes'] = new Attribute($logo_attributes);
    }
  }

Edit your twig file

The twig file that manages site branding in your custom theme is:

theme / custom / your-theme / templates / block / block--system-branding-block.html.twig

By default this file will look like

 {% if site_logo %}
        <div class="site-logo">
         <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
            <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
         </a>
     </div>
  {% endif %}

If the file doesn't exist, make a copy of the core theme stable block located in 

core / themes / stable / templates / block / block--system-branding-block.html.twig

Now that the site_logo code is in place you will need to change

<img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />

Replace with

<img src="{{ site_logo }}" {{ logo_attributes }} /> 

The complete section look like

{% if site_logo %}
    <div class="site-logo">
        <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
           <img src="{{ site_logo }}" {{ logo_attributes }} />
        </a>
    </div>
{% endif %}

Finally, the entire block--system-branding-block.html.twig file appears as

{% extends "block.html.twig" %}
{#
/**
 * @file
 * Theme override for a branding block.
 *
 * Each branding element variable (logo, name, slogan) is only available if
 * enabled in the block configuration.
 *
 * Available variables:
 * - site_logo: Logo for site as defined in Appearance or theme settings.
 * - site_name: Name for site as defined in Site information settings.
 * - site_slogan: Slogan for site as defined in Site information settings.
 */
#}
{% block content %}
<div class="site-branding">
  {% if site_logo %}
		<div class="site-logo">
         <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
            <img src="{{ site_logo }}" {{ logo_attributes }} />
         </a>
	 </div>
  {% endif %}
   {% if site_name or site_slogan %}
   <div class="site-name-slogan">
      {% if site_name %}
         <div class="site-name">
            <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
         </div>
      {% endif %}
      {% if site_slogan %}
         <div class="site-slogan">{{ site_slogan }}</div>
      {% endif %}
   </div>
   {% endif %}
</div>
{% endblock %}