Missing width and height attributes on img tag

Shopify Discussion
1

Hello!

I’m just trying to set up a very simple easy-to-use website that loads fast. I had a lot of trouble getting the store to load fast as it was having LCPs of 15 seconds or more.

I’ve discovered that in my code for the sections with images, there seems to be an error that says:

“Missing width and height attributes on img tag”
and
“Use the native loading=“lazy” attribute instead of lazysizes”
I’ve been advised that this may be part of the reason why my website is taking a long time to load, is anybody able to help?

Caspture.JPG
Caspture.JPG656×518 76.1 KB

{%- if section.settings.divider -%}{%- endif -%}

{%- liquid
  assign overlap_images = true
  if section.settings.image != blank and section.settings.image2 == blank
    assign overlap_images = false
  endif
-%}

  

    {%- capture image_layout -%}
      

          {%- if section.settings.image != blank -%}
            

              {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}{%- endif -%}
                

                  {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                  
                

              {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}{%- endif -%}
            

          {%- endif -%}
          {%- if section.settings.image2 != blank -%}
            
              {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}{%- endif -%}
                

                  {%- assign img_url = section.settings.image2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                  
                

              {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}{%- endif -%}
            

          {%- endif -%}
          {%- if section.settings.image == blank and section.settings.image2 == blank -%}
            
              

                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              

            

            
              

                {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
              

            

          {%- endif -%}
      

    {%- endcapture -%}

    
      {%- if section.settings.layout == 'left' -%}
        {{ image_layout }}
      {%- endif -%}

      

        {%- if section.settings.subtitle != blank -%}
          
{{ section.settings.subtitle }}

        {%- endif -%}
        {%- if section.settings.title != blank -%}
          {{ section.settings.title | escape }}

        {%- endif -%}
        {%- if section.settings.text != blank -%}
          {{ section.settings.text }}

        {%- endif -%}
        {%- if section.settings.button_label != blank -%}
          
            
              {{ section.settings.button_label }}
            
          

        {%- endif -%}
      

      {%- if section.settings.layout == 'right' -%}
        {{ image_layout }}
      {%- endif -%}
    

  

{%- if section.settings.divider -%}
{%- endif -%}

{% schema %}
  {
    "name": "Image with text",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "image_picker",
        "id": "image2",
        "label": "Image 2"
      },
      {
        "type": "range",
        "id": "image_width",
        "label": "Image width",
        "default": 700,
        "min": 200,
        "max": 700,
        "step": 10,
        "unit": "px"
      },
      {
        "type": "text",
        "id": "subtitle",
        "label": "Subheading"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "

Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.

"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      },
      {
        "type": "select",
        "id": "button_style",
        "label": "Button style",
        "default": "primary",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          }
        ]
      },
      {
        "type": "select",
        "id": "align_text",
        "label": "Text alignment",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Centered"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "right",
        "options": [
          {
            "value": "left",
            "label": "Image on left"
          },
          {
            "value": "right",
            "label": "Image on right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "divider",
        "label": "Show section divider",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Image with text"
      }
    ]
  }
{% endschema %}
2

Did you ever figure this out?

(Also, are you using the Turbo theme by chance?)