Wordpress picks wrong sizes for srcset, resulting in broken urls

Question

I want to use responsive images for my Wordpress website. I modified the default image sizes and added some on top in my functions.php:

add_action('init', function(){

  // adjusting
  update_option( 'thumbnail_size_w', 300, false );
  update_option( 'thumbnail_size_h', 0, false );
  update_option( 'thumbnail_crop', 0 );

  update_option( 'medium_size_w', 1000, false );
  update_option( 'medium_size_h', 0, false );
  update_option( 'medium_crop', 0 );

  update_option( 'medium_large_size_w', 1600, false );
  update_option( 'medium_large_size_h', 0, false );
  update_option( 'medium_large_crop', 0 );

  update_option( 'large_size_w', 2000, false );
  update_option( 'large_size_h', 0, false );
  update_option( 'large_crop', 0 );

  // adding
  add_image_size( 'i100',  100,  '0', false );
  add_image_size( 'i200',  200,  '0', false );
  add_image_size( 'i400',  400,  '0', false );
  add_image_size( 'i600',  600,  '0', false );
  add_image_size( 'i800',  800,  '0', false );
  add_image_size( 'i1300', 1300, '0', false );
  add_image_size( 'i2500', 2500, '0', false );

});

That should result in a list of 11 sizes like: 100, 200, 300, 400, 600, 800, 1000, 1300, 1600, 2000, 2500 If I upload new images, the get reduced to exactly these sizes, also when I use a Regenerate-Thumbnails-Plugin. Good. I also increased the size of max_srcset_image_width to 2500.

So now, when I want to render an image using wp_get_attachment_image( $attachment_id, 'large' ); the magic starts:

Sometimes, the result is almost as expected:

<img src="image1-1300x867.jpg"
srcset="image1-1300x867.jpg 1300w,
image1-1600x1068.jpg 1600w,
image1-2000x1335.jpg 2000w,
image1-100x67.jpg 100w,
image1-300x200.jpg 300w,
image1-1000x667.jpg 1000w,
image1-200x133.jpg 200w,
image1-400x267.jpg 400w,
image1-600x400.jpg 600w,
image1-800x534.jpg 800w,
image1-2500x1668.jpg 2500w" >

-> I called for large, which I defined as 2000 in width, instead I get the 1300 as default-picked image. And the order ist not really beautiful. But hey, never mind, at least it’s working.

Sometimes, there are not even multiple sizes:

<img src="image2.jpg">

-> But hey, image shows up

Sometimes, a undefined size (like 333) gets mingled into the srcset, which is not in the uploads directory and consequently leads to a broken image:

<img src="image3-1300x1950.jpg"
srcset="image3-1300x1950.jpg 1300w,
image3-1600x2400.jpg 1600w,
image3-2000x3000.jpg 2000w,
image3-100x150.jpg 100w,
image3-333x500.jpg 333w,
image3-300x450.jpg 300w,
image3-1000x1500.jpg 1000w,
image3-200x300.jpg 200w,
image3-400x600.jpg 400w,
image3-600x900.jpg 600w,
image3-800x1200.jpg 800w,
image3-2500x3750.jpg 2500w" >

-> But hey, 11 out of 12 sources work

Sometimes, the weird sizes are taking over:

<img src="image4-700x1050.jpg"
srcset="image4-700x1050.jpg 700w,
image4-333x500.jpg 333w,
image4-250x375.jpg 250w,
image4-768x1152.jpg 768w,
image4-120x180.jpg 120w,
image4-1333x2000.jpg 1333w,
image4-2000x3000.jpg 2000w,
image4-500x750.jpg 500w,
image4-1000x1500.jpg 1000w" >

-> Only the sizes 1000 and 2000 are actually in the uploads folder. All other sizes don’t exist as actual files and cannot be shown in the browser.

Note: I removed other attributes from the html, changed the url for readability. These 4 examples are produced using the exact same code, in the same template file and also with very similar images. But: the weirdness stays the same for each image, e.g. the html for image2 always looks the same.

What can I do to get some order here and avoid broken image links? I think I need to tell Wordpress exactly what sizes to use in the srcset attribute. But I couldn’t find a solution for that.

---

Edit: So it turns out, that the wrong image sizes are coming from the database, stored as _wp_attachment_metadata in the wp_postmeta table. The question is now: How can I update all those information?

Answer 1

There is a solution without using WP CLI.

You can install a plugin called Media Meta & Force Regenerate.

- Download it free through Plugins>Add New
- Press Activate
- Head over to Media Library and select view as a List icon
- then press the REGENERATE button that appears next to each image

Answer 2

Turns out that image sizes and their urls are remembered from the time the image was first being uploaded. Even when image sizes have changed and thumbs were regenerated, the info stored in wp_postmeta stays the same.

The Regenerate Thumbnail Plugins I tried regenerated all the image sizes but didn’t update the image meta data stored in the database. :/

Solution: I installed the WP CLI (also works on shared hosting, your provider possibly has a tutorial how to install and use it). Confirm that it works with wp --info. Then do wp media regenerate to regenerate all images. This also updates the meta info in the database and srcset gets finally rendered correctly.

Install WP CLI

wp media regenerate