Exported PNG from Photoshop is Blurry

[RickPatton]

I'm creating a reasonably large image in Photoshop in which there are several rectangles (just made with the Rectangle Tool). I have vector tools set to snap to the pixel grid, and even just by zooming in, I can see that the shapes are aligned with the grid:

In the Export Preview, it shows as perfectly sharp:

However, upon exporting to PNG, I get this much more blurry version:

I'm exporting at 100% scale from a 300 PPI image.

I don't understand why the compression algorithm would do this when the original image is so simple: all rectangular vector shapes in flat colors. Is there some way to avoid this? Would Illustrator or some other program not have this issue? (I'm only using Photoshop because I'm most familiar with it)

[Trevor.Dennis]

You say you are 'Exporting' the files.  Do you mean that literally, or are you 'saving' them?  I think you might mean the latter because you mentioned 'compression.

I am completely unable to duplicate your result after trying Quick Export, save as with the different file size options.  They all remain perfectly sharp when reloaded into Photoshop and viewed with hign zoom ratios

Can you be more specific about your workflow, and how you are viewing the saved files?

[Dan Rodney]

PPI does not matter for web export (only pixel width/height matters), but it looks as it the blurry version is being resized during export. That would cause Photoshop to resample (recalculate) the pixels. Do not change the size or resolution during export, just keep the same settings.

[Stephen_A_Marsh]

@RickPatton 

Please post a screenshot of your Export settings, what pixel dimensions is the output compared to the input?

That final screenshot clearly shows resampling.

Where are you viewing the final exported files and at what magnification?

[RickPatton]

Here are the export settings: 

The exported image has the exact same pixel dimensions as the original.

I've tried a bunch of different options for resampling (I've suspected that might be the issue), but I can't find a way to export without resampling. Even "Preserve Details" results in blurriness. 

[Stephen_A_Marsh]

Thanks, I was hoping to spot something in the screenshot but didn't.

Can you compare output to PNG using Save As and Export Save for Web (Legacy)?

[RickPatton · Accepted solution]

Okay, I've figured it out:

The image still appeared sharp after saving/exporting so long as it was viewed in a photo editor of some kind (I tested it in Krita, PS, and even MS Paint) - it's just when it was viewed in Windows' default Photo app that it appeared blurry. It also appeared blurry when applied as a texture in a game engine (which was my ultimate goal). However, the engine itself was applying its own compression algorithm to the image. 

I thought that because it was appearing blurry in the Windows app, that meant the image was exporting blurry. Apparently, the Windows Photo app also applies some sort of compression (not sure why it would, but there it is). After I disabled the compression in the game engine, the texture appeared as sharp as it did in the photo editors. 

TL;DR - It wasn't a problem with Photoshop at all, it was a problem with the programs I was viewing the exported image in.

Thanks for prompting me to the point where I could figure it out, @Stephen_A_Marsh! 

[Tyrone Donquavious]

This issue affects me in Unreal Engine, not sure how to fix it though. Any pointers?