How long does the CDN store deleted images?

[Conner]

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

[SBD_]

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

[Conner · 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".

[SBD_]

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.

[LDP]

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.

[sheldonkeith]

Where do I run this code? I have a problem where a deleted file is interfering with the name of the correct file. Our code automatically brings in a file coordinated to the week number, so I need to get the old one out of there.