Retina Support

dada78
Tourist
7 1 0

 

Hi guys,

Couple of questions:

I have a responsive theme, however I also would like my images to be served depending on the device resolution. If anything I would at least be able to set this up for the product page image uploads.

1)  I read about the URL filters here:https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#size-parameters and that adding the "scale" parameter would take care of that? Example:

 

 {{ product | img_url: '400x400', scale: 2 }}

 

How and where would I make these edits in my theme for let's say the product images? And also am interested in adding that to wherever images would need to be uploaded?


2) I understand the way to go about high-res images is to upload the largest possible image - for example 2048 x 2048 and then Shopify would automatically serve the high-density version? For example I have a product image set to 620px x 620px in the CSS for which I uploaded a 2048 x 2048 image. Can I expect Shopify to serve the 1240 x 1240 image for retina devices if the scale parameter had been successfully been added to the theme and the 620x620 image to standard resolution devices?

Any help is highly appreciated, thanks!

0 Likes