title: Wordpress picks wrong sizes for srcset, resulting in broken urls
body: <p>I want to use responsive images for my Wordpress website. I modified the default image sizes and added some on top in my <code>functions.php</code>:</p>
  
  <pre class="lang-php prettyprint-override"><code>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 );
  
  });
  </code></pre>
  
  <p>That should result in a list of 11 sizes like:
  <code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>600</code>, <code>800</code>, <code>1000</code>, <code>1300</code>, <code>1600</code>, <code>2000</code>, <code>2500</code>
  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 <code>max_srcset_image_width</code> to <code>2500</code>.</p>
  
  <p>So now, when I want to render an image using
  <code>wp_get_attachment_image( $attachment_id, 'large' );</code>
  the magic starts:</p>
  
  <p>Sometimes, the result is almost as expected:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;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" &gt;
  </code></pre>
  
  <p>-> I called for <code>large</code>, which I defined as <code>2000</code> in width, instead I get the <code>1300</code> as default-picked image. And the order ist not really beautiful. But hey, never mind, at least it’s working.</p>
  
  <p>Sometimes, there are not even multiple sizes:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="image2.jpg"&gt;
  </code></pre>
  
  <p>-> But hey, image shows up</p>
  
  <p>Sometimes, a undefined size (like <code>333</code>) gets mingled into the srcset, which is not in the uploads directory and consequently leads to a broken image:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;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" &gt;
  </code></pre>
  
  <p>-> But hey, 11 out of 12 sources work</p>
  
  <p>Sometimes, the weird sizes are taking over:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;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" &gt;
  </code></pre>
  
  <p>-> Only the sizes <code>1000</code> and <code>2000</code> are actually in the uploads folder. All other sizes don’t exist as actual files and cannot be shown in the browser.</p>
  
  <p><em>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.</em></p>
  
  <p>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.</p>
  
  <hr>
  
  <p><strong>Edit:</strong> So it turns out, that the wrong image sizes are coming from the database, stored as <code>_wp_attachment_metadata</code> in the <code>wp_postmeta</code> table. The question is now: How can I update all those information?</p>