How to specify the image for IMG Tag depending on the browser width for Wordpress

example.php

<?php
/**
 * This needs to be investigated for the case the image comes from Advanced Custom Field, Toolset, Featured Image etc.
 *
 * This example shows the actual image used on the browser depends on "sizes" attribute
 * even though each IMG Tag refers different image file at "src" attribute.
 *
 * Wordpress creates three thumbnails from the original image when we upload it via Media Library.
 * If the image width is smaller than the three sizes, it creates only the ones smaller than the image
 * (e.g. If the image has 700px width, only two thumbnails (150px and 300px) are created).
 *
 * So all the images displayed with IMG Tags should be ideally uploaded as having wider than 768px:
 * (or wider than "Large") to pass GTmetrix.
 *
 * What that means is that following files should be ideally provided as having the width wider than 768px
 * - Images provided by Client
 * - Example Images in PSD Files
 *
 * The image displayed on the desktop width must not be rescaled much
 * (e.g. The image with 800px width should not be displayed within the container element with 400px width
 *  because GTmetrix (Google) decreases the score for that situation).
 *
 * Breakpoints for Bootstrap
 * sm:  540px
 * md:  720px
 * lg:  960px
 * xl: 1140px
 *
 * Image Sizes
 * 150x150
 * 300x300
 * 768x768
 * 1000x1000 (Original)
 */
$attr = [
    'class' => 'w-100',
    //'sizes' => '(max-width: 767px) 768px, 150px',
    'sizes' => '(max-width: 767px) 768px, 300px',
];
// This ID is found as part of the URL when seeing the image at Media Library,
// but the real code would be getting it via Post(s)
// (Attachments (Images) are actually stored as Post Data as well)
$attachment_id = 12;

?>
<div class="wrapper" id="page-wrapper">
	<div class="container" id="content">
		<div class="row">
            <div class="col-12 col-sm-6 col-md-3">
<?php /*
The function "wp_get_attachment_image()" generates the following:
<img width="xxx" height="xxx" src="xxx" class="w-100" alt="" sizes="(max-width: 767px) 768px, 300px" srcset="https://xxx/wp-content/uploads/xxx-150x150.png 150w, https://xxx/wp-content/uploads/xxx-300x300.png 300w, https://xxx/wp-content/uploads/xxx-768x768.png 768w, https://xxx/wp-content/uploads/xxx.png 1000w">

Although "srcset" provides 4 types of images according to the container width, it gets picked from only 2 of them due to "sizes" attribute
(The one for 768pw or 300w).

Ideally, we should amend "srcset" to have only 2 images, but this is aiming to avoid GTmetrix to give us lower score and we usually have the concept design
for desktop devices and mobile phones so this would be good enough (We can do this by adding the array key 'srcset' to $attr if necessary).
*/ ?>
                <?php echo wp_get_attachment_image($attachment_id, 'thumbnail', false, $attr); ?>
            </div>
            <div class="col-12 col-sm-6 col-md-3">
                <?php echo wp_get_attachment_image($attachment_id, 'medium', false, $attr); ?>
            </div>
            <div class="col-12 col-sm-6 col-md-3">
                <?php echo wp_get_attachment_image($attachment_id, 'large', false, $attr); ?>
            </div>
            <div class="col-12 col-sm-6 col-md-3">
                <?php echo wp_get_attachment_image($attachment_id, 'full', false, $attr); ?>
            </div>
	    </div>
    </div>
</div>