Should I make an app for my website?

I have several different sizes of the same image, and load the best one based on the browser width. Read up on responsive images.

There are several approaches to implementing it. Typically it's done like the article I linked to describes, or using CSS media queries. I'm using React with the Material-UI library, so I use material-ui's withWidth higher-order component. If you look at the image on a landing page I'm working on for a new app, it's rendered using my Friends React component:

import React from 'react';
import {withWidth} from '@material-ui/core';
import {makeStyles} from '@material-ui/core/styles';
import classNames from 'classnames';

const useStyles = makeStyles(theme => ({
    root: {
        position: 'relative',
        textAlign: 'center',
        color: 'black',
        '& img': {
            display: 'block',
            width: '100%',
        },
    }
}));

const Friends = ({width, className}) => {
    const classes = useStyles();

    return (
        <div className={classNames('friends', className, classes.root)}>
            <img src={`/static/images/friends-${width}.jpg`} />
        </div>
    )
};

export default withWidth()(Friends);

I have friends-xs.jpg, friends-sm.jpg, etc in my images folder.