Removing image compression for large product image as part of a collage on homepage. dawn theme

Technical Q&A

Topic summary

A user seeks to prevent image compression on large product images in a collage on their homepage using the Dawn theme. Their initial CSS code worked temporarily but compression returned after page refresh.

Problem Scope:

  • Product images in collage sections appear compressed to half their original size
  • Image banners face similar compression issues without a solution yet
  • Custom CSS targeting .collage__item--left grid properties provided temporary relief

Solution Provided:
LitExtension offered complete replacement code for the card-product.liquid file that removes conditional image sizing logic and displays images at their default size.

Alternative Approach:
The user also tested removing all conditional “if” statements and increasing max image width to 2048px, which achieved crisp images.

Key Difference Explained:

  • LitExtension’s code: Shows default product image size
  • User’s modification: Forces large image size consistently, preventing blur during lazy loading across different screen sizes

Both approaches successfully resolved the compression issue. The discussion concluded with the user expressing satisfaction with the clarification.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hi community!

we are looking to remove image compression for the large product image as part of a collage on the homepage. dawn theme. The image seems to be compressed to half its size. As for now we are using this code, but it worked only once and after refreshing page a little later the image is compressed again.

Same applies for image banners and we don’t have any solution/code for that part yet.

For the collage we have placed in collage.css:

@media (min-width: 310px) {
.collage__item–left:nth-child(3n - 2) {
grid-column: 1 !important;
grid-row: 1 !important;
}
.collage__item–left:nth-child(3n - 1),
.collage__item–left:nth-child(3n) {
grid-column-start: unset !important;
}
}

shop url: monochromatism.shop

@LitExtension

@ketankumar100

Thanks in advance!

Cheers,

monochromatism-team

1 Like
2

Hi @monomgroup ,

Please send me the code of card-product.liquid file, I will help you to change it

3

@monomgroup

do you need gird?

4

That’s awesome. Many thanks in advance. I figure, we will need to remove the “if” lines. I did that for the collage.liquid file and wondered why nothing changed.

{% comment %}
Renders a product card

Accepts:

  • card_product: {Object} Product Liquid object (optional)
  • media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
  • show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  • show_vendor: {Boolean} Show the product vendor. Default: false
  • show_rating: {Boolean} Show the product rating. Default: false
  • extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  • lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
  • show_quick_add: {Boolean} Show the quick add button.
  • section_id: {String} The ID of the section that contains this card.

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {{ card_product.featured_media.alt | escape }} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w”
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- endif -%}
{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}

{{ card_product.title | escape }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}

{{ block.settings.description | escape }}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render ‘judgeme_widgets’, widget_type: ‘judgeme_preview_badge’, concierge_install: true, product: card_product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}

({{ card_product.metafields.reviews.rating_count }}) {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’ %}

{%- if show_quick_add -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%} {%- if card_product.variants.size == 1 -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }}
{%- endform -%} {%- else -%} {{ 'products.product.choose_options' | t }}
{% render 'icon-close' %}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}
{%- else -%}

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%} {% render 'price' %}
{%- endif -%}
5

Hi @monomgroup ,

Please change all code:

{% comment %}
Renders a product card

Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- show_quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.

Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}

{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != nil and show_secondary_image -%}

{%- endif -%}

{%- endif -%}

### 

{{ card_product.title | escape }}

{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}

### 

{{ card_product.title | escape }}

{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}

{{ card_product.vendor }}

{%- endif -%}

{{ block.settings.description | escape }}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: card_product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}

({{ card_product.metafields.reviews.rating_count }})
{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}

{% render 'price', product: card_product, price_class: '' %}

{%- if show_quick_add -%}

{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.variants.size == 1 -%}

{%- else -%}

{%- endif -%}

{%- endif -%}

{%- if card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}

{%- else -%}

### 

{{ 'onboarding.product_title' | t }}

### 

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}

{{ 'products.product.vendor' | t }}

{%- endif -%}
{% render 'price' %}

{%- endif -%}

Hope it helps!

1 Like
6

Thanks that helped!

I also tried the following amendmends which also led me to the result of crisp product images. Is there any difference? or will I face other troubles using this code? (basically reomced all if codes and increased max image size. width to 2048px:

{% comment %}
Renders a product card

Accepts:

  • card_product: {Object} Product Liquid object (optional)
  • media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
  • show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  • show_vendor: {Boolean} Show the product vendor. Default: false
  • show_rating: {Boolean} Show the product rating. Default: false
  • extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  • lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
  • show_quick_add: {Boolean} Show the quick add button.
  • section_id: {String} The ID of the section that contains this card.

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {{ card_product.featured_media.alt | escape }} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 2048 }} 2048w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w”
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- endif -%}
{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}

{{ card_product.title | escape }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}

{{ block.settings.description | escape }}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render ‘judgeme_widgets’, widget_type: ‘judgeme_preview_badge’, concierge_install: true, product: card_product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}

({{ card_product.metafields.reviews.rating_count }}) {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’ %}

{%- if show_quick_add -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%} {%- if card_product.variants.size == 1 -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }}
{%- endform -%} {%- else -%} {{ 'products.product.choose_options' | t }}
{% render 'icon-close' %}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}
{%- else -%}

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%} {% render 'price' %}
{%- endif -%}
7

Hi @monomgroup ,

With my change code, it will show the default size of the product image.

As for the change you mentioned, it will help to display the image always in large size, so the product image will not be blurred according to each screen size when lazy loading.

Hope it is clear to you.

1 Like
8

Thanks a lot for the differentiation.

1 Like