Everything is blurry upon exporting/saving for web. Trouble with sizing. Photoshop and Illustrator

[michellep33689611]

I've gone through about a million threads on here to find a solution for this because it's been happening on and off for me for years.

The main problem is that when I try to export as a PNG from illustrator, it's blurry. And all I'm doing is opening the image file, I'm not putting it on a site or anything. 

Similarly, if I try to save as PNG, or save for web as PNG OR JPEG from Photoshop, it's blurry in the same way. It's not overwhelmingly pixelated, but all the edges go sharp and I've had clients ask what the deal is. I usually have to pass it to someone else because as far as we can tell our settings are the same and theirs save fine. There's gotta be some background setting that I turned on by mistake because none of the export settings in either Illustrator or Photoshop are the problem. It also doesn't matter if it's set to RGB or CMYK. I have imgur links for my screenshots, but I'm not sure if it'll work. 

The secondary problem is that I'm also struggling to understand how the sizing is working. It's probably connected, but I'm just lost. I noticed this in Photoshop, and you can see in my images that I set the size of my image by the pixel size I want, and 72dpi since everyone is saying that doesn't matter and it will eventually be used on the web, and yet the export preview looks too small, and then when I open the image it looks too big. I am very confused about which is the correct pixel size. If the blurriness is because my photoshop workspace is so much smaller (and therefore looks clearer), how do I work at a similar size so I can see exactly how it will look when I open the image after saving?

Someone has been posting a lot about retina being the problem, but since I'm only opening an image and not putting it anywhere, I don't fully understand how that could be relevant but I also might just not understand retina. Here's the link I've seen her post on most threads:

https://www.danrodney.com/blog/retina-web-graphics-explained-1x-versus-2x-low-res-versus-hi-res/

Also I saw a lot of people say to just save it twice the size and size it down, that's not an option because I still run into the issue of trying to save a file and it's blurry--it doesn't matter what size it is, it will save blurry. I've tried this with something 450px wide and something 1900px wide. Blurry. Also because I haven't put it anywhere yet there's nothing like a website's coding forcing it into a smaller size either.

https://imgur.com/a/dgKPIf2

That link should have 3 screenshots. 1. My new file settings in Photoshop. 2. My save to web settings in Photoshop. The text is a vector from illustrator added in as a smart object. 3. A comparison of the image when I open it vs the save preview (at 100%) in Photoshop.

[Monika Gause]

Please embed screenshots in your post. Thank you.

[Disposition_Dev]

What is the output resolution of your images? "Standard" screen resolution is 72ppi.. at least that was the standard on the old 4:3 tube style monitors.. Most monitors today are FHD (1080p) or higher. Retina pixel density is 218ppi. In my experience, somewhere around 150ppi is a decent compromise between fidelity on a retina screen and file size. 

from your first screenshot, it looks like the new document you're creating is 72ppi. My guess is that means your exported pngs are also 72ppi, and thus would look blurry on a higher resolution screen. When you open the exported pngs in photoshop and inspect it, what is the resolution?

Another possible issue could be the quality/downsampling setting. in your screenshot, it looks like you have bicubic selected. Try different settings here to see if that gives you the result you're after.

[Mike_Gondek]

Your images look good on the 3rd screenshot, so you might be struggling to explain or understand correctly.

Try saving to .svg from illustrator, as that is just type, not a photo needing pixels.

All browsers can display .svg for over 15 years now,  use infinitely Scalabale Vector Graphics. Some lazy software developers won't take .svg, but you never explained how you are posting to web.

[Dan Rodney]

Hi @michellep33689611 I'm Dan Rodney, author of that article you mentioned 🙂 I understand how confusing resolution can be for many people to understand!

Forget about PPI or DPI software setting when it comes to screen resolution, it does not matter. All that matters are two factors:

1. The pixel width of the file
2. How large that file is displayed on your screen, website, app, etc.

For example, if you have a 600px wide image viewed at 600px on your monitor, it will be 1x which was the normal resolultion before high res screens. If you view the same image at 1200px on your monitor the pixels will be enlarged and it will appear pixelated and blurry. If you view the same image at 300px on your monitor it will appear sharper (assuming you have a high-res display, which Apple calls a Retina display). That's because more pixels are packed into a smaller space, making them smaller so you don't see them. If your monitor is NOT a high-res monitor you will not be able to see an improvement because your screen is not capable of displaying that information (like a black and white monitor cannot show color images in color).

Also keep in mind that the hardware pixel size of a high-res monitor is the 2x because it's twice the amount of the software resolution. That's because websites have code referring to the older 1x pixel sizes (which were bigger and the only thing we thought we'd ever have at the time the internet was being created). Now the sofware must double those software referenced pixel values and double them to know how many hardware pixels to use.

Does this help? Is there something else I can explain or help clarify so you can fully understand this?