my images keep going blurry without compression. (brooklyn)

[BrokenAtelier]

How do i load them at a higher resolution? I've redone all the images as pngs now there's a slight improvement but they're still a little unclear from the originals

[achieveapplabs]

Hi @BrokenAtelier ,

Last time we dealt with a similar issue it was a matter of removing the dimensions set within the code:

{{ 'logo.png' | asset_img_url: '300x' }}

If you see something like this then it will load the image like so:

//cdn.shopify.com/s/files/1/1425/8696/products/b15ddb43cbac45b1ae2685223fa3536d_500x500.jpg?v=1560284062

Our advice is to see if you're loading the image with Liquid syntax and if so try removing any sizes so it should look something like below:

{{ 'logo.png' | asset_img_url }}

That way it will load the original resolution and size. Here's a link to Shopify's Liquid cheat sheet, these tags are under "Filters" https://www.shopify.ca/partners/shopify-cheat-sheet

Hope this helps and let us know how it works out for you. 

Regards,

Achieve Team

[BrokenAtelier]

Hey,

sorry if this sounds stupid but where should I be looking for these ?

Thanks,

Morgan

[achieveapplabs]

Hi Morgan,

It depends where the image is loaded. If it's on a product page then check sections/product-template. 

Please do let us know so we can check in Brooklyn theme what the default code is. 

Regards,

Achieve Team

[BrokenAtelier]

so in the code directory i've got "product-template.liquid" & "media.liquid"

here are some sections I've got:

<div class="grid product-single">

<div class="product-single__media-flex">

under media.liquid:

   <div class="product-single__media" style="padding-top:{{ 1 | divided_by: media.aspect_ratio | times: 100}}%;">
      {% assign img_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
      <img class="mfp-image lazyload {{ img_id_class }}"
        src="{{ media | img_url: '1080x1080' }}"
        data-src="{{ img_url }}"
        data-widths="[1296, 1512, 1728, 2048]"
        data-aspectratio="{{ media.aspect_ratio }}"
        data-sizes="auto"
        {% if enable_image_zoom %} data-mfp-src="{{ media | img_url: '1024x1024' }}"{% endif %}
        data-media-id="{{ media.id }}"
        alt="{{ media.alt | escape }}">
    </div>

[achieveapplabs]

Hi @BrokenAtelier ,

Thanks for taking your time to show us the template code. A lot of this code is used to adjust the image resolution based on device screen size. 

Your product images seems to be a max resolution of 1024px by 1024px. You should try uploading a higher resolution image file. Shopify recommends 2048px by 2048px.

Here's a link to the blog that gives more info on file formats and sizes. 

https://www.shopify.ca/blog/image-sizes#:~:text=On%20Shopify%2C%20you%20can%20upload,look%20with%20g....

Sincerely,

Achieve Team