Why are my images stretching when converting from Rimg in Shopify?

Shopify Plus

Topic summary

A developer is encountering image stretching issues while migrating from Shopify’s deprecated rimg render snippet to native Shopify image filters.

Original Implementation:

  • Used render 'rimg' with parameters: 500x750 size, center crop, canvas mode, and lazy loading
  • Applied to both title card images and background images

Problem:

  • Images appear stretched when using the new image_url filter approach
  • Data attributes are not being passed correctly to the rendered images

Current Status:
The post shows attempted conversion code but appears corrupted or improperly formatted (text contains reversed/garbled characters), making it difficult to assess the exact implementation. The developer needs guidance on properly translating rimg parameters—particularly crop, canvas, and lazy loading settings—into Shopify’s native image filter syntax while maintaining correct aspect ratios and data attributes.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am trying to change the depreciated render rimg and update it to something native to Shopify. These are the two that I am trying to change, but my images look stretched out for some reason, and none of the data is being passed correctly.

Code 1:
{%
render ‘rimg,’
img: title_card_block.settings.image
size: ‘500x750’,
crop: ‘center’,
canvas: true,
lazy: true
%}

trying to convert it like this:

{{ title_card_block.settings.image | image_url: width: 500, height: 750 | image_tag: crop: ‘center’, background: true, loading: ‘lazy’ }}

Code 2:

{%
render ‘rimg’,
img: background_image,
size: ‘1400x’,
class: ‘shoppable-image__image’,
crop: ‘center’,
lazy: true,
canvas: true,
attr: ‘data-shoppable-image-img’
%}

trying to convert it like this:

{{ background_image | image_url: width: 1400 | image_tag: class: ‘shoppable-image__image’, crop: ‘center’, loading: ‘lazy’, canvas: true, attr: ‘data-shoppable-image-img’ }}