How long does the CDN store deleted images?

Solved
Conner
Explorer
49 1 9

Hello,

I've run into an issue where Shopify's CDN seems to be holding onto old, out-of-date images.

We format image names in a way to help with organization. Sometimes this results in a new image overwriting an old image with the image URL stays the same.

In Shopify, if we delete the old image and upload the new image, the old image is still displayed on the product. This occurs whether we do it through the Admin interface or the API.

Has anyone else run into this issue? Is there a workaround? We'd really like to continue reusing image URLs if possible.

Thanks,
Conner

0 Likes
SBD_
Shopify Staff
Shopify Staff
1095 147 204

Hey @Conner,

 

The version parameter should fetch the latest version. If you're using liquid, url filters will append it:

 

 

{{ variant.image | img_url }} -> image.jpg?v=1542689669

 

 

0 Likes
Conner
Explorer
49 1 9

This is an accepted solution.

Hi @SBD_ 

 

Appreciate the response!

 

We ended up resolving over the weekend by attaching a randomized value as a suffix to the image filename, which forces the image to update despite the image caching.

For example:
Previously, our format for image names looked something like: "Blue_Coat_Primary.jpg".
Now, it looks like so: "Blue_Coat_Primary-1234.jpg".

0 Likes
SBD_
Shopify Staff
Shopify Staff
1095 147 204

Glad to hear! Use the version parameter if you can (instead of a random string), this will allow the asset to take advantage of CDN caching.

0 Likes
LDP
New Member
1 0 0

Hi,
I'm currently experiencing a similar problem. How would one apply the said version parameter instead of renaming files with random strings?

NOTE: I do believe our liquid files do run the image_url parameter, so it's still bringing old versions of our product images.

<div id="Media{{ media.id }}" tabindex="0" class="Product__SlideItem Product__SlideItem--image Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="image" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}" data-image-media-position="{% increment image_position %}">
              <div class="AspectRatio AspectRatio--withFallback" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%; --aspect-ratio: {{ media.aspect_ratio }};">
                {% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

                <img class="Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" data-expand="-100" alt="{{ media.alt | escape }}" data-max-width="{{ media.width }}" data-max-height="{{ media.height }}" data-original-src="{{ media | img_url: 'master' }}">
                <span class="Image__Loader"></span>

                <noscript>
                  <img src="{{ media | img_url: '800x' }}" alt="{{ media.alt | escape }}">
                </noscript>
              </div>
            </div>



Thank you.

0 Likes