Multiple Image Sets for Image Display

I am implementing dynamic functions that display different images based on the viewport, I think WP has this functionality, here is my helper code , code  that you can understand, 

PHP Code:

function get_thumbnails($id, $title, $class = null)
{
    $MediaModel = new UploadModel();
    $media = $MediaModel->find($id);

    if ($media !== null) {
        $small_image = base_url('uploads/' . $media['upload_path'] . '/small/' . $media['file_name']);
        $medium_image = base_url('uploads/' . $media['upload_path'] . '/medium/' . $media['file_name']);
        $large_image = base_url('uploads/' . $media['upload_path'] . '/medium/' . $media['file_name']);

        $titleAttribute = !empty($title) ? "alt=\"" . esc($title) . "\"" : "";

        $class = $class ?? '';
        return "<img
            src=\"$small_image\"
            $titleAttribute
            title=\"" . esc($title) . "\"
            class=\"$class rounded-top w-100\"
            style=\"min-height: 250px; object-fit: cover\"
            sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 25vw\"
            srcset=\"$large_image 1200w, $medium_image 600w, $small_image 300w\">";
    }
    return null;
} 


is this the correct way or is there any alternative approach with JavaScript that is better in terms of SEO and performance, after implementing this code I am not seeing any improvements in page speed.

here is my sample page URL , Visit Paros or .. ....