Title: Replacing image with cropped version causes srcset references getting outdated
Last modified: July 24, 2023

---

# Replacing image with cropped version causes srcset references getting outdated

 *  [abitofmind](https://wordpress.org/support/users/abitofmind/)
 * (@abitofmind)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/replacing-image-with-cropped-version-causes-srcset-references-getting-outdated/)
 * **Scenario**
    - Created an Image Slider with [Gutenslider](https://wordpress.org/plugins/gutenslider/).
    - Each image in the slider gets its `srcset` markup. _I assume it uses WP’s 
      default “Responsive Image” mechanism._
    - Sometimes later I decided to crop the images in the series a bit further so
      that more of them gets readable.
    - I cropped them on my computer with my image software.
    - Media Library → List Image → Identify Image of my series → “Replace Image”(
      this action comes from your plugin) → Replaced it with the cropped image version
      on my computer. Did this for all 5 images in the slider.
 * ❌ **After that:** All images showed as broken (only their ALT text)
    - **Reason**: The `srcset` references were not updated and hence all point to
      files which don’t exist anymore!
    - Because in the new `srcset` of the corresponding image files the `-XXXxYYY`
      suffix part changed due to the slightly different aspect ratios of the cropped
      images. (e.g. 1024×796 became 1024×838).
 * 💡 **Proposal**: When the plugin replaces an image it also updates the `srcset`
   accordingly in all existing markup. This should be easily possible without doubt,
   as in well-formed markup the main `src` attribute of the image is the same unchanged
   URL and also in the `class` attribute it has the unique media library identifier`
   wp-image-1234.`
 * 💡 **If this is not possible** then the minimal improvement would be to compare
   the old vs the new image dimensions and give a warning to the user that updating
   an image with an image of different proportions,
    - may result in layout issues if not having used percentual/responsive image
      layout techniques (lesser problem)
    - and will certainly result in srcset file references to break which will render
      various blocks to have broken images! You will need to re-create image markup(
      the very task which you wanted to spare yourself by using the plugin).

Viewing 1 replies (of 1 total)

 *  Thread Starter [abitofmind](https://wordpress.org/support/users/abitofmind/)
 * (@abitofmind)
 * [2 years, 10 months ago](https://wordpress.org/support/topic/replacing-image-with-cropped-version-causes-srcset-references-getting-outdated/#post-16917747)
 *     ```wp-block-code
       <!-- ORIGINAL IMAGE -->
   
       <div class="swiper-slide wp-block-eedee-block-gutenslide is-position-center-center ed-bg-image swiper-slide-duplicate"
       style="--ed-vw: 300; --ed-vh: 233; width: 691px; transition-duration: 0ms; opacity: 0; transform: translate3d(0px, 0px, 0px);"
       data-hash="gutenslider-po7e44kef-5" data-lg-image-idx="4" data-swiper-slide-index="4" role="group" aria-label="5 / 5">
   
       	<div class="eedee-background-div bg-image">
   
       		<img decoding="async" loading="lazy" width="1024" height="796" class="swiper-lazy wp-image-3320 swiper-lazy-loaded"
       		src="https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1024x796.webp"
       		alt="TA Timeline Levels Stacked - All levels and all annotations"
       		style="object-fit: cover; object-position: 50% 50%;"
       		data-title="TA Timeline Levels Stacked 5 All levels and all annotations"
       		srcset="https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1024x796.webp 1024w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-300x233.webp 300w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-150x117.webp 150w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-768x597.webp 768w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1536x1194.webp 1536w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-2048x1592.webp 2048w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1600x1244.webp 1600w"
       		sizes="(max-width: 1024px) 100vw, 1024px">
       		<div class="eedee-background-div__overlay" style="opacity:1;"></div>
       	</div>
       	<div class="slide-content">
       		<p class="has-text-align-center gutenslider-content-initial has-larger-font-size"></p>
       	</div>
       </div>
   
   
       <!-- REPLACED IMAGE IN FRESHLY GENERATED SLIDER (WITH RENEWED SRCSET MARKUP) -->
   
       <div class="swiper-slide wp-block-eedee-block-gutenslide is-position-center-center ed-bg-image swiper-slide-duplicate"
       style="--ed-vw: 300; --ed-vh: 245; width: 691px; transition-duration: 0ms; opacity: 0; transform: translate3d(0px, 0px, 0px);"
       data-hash="gutenslider-po7e44kef-5" data-lg-image-idx="4" data-swiper-slide-index="4" role="group" aria-label="5 / 5">
   
       	<div class="eedee-background-div bg-image">
   
       		<img decoding="async" loading="lazy" width="1024" height="838" class="swiper-lazy wp-image-3320 swiper-lazy-loaded"
       		src="https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1024x838.webp"
       		alt="TA Timeline Levels Stacked - All levels and all annotations" style="object-fit: cover; object-position: 50% 50%;"
       		data-title="TA Timeline Levels Stacked 5 All levels and all annotations"
       		srcset="https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1024x838.webp 1024w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-300x245.webp 300w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-150x123.webp 150w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-768x628.webp 768w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1600x1309.webp 1600w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations-1536x1257.webp 1536w,
       		https://media.example.com/TA-Timeline-Levels-Stacked-5-All-levels-and-all-annotations.webp 1980w"
       		sizes="(max-width: 1024px) 100vw, 1024px">
       		<div class="eedee-background-div__overlay" style="opacity:1;"></div>
       	</div>
       	<div class="slide-content">
       		<p class="has-text-align-center gutenslider-content-initial has-larger-font-size"></p>
       	</div>
       </div>
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Replacing image with cropped version causes srcset references getting
outdated’ is closed to new replies.

 * ![](https://ps.w.org/wp-retina-2x/assets/icon-256x256.png?rev=2597316)
 * [Perfect Images: Regenerate Thumbnails, Image Sizes, WebP & AVIF](https://wordpress.org/plugins/wp-retina-2x/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-retina-2x/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-retina-2x/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-retina-2x/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-retina-2x/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-retina-2x/reviews/)

 * 2 replies
 * 1 participant
 * Last reply from: [abitofmind](https://wordpress.org/support/users/abitofmind/)
 * Last activity: [2 years, 10 months ago](https://wordpress.org/support/topic/replacing-image-with-cropped-version-causes-srcset-references-getting-outdated/#post-16917747)
 * Status: not resolved