Different photo sizes for different product cards in an online store?

Question

css

The bottom line is this:
Photos are stored in different sizes, one size for grid display, another for display as a list.
They are displayed on the site via the HTML img tag
. In CSS, I registered a media query to rebuild the product card into a list when the browser is narrowed, but I can’t figure out how to replace the image with a smaller one?
I thought about resize in js, but if the user opens the site already in a narrow window?

Answer 1

As an option

.show-img__small {
    display:  block;
}
.show-img__big {
    display:  none;
}
@media handheld, screen and (min-width: 1024px) {
.show-img__small {
    display:  none;
}
.show-img__big {
    display:  block;
}
}

<img src="path/to/image/small" class="show-img__small">
<img src="path/to/image/big" class="show-img__big">

Answer 2

Look towards Ajax

Answer 3

maybe:
html5 < picture >
or or < img srcset="" >
?

Answer 4

So far I've done everything through js without CSS, hung it on the onload and resize functions, I'm waiting for more elegant solutions