I am trying to create multiple image sizes to use for the srcset with $image-resize(). It seems to be only be creating and using some of the sizes. I can see 3 out of 4 sizes in my media folder and the page seems to only 2. Is resize() the wrong thing to use for this? Is there something wrong with my code?
*trying to post my code but the formatting keeps breaking
<div class="carousel">
<?php foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
<div class="mySlides">
<img data-src="<?= $image->url() ?>"
data-srcset="
<?php echo $image->resize(600)->url()?> 600w,
<?php echo $image->resize(858)->url()?> 858w,
<?php echo $image->resize(1000)->url()?> 1000w,
<?php echo $image->resize(1200)->url()?> 1200w"
class="demo lazy" alt="<?= $image->caption()->html() ?>">
</div>
<?php endforeach ?>
</div>What size are your original images?
Maybe you are running into a timeout, have you tried to refresh the page multiple times. If you have a lot of pages with lots of images, that might be what is happening, as the resizing seems to work in general if some images are created.
That’s what I was thinking: if the images are too huge, it’s probably causing a timeout.
I was wondering also whether resize() would still do anything if the images are already smaller than the size requested. Does it automatically upscale, or would it just ignore them?
K2 ignored images that were smaller, I think. Have to check the source code, but not tonight. Sleep time now 
I have 6 pages and only one has photos right now. I have added 2 photos to the page just to try and get it working, there will probably be ~30 per page in the end. Of the two I uploaded one is a horizontal 2000px wide by 1500px tall and one is a vertical that is 1001px wise and 1251px tall. (I need to accommodate multiple aspect ratios within the carousel) The the images are styled to fill the carousel 100% width or height so I uploaded photos the maximum size of the carousel div can be. I tried doing a hard refresh of the page multiple times and that doesn’t seem to be fixing anything.
I tried deleting all the images and re-adding them. I watched the media folder as I refreshed the page and saw it is only created the 1200px image on refresh. I made my browser smaller and did a hard refresh and it created the 858px image, though at that size I expected it to use the 600px image. I thought I created all the images on the first refresh. Is this incorrect?
The (good) browsers don’t pre-load all the images you declare in a srcset - that would kind of defeat the purpose of having the srcset in the first place. The images are only requested by the browser if it thinks it needs them. So, if you open the browser window at a LARGE size, and then reduce the size of the window, the browser often won’t bother to download a smaller image, because it already has a bigger version that it can display to you anyway. If you start with your window SMALL, and the size it up, it will gradually download larger images, as it needs to.
In order to work out exactly what size image it needs, the browser does several calculations in the background. These calculations take into consideration not just the size of the image and the size it needs to fill in the viewport, but also what resolution your device is (if it’s retina, or 4x), and whether you have zoomed into the view (like users often do on mobile). You may think that the browser should only need a 300px image, but because you’re looking at it on a 2x retina screen, and the user has zoomed in, the browser might actually need a 1200px one.
Last of all, as you can image, the browser will request images as it needs them, and Kirby will produce them as it receives the request. If your original image is 2000px wide, and you’re using a high-res retina screen, and the smallest size you’re ever going to display that image is about 500px wide, then it’s likely that your browser will never request anything smaller than the 2000px image - and that might be why Kirby is not producing the smaller versions.
Thank you for the explanation luxlogica!