Problem in image rendering

Question

The image is all "pixelated" does not look as it should, which can be?

The original image has great resolution and the size is 1200x1200, decrease the size of it also did not change the result

In CSS I’m using

width: 40px; height: 40px;

And in HTML

<img src="images/image.png">

The image looks like this in the browsers

Answer 1

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, example...

The perfect solution is to use vectors, as they are interpreted by browsers as mathematical visual elements, so they will always remain intact at the edges.

It is possible to create vectors from advanced programs like Coredraw and Illustrator, but what I use and recommend is creating/editing vectors with Vectr, because besides being free and online is easy to use...

Answer 2

This happens when resizing the image.

I suggest to edit your image and save at the resolution that will use it.

If it still doesn’t look the right way, the best thing to do is to draw it again in this size that you will use, so you won’t lose any information.

Answer 3

Circular images often have this problem when compressed, mainly because there is no "half pixel". Note the images below.

Images on high pixel density panels, such as Apple’s Retina panel

Browser does not render images as well as Photoshop for example. So sometimes in Photoshop gets good, but the Browser algorithm may not have the same result compressing images.

Most likely if your image was a square with rows left you wouldn’t have this problem so sharply.

The ideal would be to treat the image in some software made for it. Or turn into .SVG. Treating this kind of thing in the browser for me is gambiarra. You can still use the class image-rendering: crisp-edges; in the image.

img {
  image-rendering: crisp-edges;
}

Here is documentation about the class: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Although see how even with her the image-rendering: pixelated; rendering in Browser is different.

Chrome:

Safari:

Firefox Quantum:

---

You can also treat the image with Javascript inside a canvas, as in this example:

To test where False is put True in the 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>

Source: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled