Hello everyone,
“I uploaded images for the collection feature image in PNG format. However, when I viewed the collection page on the live site, the image was converted into JPG format and a white background was added to it. Even when I opened the image in a new tab, it still appeared in JPG format with a white background. I’m not sure why this is happening. Can anyone help me understand why this is happening and suggest a solution if I want to display a transparent image instead?”
Shopify converts JPG format images to PNG format to increase page loading speed because JPG images are much smaller than PNG images.
Because I don’t know the specific code, I can’t give you a specific solution. You can change the filter from pjpg or jpg to png
You can refer to the following document: https://shopify.dev/docs/api/liquid/filters/image_url
Hope it helps @Jay_RW
{%- if section.settings.show_collection_image and collection.image -%}
@BSS-Commerce
the above code is what i am having for banner. And I also want to ask you in general, What to do if We want to use PNG images anywhere in my store?
I found one code in Documentation but I did not understood it,
here is a link :-https://shopify.dev/docs/api/liquid/filters/image_url
You can refer to the format section at https://shopify.dev/docs/api/liquid/filters/image_url#image_url-format
To change the image format, replace your code with the following code:
{%- if section.settings.show_collection_image and collection.image -%}
<div class="collection-hero__image-container media">
<img
srcset="{%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165, format: 'png' }} 165w,{%- endif -%}
{%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360, format: 'png' }} 360w,{%- endif -%}
{%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535, format: 'png' }} 535w,{%- endif -%}
{%- if collection.image.width >= 750 -%}{{ collection.image | image_url: width: 750, format: 'png' }} 750w,{%- endif -%}
{%- if collection.image.width >= 1070 -%}{{ collection.image | image_url: width: 1070, format: 'png' }} 1070w,{%- endif -%}
{%- if collection.image.width >= 1500 -%}{{ collection.image | image_url: width: 1500, format: 'png' }} 1500w,{%- endif -%}
{{ collection.image | image_url }} {{ collection.image.width }}w"
src="{{ collection.image | image_url: width: 750, format: 'png' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
alt="{{ collection.title | escape }}"
width="{{ collection.image.width }}"
height="{{ collection.image.height }}"
>
</div>
{%- endif -%}
We’re sorry to tell you that there is currently no way to use PNG images anywhere in the store. You will have to change the format for each image you want to use PNG image.