Image resize without overloading my server

[ttttim]

I was recently experimenting with optimizing my images to get better load results. The code below is an example of what i've been using. It works nicely but the main problem is if i load a page for the first time after having added a few images my server will overload and return a 503 error. I have to refresh the page a few times for the server to resize all the images. Not a big problem while developing but not something I want on my live website. 

<picture>
	<source media='(max-width: 320px)' srcset='{$image->width(320)->url} 1x, {$image->width(640)->url} 2x'>
	<source media='(max-width: 375px)' srcset='{$image->width(375)->url} 1x, {$image->width(750)->url} 2x'>
	<source media='(max-width: 767px)' srcset='{$image->width(750)->url} 1x, {$image->width(1500)->url} 2x'>
	<source media='(max-width: 1023px)' srcset='{$image->width(300)->url} 1x, {$image->width(600)->url} 2x'>
	<source media='(max-width: 1319px)' srcset='{$image->width(450)->url} 1x, {$image->width(900)->url} 2x'>
	<source media='(min-width: 1320px)' srcset='{$image->width(510)->url} 1x, {$image->width(1020)->url} 2x'>
	<img src='{$image->width(1056)->url}' alt='$image->description'>
</picture>";

Is there a way to create these different sizes without overloading my server? 

Ideally i'd like to expand the above code with webp support and a service like tinyPNG to reduce image size even further, but that would stretch the first load time even further. 

[BitPoet]

You could adapt and try out the code in this post:

 

[horst]

... more links, to newer code snippets: