сделать обычный HTML веб-страницы хорошо выглядеть на HiDPI и обычные экраны

Question

я заметил на моем 4К-монитор, что шрифты выглядят хорошо, но много изображений на веб-сайтах, выглядят смазанными с помощью Chrome или Firefox.

Как сделать веб-страницу HTML (может быть, с тривиальным JavaScript) выглядеть красиво на всех мониторах, например. предоставляя два изображения:

1. Для обычных мониторов (100%) и

2. Для HiDPI мониторов (200%)?

Answer 1

Быстрое и простое решение - использовать только одно изображение, большее, чем требуется. Например:

Есть недостатки:

1. больше данных, передаваемые и более длительное время загрузки
2. Некоторых старых браузеров могли бы сделать изображения не -точного размера размыто

Есть еще малоосновные решения с несколькими изображениями, они обычно требуют дополнительного кода и библиотек javascript. С помощью всего лишь нескольких легко сжимаемых изображений это решение может быть меньше во время загрузки.