Shopify lazysizes image

lazy-image.liquid

{%- comment -%}
  Lazyload/Lazysizes responsive image snippet
  Author: Eric Hayes
  Version: 2.3
  -------------------------------------

  Requires:
    image: {Obect} image object setting variable

  Accepts:
    image_container: {Boolean} Use an image container for intrinsic size via padding
    container_class: {String} the class to apply to the image container
    image_class: {String} the class to apply to the image
    blur_up: {Boolean} Load a low resolution placeholder
    progressive: {Boolean} convert image to .pjpg (https://en.wikipedia.org/wiki/JPEG#JPEG_compression)
    parent_fit: {String} set cover/contain based on parent elements size
    force_ratio: {Number} overrides the image aspect ratio
    size: {String} (optional, default = '10x') the size of the placeholder (low res) image to load.
    It's replaced with larger image after load. Use '1x' to show primary color and higher for blurred image

  Dependencies:
  - Lazysizes plugin (https://github.com/aFarkas/lazysizes) which enable responsive image with faster load time and better performance.
  - lazySizes parent fit extension (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/parent-fit)
  - lazySizes RIaS extension (https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias)
  - lazysizes.scss (https://gist.github.com/hayes0724/a3d52a83df7f2bd6bb6e42bbf17249e1)

  Usage:
{% render 'lazy-image',image: section.settings.image %}

{%- endcomment -%}

{%- liquid
  assign image_container = image_container | default: false
  assign size = size | default: '10x'
  assign max_width = max_width | default: image.width
  assign blur_up = blur_up | default: false
  assign progressive = progressive | default: false
  assign parent_fit = parent_fit | default: 'cover'

  if progressive
    assign img_url = image | img_url: '1x1', format: 'pjpg' | replace: '_1x1', '_{width}x{height}'
  else
    assign img_url = image | img_url: '1x1' | replace: '_1x1', '_{width}x{height}'
  endif

  if force_ratio
    assign padding = force_ratio | times: 100 | append: '%'
  else
    assign padding = image.height | times: 1.0 | divided_by: image.width | times: 100 | append: '%'
  endif

  assign image_widths = '120,180,280,360,540,600,768,900,1080,1296,1512,1728,1920,2160,2376,2592,2808,3024' | split: ','
  assign widths = ''
  for width in image_widths
    assign width_num = width | plus: 0 | round
    if width_num < max_width
      assign widths = widths | append: width_num | append: ','
    endif
  endfor
  assign widths = widths | append: max_width
-%}

{% capture lazy_image %}
  <img data-image-id="{{ image.id }}" class="lazyload {% if blur_up %}blur-up{% endif %} {{ image_class }}" style="object-fit: {{ parent_fit }}"
    {%- if blur_up -%}
      src="{{ image | img_url: size }}"
    {%- else -%}
      src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    {% endif %}
       data-src="{{ img_url }}"
       data-widths="[{{ widths }}]"
       data-aspectratio="{% if force_ratio %}{{ force_ratio }}{% else %}{{ image.aspect_ratio }}{% endif %}"
       data-parent-fit="{{ parent_fit }}"
       data-sizes="auto"
       alt="{{ image.alt | escape }}"/>
{% endcapture %}

{% if image_container %}
  <div id="{{ css_selector }}" class="lazy__container {{ container_class }}" style="padding-bottom: {{ padding }}">
    {{ lazy_image }}
  </div>
{% else %}
  {{ lazy_image }}
{% endif %}

I believe Shopify discourages using lazysizes as they mentioned here: https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/deprecate-lazysizes
Is there any upside to using this instead of loading="lazy" ?