The purpose of doing this is for the images to be displayed well in all browsers.

Thanks for your help.

Every website is made up of three different components (HTML, CSS & JavaScript).

1. HTML allows to display Text in Webpage.
2. CSS (Cascading style sheet) allows to design every component in webpage.
3. JavaScript adds various functionality and makes webpage interactive.

In order to show different images and layout according to the user’s screen dimension you can use Media Queries.

Media Queries is module of CSS which helps us to define styling rules for webpage components according to users’s screen dimension.
For example
the header image of website is breaking for iPhone user so I will add a media query for iPhone users.

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
{
    .headerimg {
        background-image:url("wp-content/uploads/2017/12/small-header.jpg");
    }
}

for more details regarding Media Query you can refer below URL
https: //www.w3schools.com/cssref/css3_pr_mediaquery.asp
https: //www.w3schools.com/css/css_rwd_mediaqueries.asp

Media Queries also need to be added after any other references to the css selectors inside the media query. CSS rules are overwritten by rules that are placed later in the css file.

For example:
.headerimg {background-color: #000; } <- this rule would be ignored
.headerimg {background-color: #F00; }

now paste your media queries in the additional CSS section and hit the Publish Button on the top right side of the additional CSS section.

CSS code added in Additional CSS section wont fade away even if you update your theme.

Hope that helps,
Regards,
Ratnesh