Why are my images pixelated in MS Edge only?

Hi, I am having an issue with the edges of some of my images being pixelated. This only happens in MS Edge, not FF or Chrome. The images are setup to serve a 1x pixel ratio image to desktop screens and a 2x pixel ratio image to mobile screens. I’m not sure why they are pixelated on desktop MS Edge browser only. Any ideas would be greatly appreciated.

The images are section 8 of this homepage.

I have a strange feeling of Déjà vu.

1 Like

Yeah, it was a topic before that I thought I fixed, but apparently didn’t. FF is now fixed but Edge is a still a problem. I thought maybe someone else would have a fresh perspective.

As you made the images can you save them as an SVG as suggested in your first thread and see what they look like?

1 Like

Unfortunately this is a WP site and I cant get SVG’s to work despite trying a number of ways to incorporate them via WP methods.

One thing I notice is the images are still not displaying at their native size. They are out by one pixel.
The images are 111 x 111 px, but being displayed at 110 x 110 px, so a little scaling does occur.

1 Like

Thats a great catch Sam. When I investigated, only the first image, the magnifying glass was 111 x 111 px. It has been corrected. The other four images were correct already at 110 x 110 px.

FYI did you search the WordPress plugin repository for SVG image support via a plugin? For example, this one (SVG Support) is up-to-date (although I haven’t tested it).

I did a little reading on SVG after my post and it seems they are very insecure. But if you are not allowing users to upload I assume they should be safe.

In what way?

You can add code within the file: https://bjornjohansen.no/svg-in-wordpress

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="18.4" r="18.4" fill="#f00" />
<script>
 alert( 'Well, hello there!' );
</script>
</svg>

Copied from the site I linked to above

The site also links to a SVG Sanitiser but it is only supposed to be a “proof of concept”.

1 Like

I never really considered this, as I usually make my own svgs and I don’t work with WP (if I can help it).
Though on add occasions of laziness I have downloaded svg icons from the net to use on sites, so this is worth bearing in mind, to always cast a scrutinising glance over the code before using any from a third party source.

1 Like

I have tried them, for some reason I can get them to upload an svg.

I noticed something that perhaps someone could give me insight. As mentioned, Im loading one image for a 1x screen and one image for a 2x screen. In the below screenshot, it shows the image as 110x110 pix which is right because this is a 1x screen, but it says (Natural: 300 × 300 pixels). Meaning natural size? Because one image is natural 110 x110 and the other is natureal 600 x 600. Also, it shows this:

currentSrc: http://work.modovis.com/wp-content/uploads/2015/12/Process-CMIcon600.png.

Is the that what is actually being loaded? Is my script wrong?

Srscet allows the browser to choose which image to load and I believe in this case you probably had the developer tools opened in device mode when you first loaded so the 600x600 image was loaded for double density.

If you then go out of device mode and back to desktop the browser will look at the srcset and see that **you already have the 600x600 in cache ** so there is no point in going and fetching another image even if it is smaller as that would be a waste. I believe it is showing it as 300x300 natural because it assumes the 2x is double density and thus halves it.

Most of the above is just guesswork but I get the same results on Chrome when I follow the above. If I click refresh on desktop then the image shows 111x111 natural size for the 110x110.

Unlike the picture element the srcset leaves the decision making to the browser and of course browsers may vary but it makes it easier in the long run as the browser chooses the best image from those provided based on resolution and whatever may already be in cache etc.

Thank you for the explanation Paul, that makes sense. I thought it may be a clue to my original problem but I guess Ill keep investigating.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.