При изменении размеров изображения в HTML, браузер мылит его, как побороть?

Question

[Леонид]

Если у изображения с исходными размерами, например 300 х 300 пикселей, задать на странице меньшие размеры - браузер уменьшит его - но оно станет смазанным:

<img src="pic300x300.png" width="261" height="261">

Конечно же, можно использовать изображение 261х261 пикселей и тогда никаких проблем не будет - но ведь, например если у нас адаптивная верстка - то изображения тоже уменьшаются вместе с размерами диагонали, элементов на странице и т.д.

Это можно как-то побороть или нет?

Comments

[Alex]

если у нас адаптивная верстка - то изображения тоже уменьшаются вместе с размерами диагонали

Вообще есть, https://developer.mozilla.org/ru/docs/Learn/HTML/M...

[WapSter]

На ретине все отлично, на fullhd действительно немного размываются, не замечал.

[Дмитрий Чайников]

Переведите картинку из растра в вектор, иначе говоря конвертируейте jpeg в svg формат (например, здесь), тогда картинка всегда будет четкой, независимо от разрешения экрана и размера самой картинки.

[Леонид]

Дмитрий Чайников, еврика!!! спасибо! правда что там с поддержкой SVG в современных браузерах?

[Дмитрий Чайников]

Леонид, Есть поддержка почти во всех современных браузерах.