Pixels becomes blurry

Blurriness usually happens if you’re enlarging a small image to 300×300 or resizing without proper resampling.

Try this:
(a) Start with a high-resolution original image.
(b) Go to Image → Image Size, enable Resample, and choose Bicubic Sharper (for reducing) or Preserve Details (for enlarging).
(c) Apply light sharpening after resizing.

We had the same issue with our law firm website logo appearing pixelated at 300×300, and fixing the source resolution plus proper resampling solved it.

First of all, any resampling will soften an image, no exception.

Secondly, 300 x 300 pixels is an extremely small image even by web standards. In fact, that’s more a thumbnail than an image. There just isn’t a lot of pixels to go around.. That also means the inevitable softening will be that much more obvious. The standard way to deal with that is careful resharpening after the downsampling.

If you view this zoomed above 100%, several screen pixels will be used to display one image pixel. At 400%, 16 screen pixels will be used to display one image pixel. You really must see such a small image at 100% and not bigger. That will be small because it is small.

In other words, it sounds like you’re simply up against the limits of a very small pixel image.

At which magnification are you viewing the »blurry« image? 

Could you please post a screenshot taken at View > 100% with the pertinent Panels (Toolbar, Layers, Channels, Options Bar, …) visible? 

The original is 960 x 960 px.