The logo in the Header at the top of every page on my sister's website is actually a 800 x 427 px PNG, but was resized in the page builder by the original developer to 275 x 147 px, which is the size it is being displayed at. The unscaled PNG image is here.
I want to create a smaller (116px high) version of the logo.
If I insert the PNG logo that is in the header into this webpage and then scale it down in the page builder to the dimensions we want, it looks great, as shown below:
If I create a logo of same height by creating a 427px high PNG from the original EPS, upload it to here and then scale it in the page builder to have a height of 116px, then it looks better still – which proves there's nothing wrong with the EPS file I’m working from:
But if I try to create a PNG from the EPS with the dimensions I actually want (116px high) and upload that – rather than creating a much larger PNG and scaling it down in the page builder – then the resulting PNG looks blurred – like this:
Yet the the smaller PNG looks sharp in Photoshop; and if I insert it into a Word document, or an email, or into almost any other application, it still looks sharp – but if I insert it into a webpage it looks blurred, as in the example shown above.
Even if I create a PNG from the EPS of the same size (height 147px) that the logo in the Header is displayed at, and upload that, it still looks blurred, as shown below:
But I should be able to create a PNG from an EPS with the size I want and use that. I shouldn't have to upload a much larger PNG and scale it down in the page builder.
Is there something wrong with the way I'm creating the PNG from the EPS? I've tried dragging the EPS into Photoshop, telling Photoshop what dimensions I want it to have and setting the colour mode to RGB, and then selecting File > Save for Web. That's how I created the blurry ones you see above.
I've also tried Saving for Web directly from Illustrator, with even worse results. Here's an example – even after selecting Effect> Document Raster Effect Settings and change the raster effect o300 ppi, at the suggestion of someone on the Adobe forums:
If the problem isn't the way I'm creating the PNG, then what is causing the problem, and there a better workaround than uploading a much larger PNG than is actually required and scaling it down?
I've now discovered that on my screen, the logo looks sharp if I insert it at 2 x the dimensions I want and then scale it down in the page builder to the dimensions I want it to display at.
But if I insert the logo at 1.5 x the dimensions I want and then scale it down in the page builder to the dimensions I want it to display at, then it still appear fuzzy on my screen. Yet my screen has a DPR of 1.2 at the Display Scale I use, so 1.5 should be sufficient to make it look sharp on my screen. But it isn't.
Below left is the logo inserted at 1.5 x the dimensions I want and then scaled down. Below right is the the logo inserted at 2 x the dimensions I want and then scaled down. The one on the right looks significantly sharper on my screen.