WP Вывод изображения записи. Зачем так много вариантов

Недавно инспектировал сайт на WordPress и попался мне такой вівод изображния записи.

<div class="acf-af-side-by-side-numbers-and-carousel__image-list-item active" data-image-item="1" style="z-index: 3; right: calc(200px); bottom: calc(0px);">
                    <img decoding="async" src="https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1.png" width="447" class="acf-af-side-by-side-numbers-and-carousel__image entered lazyloaded" data-lazy-srcset="https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1.png 447w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-242x300.png 242w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-48x60.png 48w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-165x205.png 165w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-200x248.png 200w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-284x353.png 284w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-322x400.png 322w" data-lazy-sizes="(max-width: 447px) 100vw, 447px" alt="" data-lazy-src="https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1.png" data-ll-status="loaded" sizes="(max-width: 447px) 100vw, 447px" srcset="https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1.png 447w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-242x300.png 242w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-48x60.png 48w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-165x205.png 165w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-200x248.png 200w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-284x353.png 284w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-322x400.png 322w"><noscript><img decoding="async" 
            src="https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1.png" 
            width="447" 
            class="acf-af-side-by-side-numbers-and-carousel__image" 
            srcset="https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1.png 447w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-242x300.png 242w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-48x60.png 48w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-165x205.png 165w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-200x248.png 200w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-284x353.png 284w, https://static.tytocare.com/wp-content/uploads/2022/10/Mask-group1-322x400.png 322w" 
            sizes="(max-width: 447px) 100vw, 447px" 
            alt="" 
        ></noscript></div>

К сожалению, не получилось у автора сайта спросить зачем так много альтернативных вариантов изображения и как они должны работать, но возможно тут смогу получить объяснение?

*лично я при выводе изображений запити пользуюсь вот таким кодом

<?php $post_id = $post->ID;
$img = get_the_post_thumbnail_url($post_id);
if (!$img) {
        $img = get_template_directory_uri() . '/images/no-image/min.svg';
} ?>

<img class="post_img" src="<?php echo $img ?>" width="320" height="400" alt="<?php echo $title ?>">

Может кто-то объяснить, зачем выводить изображения так как показано в первом примере, и как это реализуеться? Ведь насколько читал из документации, то WP сам наризает размеры изображений при загрузке, но они обычно меньшего формата чем загружаемое изображение. (Settings\Media)