Изображение в браузере в масштабе 100% имеет пикселизацию, создайте изображение в масштабе 200%, а масштаб половинного размера будет четким.

Судя по комментариям, проблема в том, что вы просматриваете их на экране сетчатки.

Экраны Retina от Apple отделили фактические пиксели экрана от размеров изображения в пикселях.

До экранов Retina изображение, загруженное в веб-браузере размером 100 x 100 пикселей, занимало ровно 100 x 100 пикселей экрана.

У экранов Retina (это просто термин Apple для экранов со сверхвысоким разрешением) была проблема: если бы они отображали изображения и текст в «фактическом размере пикселя», все было бы слишком маленьким, чтобы его можно было прочитать. Таким образом, экраны Retina пытаются отображать контент того же размера, что и экраны без Retina, но используют для этого больше пикселей.

Итак, для простой математики предположим, что экран Retina в два раза превышает разрешение стандартного экрана.

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

Однако на экране Retina это изображение 100x100 будет занимать 200x200 пикселей экрана. Браузер переводит 100 виртуальных пикселей в 200 реальных пикселей. Для этого он должен компенсировать все недостающие пиксели с помощью интерполяции, которая вызывает размытие, которое вы видите.

Исправление (в этом примере) заключается в том, чтобы сделать ваши изображения размером 200x200 пикселей, а затем изменить их размер в HTML или коде для отображения в размере 100x100 пикселей.

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

У меня та же проблема, и я обнаружил, что причина в том, что я установил масштаб дисплея на 125%.

В Windows 10 над «Разрешением экрана» есть раскрывающийся список «Изменить размер текста, приложений и других элементов». Если я установлю его на 125%, png отлично выглядит в средстве просмотра фотографий, но выглядит размытым в браузере, даже если png НЕ масштабируется в html.

Если я верну масштаб отображения на 100%, тот же png будет хорошо выглядеть в том же html-документе в браузере.

Вы можете применить правило CSS, которое делает 100% изображения еще более четкими при изменении размера. Например, если у вас есть изображение с естественной шириной 1000 пикселей, и оно изменено до 800 пикселей, браузер может отображать изображение с небольшим эффектом размытия/сглаживания.

CSS

.sharpen {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

В этом примере кода я взял ваше 100% изображение и изменил его размер с помощью нового правила CSS: https://codepen.io/doppl3r/pen/YLdQxx?editors=1100 .

Текст на правильном изображении должен выглядеть четче. Чтобы доказать это, измените max-widthfrom 400pxна150px