Image rendering problem

When compressing the image, it will lose quality, even if it is good, it happens in all formats that use pixels, example bmp , jpeg , png ...

Because this type of construction only works well in certain distances and sizes, depending on the compression, the browser will not be able to calculate the curves and the pixels will be exposed, for example ...

Theperfectsolutionistousevectorsbecausetheyareinterpretedbybrowsersasmathematicalvisuals,sotheywillalwaysremainintactattheedges.

YoucancreatevectorsfromadvancedprogramslikeCoreDrawandIllustrator,butwhatIuseandrecommendiscreating/editingvectorswith Vectr , besides being free and online it is easy to use ...

This happens when you resize the image.

I suggest editing your image and saving it already in the resolution that will use it.

If it still does not look great, the best thing to do is draw it again in this size you will use, so you will not lose any information.

Circular images usually have this problem when compressed, mainly because there is no "half-pixel". Look at the images below.

Imagesinhighpixeldensitypanels,suchasApple'sRetinapanel

BrowsersdonotrenderimagesaswellasPhotoshopforexample.SosometimesinPhotoshopitlooksgood,buttheBrowseralgorithmmaynothavethesameresultcompressingimages.

Mostlikelyifyourimagewasasquarewithlinesleftover,youwouldnothavethisproblemsosharply.

Theidealwouldbetotreattheimageinsomesoftwaremadeforit.Orturninto.SVG.Treatingthiskindofthinginthebrowserformeisgambiarra.Youcanstillusetheimage-rendering:crisp-edges;classintheimage.

img{image-rendering:crisp-edges;}

Hereyouhavedocumentationabouttheclass: link

In spite of this, you can see how even with it%% of rendering in Browser is different.

  

Chrome:   

Safari:

  

FireFoxQuantum:  

YoucanalsotreattheimagewithJavaScriptwithinimage-rendering:pixelated;,asinthisexample:

TotestwhereFalseputTrueinscript

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>