Why Images convert from png to jpg automatically

Jaypal_P
Tourist
14 0 2

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?"

 

Replies 5 (5)

Moeed
Shopify Partner
3562 894 1113

Hey @Jaypal_P 

 

Can you please share your Store URL and Password if enabled?

 

Best Regards,

Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

BSS-Commerce
Shopify Expert
3398 450 503

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 @Jaypal_P 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Jaypal_P
Tourist
14 0 2

{%- 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 }} 165w,{%- endif -%}
{%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
{%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}
{%- if collection.image.width >= 750 -%}{{ collection.image | image_url: width: 750 }} 750w,{%- endif -%}
{%- if collection.image.width >= 1070 -%}{{ collection.image | image_url: width: 1070 }} 1070w,{%- endif -%}
{%- if collection.image.width >= 1500 -%}{{ collection.image | image_url: width: 1500 }} 1500w,{%- endif -%}
{{ collection.image | image_url }} {{ collection.image.width }}w"
src="{{ collection.image | image_url: width: 750 }}"
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 -%}


@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,2024-01-26_143113.jpg

here is a link :-https://shopify.dev/docs/api/liquid/filters/image_url

BSS-Commerce
Shopify Expert
3398 450 503

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. 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development