как указать другое изображение в css в зависимости от того, посещает ли пользователь настольный компьютер или мобильный браузер

Просто вопрос о css для мобильных устройств,

i у меня есть изображение шириной 1260 пикселей на моем веб-сайте, и когда я смотрю на него по телефону, оно портит веб-сайт, поскольку остальная часть веб-сайта основана на макете 960 пикселей.

Я сделал эти изображения шириной 960 пикселей для мобильное устройство, но как мне указать в css, что если это мобильное устройство, используйте оптимизированное для мобильных устройств изображение вместо изображения на обычном веб-сайте.

Так что в основном, если пользователь переходит на bsite на настольном компьютере покажет изображение размером 1260 пикселей

, а если они посетят веб-сайт на мобильном устройстве, он отобразит изображение размером 960 пикселей

есть идеи, ребята?