score:2

Accepted answer

try to use css instead of js to show different images based on the screen width.

<header class="header">
    <img src="./images/small.png" classname="small-screen-logo" alt="logo"/>
    <img src="./images/regular.png" classname="large-screen-logo" alt="logo"/>
</header> 

display a small screen logo, if the screen size is more than 768px display the bigger screen logo

.small-screen-logo {
    display: block;
}

.large-screen-logo {
    display: none;
}


@media (min-width: 768px) {
    .small-screen-logo {
        display: none;
    }

    .large-screen-logo {
        display: block;
    }
}

if you use bootstrap you can achieve it with bootstrap classes:

<header class="header">
    <img src="./images/small.png" classname="d-block d-md-none" alt="logo"/>
    <img src="./images/regular.png" classname="d-none d-md-block" alt="logo"/>
</header> 

suggested reading https://developer.mozilla.org/en-us/docs/learn/css/css_layout/media_queries

in case you want to use js you can add a method logo instead of changelogo(logo).

logo() {
    return './images/' + (this.state.winwidth < 768 ? 'small.png' : 'regular.png') + '.png';
}

then use it in render as following:

<img src={logo} alt="logo"/>

score:2

use srcset in image tag to specify different src for different screen size:

<img srcset="https://placekitten.com/768/768 768w,
             https://placekitten.com/1366/1366 1366w"
     sizes="(max-width: 768px) 768px,
            1366px"
     src="https://placekitten.com/1366/1366" alt="placeholder kitten">

use srcset to declare multiple sources of image, sizes to define which src is to be used in which condition.

link to mdn docs for further reading.


Related Query

More Query from same tag