Imagens circulares costumam ter esse problema quando comprimidas, Principalmente pelo fato de não existir "meio pixel". Observe as imagens abaixo.
Imagens em painéis de alta densidade de pixel, como o painel Retina da Apple
Os Browser não renderizam imagens tão bem quanto o Photoshop por exemplo. Então as vezes no Photoshop fica bom, mas o algorítimo do Browser pode não ter o mesmo resultado comprimindo imagens.
Muito provavelmente se sua imagem fosse um quadrado com linhas restas você não teria esse problema de forma tão acentuada.
O ideal seria tratar a imagem em algum software feito para isso. Ou transformar em .SVG. Tratar esse tipo de coisa no browser para mim é gambiarra. Apesar disso você pode tenar usar a classe image-rendering: crisp-edges;
na imagem.
img {
image-rendering: crisp-edges;
}
Aqui tem documentação sobre a classe: https://developer.mozilla.org/pt-BR/docs/Web/CSS/image-rendering
Apesar disso veja como mesmo com ela a image-rendering: pixelated;
renderização nos Browser é diferente.
Chrome:
Safari:
FireFox Quantum:
Você também pode tratar a imagem com JavaScript dentro de um canvas
, como nesse exemplo:
Para testar onde estiver False coloque True no script
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:140px;">
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 0, 0, 400, 200);
};</textarea>
Fonte: https://developer.mozilla.org/pt-BR/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled