craft theme, collection images are sized appropriately but are causing major issues

[tabel69]

I have created collection tile images mainly for mobile users, but after I loaded them, my website performance took a hit, and they seem to be giving me poor cls.  I ran the test, and it came back with properly sized images.

example: <img srcset="//created4ucreations.com/cdn/shop/collections/Tail-Wagging_and_Purr-Fect_P…" src="https://created4ucreations.com/cdn/shop/collections/Tail-Wagging_and_Purr-…" sizes=" (min-width: 1600px) 500px, (min-width: 75…" alt="Dog Mats, Dog Boned Shaped Mats, Pet Welcome Mats" height="1600" width="1600" loading="lazy" class="motion-reduce">

How do I fix this?  I have loaded smaller images, I have loaded jpg, instead of png, I have loaded 800x800 and I still get this. 

www.created4ucreations.com   

[EBOOST]

Hi @tabel69 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Sections/main-collection-banner.liquid
3.Remove 2 attributes( srcset and sizes) of images.

[tabel69]

I will try this today... and get back to you.   And thank YOU if this works!!  Either way... thank you for even responding... I appreciate the guidance! 

-tina

[tabel69]

I did it...  and I still get the same result.  Matter of fact my performance worsen.    And they still show up on my report.   

Maybe I need to give it more time to take?  

Any other suggestions?  I really like having the collection tile images... I think it helps via when using the mobile version but maybe I need to remove them and just use text squares.    

[EBOOST]

Hi,

Could you give the content of this file? I will help you remove it.

[tabel69]

I'm not sure what you mean by "content of this file".   www.created4ucreations.com   if you go via mobile device you will see my collection images.  It is those images that seems to be the issue. 

[tabel69]

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}

{%- style -%}
@media screen and (max-width: 749px) {
.collection-hero--with-image .collection-hero__inner {
padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
}
}
{%- endstyle -%}

<div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient">
<div class="collection-hero__inner page-width {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
<div class="collection-hero__text-wrapper">
<h1 class="collection-hero__title">
<span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
{{- collection.title | escape -}}
</h1>

{%- if section.settings.show_collection_description -%}
<div class="collection-hero__description rte">{{ collection.description }}</div>
{%- endif -%}
</div>

{%- if section.settings.show_collection_image and collection.image -%}
<div class="collection-hero__image-container media gradient">
<img

src="{{ collection.image | image_url: width: 750 }}"

alt="{{ collection.image.alt | escape }}"
width="{{ collection.image.width }}"
height="{{ collection.image.height }}"
>
</div>
{%- endif -%}
</div>
</div>

{% schema %}
{
"name": "t:sections.main-collection-banner.name",
"class": "section",
"settings": [
{
"type": "paragraph",
"content": "t:sections.main-collection-banner.settings.paragraph.content"
},
{
"type": "checkbox",
"id": "show_collection_description",
"default": true,
"label": "t:sections.main-collection-banner.settings.show_collection_description.label"
},
{
"type": "checkbox",
"id": "show_collection_image",
"default": false,
"label": "t:sections.main-collection-banner.settings.show_collection_image.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
}
]
}
{% endschema %}

[tabel69]

I think I figured out what you meant... so I copied and pasted the whole section.  And thank you!!! 

[tabel69 · Accepted solution]

Here is the whole section.... I think this what you were asking for. Edit
as you seem fit! And a HUGE THANK YOU!!!
-tina
*******************************************************************

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}

{%- style -%}
@media screen and (max-width: 749px) {
.collection-hero--with-image .collection-hero__inner {
padding-bottom: calc({{ settings.media_shadow_vertical_offset |
at_least: 0 }}px + 2rem);
}
}
{%- endstyle -%}

{{
'sections.collection_template.title' | t }}:
{{- collection.title | escape -}}

{%- if section.settings.show_collection_description -%}

{{
collection.description }}

{%- endif -%}

{%- if section.settings.show_collection_image and collection.image -%}

src="{{ collection.image | image_url: width: 750 }}"

alt="{{ collection.image.alt | escape }}"
width="{{ collection.image.width }}"
height="{{ collection.image.height }}"
>

{%- endif -%}

{% schema %}
{
"name": "t:sections.main-collection-banner.name",
"class": "section",
"settings": [
{
"type": "paragraph",
"content":
"t:sections.main-collection-banner.settings.paragraph.content"
},
{
"type": "checkbox",
"id": "show_collection_description",
"default": true,
"label":
"t:sections.main-collection-banner.settings.show_collection_description.label"
},
{
"type": "checkbox",
"id": "show_collection_image",
"default": false,
"label":
"t:sections.main-collection-banner.settings.show_collection_image.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
}
]
}
{% endschema %}

[tabel69]

My performance bumped up to a 67... so I gained 20 points in the right direction!  Thank you!!   Now I have one more issue... that maybe you know the work around too.  I have looked to see how to maybe changed it from hoover default to static but I don't see it.    

How do I mange this or code it?  

But first - let me say thank you for your help.  Sorry for the delay, I had grandchildren for past week and half, and working on my website had to take a back seat. 

-tina