Homepage Image optimization

[alguerocode]

we want to optimize image by use a technique

code
src/components/home/categories/category-card.tsx

    return (
        <div className={clsx(styles.card, randomColor)}>
            <img src={'/img/categories/' + img_filename} />
            <h3>{title}</h3>
            <p>{description}</p>
            <Link to={'test'} className={clsx(styles.linkButton, randomColor)}>
                start discover
            </Link>
        </div>
    )