Highlighted

PNGs exporting blurry

New Here ,
May 25, 2020

Copy link to clipboard

Copied

My PNGs are blurry no matter what I do! Please help me!
I created my logo the exact size I wanted it for my site 185px x185px. I do not zoom in when looking at it. I've tried both 72 dpi and 144dpi. Export for web, Export for the screen, Export as, etc. I know rastering a vector isn't perfect but I also know what a good high-quality png looks like. This isn't it.

 

edit: I also have a retina screen, if that matters.

 

The first image I uploaded is a screenshot of my working file. On the left is the vector in illustrator. On the right is the exported PNG brought back in illustrator. It looks horrible.

The second is my saved PNG file.

The third is how it looks on my website.

The forth is what I want.


I've looked up multiple threads on this issue and seen this problem isn't unusual but I found no solution. The only solution I potentially found is upload in way higher quality and then shrinking it using CSS on your site, but I am using a Wordpress template and don't know how to do that. 

Topics

Import and export

Views

409

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

PNGs exporting blurry

New Here ,
May 25, 2020

Copy link to clipboard

Copied

My PNGs are blurry no matter what I do! Please help me!
I created my logo the exact size I wanted it for my site 185px x185px. I do not zoom in when looking at it. I've tried both 72 dpi and 144dpi. Export for web, Export for the screen, Export as, etc. I know rastering a vector isn't perfect but I also know what a good high-quality png looks like. This isn't it.

 

edit: I also have a retina screen, if that matters.

 

The first image I uploaded is a screenshot of my working file. On the left is the vector in illustrator. On the right is the exported PNG brought back in illustrator. It looks horrible.

The second is my saved PNG file.

The third is how it looks on my website.

The forth is what I want.


I've looked up multiple threads on this issue and seen this problem isn't unusual but I found no solution. The only solution I potentially found is upload in way higher quality and then shrinking it using CSS on your site, but I am using a Wordpress template and don't know how to do that. 

Topics

Import and export

Views

410

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 25, 2020 0
Adobe Community Professional ,
May 25, 2020

Copy link to clipboard

Copied

You need to export them at exactly the size you use them on the web.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2020 0
New Here ,
May 25, 2020

Copy link to clipboard

Copied

As I said in my original post " I created my logo the exact size I wanted it for my site 185px x185px."

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2020 0
Adobe Community Professional ,
May 25, 2020

Copy link to clipboard

Copied

Are you really sure the HTML/CSS code doesn't scale the letters? Because it looks like that is what's happening.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2020 0
New Here ,
May 25, 2020

Copy link to clipboard

Copied

I'm sure there has been no size change. The logos are exactly the same size

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 25, 2020 0
Adobe Community Professional ,
May 26, 2020

Copy link to clipboard

Copied

Please assign proper names to your files and refer to them by name. I'm not sure which is the first or the second or whatever. But one thing is clear: they are not the same size.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 26, 2020 0
Adobe Community Professional ,
May 26, 2020

Copy link to clipboard

Copied

Your export looks fine in Photoshop at 100%.

Which means that on my Retina screen, every pixel in the image is represented by one pixel on screen.

The other results you show, show the same image at twice the size, every image pixel is represented by 4 pixels on screen, which makes it blurry.

Try in Photoshop to show your image with export for Screens to see what happens.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 26, 2020 0