How can I adjust the size of an image in code without losing quality?

Hi, I added an image into my product page by adding in a snippet of code for that image, however it is not the size I would like. I have tried resizing the image (I would like it smaller) however the quality is not good when I do that.

The snippet of code is:

freeshiptag

Does anyone know how to add something to that line that changes the size of the image. Eg. Width: x, Length: y, or something.

Any help would be greatly appreciated.

Thanks. :slightly_smiling_face:

Hi Vuksan,

<img src="{{ 'freeship-tag2.png' | asset_url }}" width="100" height="100" alt="freeshiptag" >

Although that may not yield the best quality either plus it makes them difficult to be responsive (adjust to screen sizes). Just so you know.

Hope that helps!

Ok, thank you. I will give that a go!

:slight_smile:

What section does this code appear?

<img src="{{ 'freeship-tag2.png' | asset_url }}" width="100" height="100" alt="freeshiptag" >

@James_Vuksan ,

Further to what @KarlOffenberger suggested you may give the parameter as %age to adjust and keep it little responsive

<img src="{{ 'freeship-tag2.png' | asset_url }}" width="75%" height="75%" alt="freeshiptag" >

Mr. Vulksan—

You said:

“I have tried resizing the image (I would like it smaller) however the quality is not good when I do that.” Did you resize the image outside the Shopify environment with an App such as Photoshop? I also can’t control the size of the container. The image is placed in a huge block and rendered into a poor resolution. I tried making the image pixel size the same for a collection say; but I still get a bad result. I tried using Photoshop to resize or redefine the canvas size(Pixexls x Pixels), not a very pleasing result. I’m at a loss.