Blurry images

I have a png image 200 x 400 px. It is displayed with the tag without any width or height attributes, just as in your example pages. However, when displayed in a browser (Chrome 73.0) it gets blurry. All the images become blurry, why? The broswer setting is 100% size so no scaling occurs.

I can see that there is a retina-logo class to display a @2x image of the logo, which makes it super sharp. I can't find any other retina classes to do the same thing with other images apart from the logo.

I don't wan't to use srcset for a number of reasons so I was thinking more if you had some simpler solution in your template. The way you handle retina logos, for example...

Perhaps even the device-xs class could be helpful if I let the image be the background image of a div. Then using device-xs could be used to determine the proper image to use (having multiple images with different resolutions). How is device-xs defined (screen size etc)? Are there other css classes like this which defines screen size? Where can I read about them in your documentation?

On your page http://themes.semicolonweb.com/html/canvas/responsive.html you explain how to detect screen sizes to make different things visible on different devices. In the table, you list a number of combinations of the four screen size groups, but how do I combine e.g. "Extra small devices" and "Small devices"? Do I just add them like "d-block d-md-none d-none d-md-block d-lg-none"? I just can't see the logic behind the name composition.

The suffix of the classes you mention in your previous post resembles the bootstrap grid classes. But when I look in the bootstrap documentation, the "pixel limits" between them are different. Are the classes you mention in your previous post a Canvas thing? If so, where can i find the docs for it?

Thank you for your patience with my questions, I really appreciate it.

Ok, thanks!