Images Responsive

Hi Leo,

I am using the code you suggested to me,
to distinguish images for the mobile version and those for the desktop version. For example :

<img src="https://DESKTOP-IMAGE-URL" class="hide-on-mobile">
<img src="https://MOBILE-IMAGE-URL" class="hide-on-desktop hide-on-tablet">

On some pages, however, if I have many images, having to load two (one for the desktop version and the other for the mobile version), the pages start to weigh down.

In these cases I would like to use the other method explained here:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

@media (max-width: 768px) {
    /* CSS in here for mobile only */
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
}
@media (min-width: 1025px) {
    /* CSS in here for desktop only */
}

However I cannot understand how to use it, could you explain to me how to do it?
Thank you

The two methods are actually the exact same thing.