Почему качество изображения увеличивается с увеличением разрешения?

Question

В моем HTML-документе есть элемент img, ширина которого составляет около 100 пикселей.

Вывод, когда я устанавливаю источник для изображений различной ширины, которые я меняю каждый раз:

17000 px:

2000 px:

500 px:

100 px:

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

Answer 1

Вы берете это как скриншоты?Я думаю, что изображение выглядит менее четким, потому что у вас низкое разрешение при их отображении.Например, область отображения изображения на мониторе имеет более низкое разрешение, чем само изображение.Таким образом, увеличив область, отображаемую на экране, ваш монитор сможет более точно отображать изображение.

Подумайте об этом так: отображение обоев 4K на дисплее 720p будет выглядеть не так хорошо, поскольку монитор должен масштабировать егоdown.

Слегка связанное чтение с изменением размера изображения браузера: https://petapixel.com/2009/11/12/why-you-should-never-let-browsers-resize-your-photos/