Based on the comments, it appears the issue is that you are viewing these on a retina screen.
Apple's retina screens have decoupled the actual pixels of the screen from the pixel dimensions of the image.
Prior to retina screens, an image loaded in a web browser that was 100px x 100px would take up exactly 100x100 screen pixels.
Retina screens (which is just Apple's term for super-high-resolution screens) had a problem where if they rendered images and text at 'actual pixel size' everything would be way too small to be legible. As such, retina screens attempt to render content at the same size as non-retina screens, but use more pixels to do so.
So for easy math, let's say a retina screen is twice the resolution of a standard screen.
If you create a 100x100 image and view it on a normal screen, it will look sharp as each image pixel uses one screen pixel.
On a retina screen, however, that 100x100 image will take up 200x200 screen pixels. The browser translates the 100 virtual pixels into 200 real pixels. To do so, it has to make up all the missing pixels via interpolation which causes the blur you see.
The fix (in this example) is to make your images 200x200 actual pixels, then size them in your HTML or code to render at 100x100 pixels.
On a normal screen, it will look the same. The extra pixels are just thrown away. But on a retina screen, it will now look sharp as each image pixel is now using one screen pixel.