"For Responsive Images  there is a Drupal way that we need to set  responsive images styles and Assign that responsive image style to an image field".

for this lets understand the browser problem in the web development first .

In web development By default browsers does not know nothing about what sized images need to be rendered with respect to a different devices   size (Mobile, Tablet, Desktop)  until the CSS and Java scripts are loaded. so we need to tell to browser via choosing some attributes (sizes and srcset ) of picture element.

Drupal 9 has done a great job in providing the responsive images module in core and provide a configuration like "Responsive image style".

Responsive image style selection do same work for you and based on devices size this will help the browser download lower-sized images for devices with lower screen resolution, resulting in better website load time and improved performance.

What are breakpoints: Define different screen sizes in CSS, called breakpoints.  

Breakpoint module reads themename.breakpoints.yml or modulename.breakpoints.yml file and adds them to the site's configuration under  https://[your_domain]/admin/config/media/responsive-image-style/[your_responsive image style]

 

Scale

Image scaling refers to the resizing of a  image.

Scale  up : Increase the width and height.

Scale  down: Decrease the width and height.

Crop: Crop can be defined as “to trim” . 

Viewport: Viewport is the size browser window.

1vw = 1% vw.

Step 1: Enable  two core module (Responsive images and breakpoint) .

Step 2: If you are using a custom theme then define the breakpoints in the "yourthemename.breakpoints.yml" file.

Step 3: Creating a responsive image style .

Step 4: Assign the responsive image style to an image field.

 

Go to /admin/config/media/image-styles and Click on 'Add image style'.