Use CSS generated from Sass media query variables and responsive queries to use a different, larger image when the screen width changes from small to large.
The code below shows the markup that defines the image. In this example,
bulletlist is a CSS class generated from the Sass responsive variables and media queries.
<div role="img" class="oj-icon bulletlist" title="bulleted list image"></div>
The following image shows the
bulletlist CSS class. When the screen is small or medium size, the
icon_small.png image loads. When the screen increases to large or larger, or to print, the
icon.png loads instead.
The Oracle JET Cookbook includes the Sass variables and queries used to generate the
bulletlist CSS class. You can also find a Sass mixin that makes generating the CSS easier, but you are not required to use SCSS to create responsive CSS images.
In addition, the Oracle JET Cookbook includes examples that show high resolution images, sprites, button images, and more. For details, see Responsive CSS Images.