Почему у картинки добавленной через тег img плохое качество?

Вставил в вёрстку картинку через тег img. Сам файл картинки большого разрешения. Мне нужно, чтобы картинка была

height: 48px;
width: 88px;

Я эти стили в CSS и указал. А картинка сжалась и выглядит плохо и с другими картинками, которым я указал высоту и/или ширину меньше, чем у оригинального файла, падает разрешения и они выглядят "мыльно". Что мне делать, что картинки не выглядели мыльными на разных разрешениях?

В моей вёрстке картинка вот так выглядит: [![введите сюда описание изображения][1]][1] [1]: https://i.stack.imgur.com/V71mI.png

Хотя сам файл разрешением 300*185, т.е. большего, чем мне нужно. Если не указывать в CSS ширину и/или высоту для тега img, то картинка выглядит на своё разрешение и занимает больше места в вёрстке, чем должна.