My website Logo is Blurred

[GlennMartinez]

Hi,

I created a logo for my website in Photoshop in 300dpi. When I export image in PNG and upload, it's getting blur. I don't know why logo is blurry. Kindly let me know where I am doing wrong?

Here's site URL in which you can see the logo clarity. (Removed by moderator)

Looking forward for response,

Kind Regards,

Glenn

[Mylenium · Accepted solution]

I created a logo for my website in Photoshop in 300dpi.

The web doesn't run on 300 dpi, only absolute pixels. Simply create the image at the exact size that is required to avoid server-side resizing or browser-based scaling.

Mylenium

[GlennMartinez]

Thank you for reply.

Sorry I wrote mistakenly 300dpi, I checked it's 72dpi.

[Bojan Živković]

Here is your image https://www.whatsappplusapp.com/wp-content/uploads/2019/06/GB-WhatsApp-Download-1170x508.jpg Clearly it is JPG file, not PNG. It is heavily compressed from what I see.

[GlennMartinez]

Thank you for reply,

the image you mentioned is not a logo, it's post thumbnail, and the image is .png format. I attached the image of logo below.

[Test Screen Name]

The screen shot from Photoshop does not match the image. The screen shot is a rectangle with lots of white space above and below the logo. But the image info shown is for an image without white space.

Please post the actual image in Photoshop, and the dialog used to save or export PNG.  Your PNG file opened in Photoshop shows this:

which clearly shows an image without white space that is 351 x 51 px - completely different from your screen shot which has white space and is 1600 x 1200.

Also, I must say, your image, viewed on your web site does not look blurry to me. It just has a normal amount of antialiasing appropriate to the design.

[GlennMartinez]

I uploaded the screenshot for letting Mylenium know that image is not 300dpi it's 72 dpi.

Image is pixelated when I zoom, like 150%

[Test Screen Name]

That screen shot from Photoshop is obviously not the same image.

[Test Screen Name]

Also, don't zoom! Of course it is pixellated, it is made of pixels - and when you zoom in you will see them.

[GlennMartinez]

Is there any way not to pixelate the image?

My 2nd Question, I create thumbnail and resize images in Photoshop, My resize method is;

Go to file ---->> Export ----->> Save for Web, Preset High and Quality 60. With this setting images are little low quality. Kindly tell me the settings that reduce the images size but don't effect good quality. 

[Kenneth Kawamoto]

Kindly tell me the settings that reduce the images size but don't effect good quality. 

The image quality and the file size have relative relationship - as you increase the JPEG quality towards 100, the file size also increases. You’ll need to find a good middle-ground. You can also try PNG instead.

[Wayn22319958e369]

I am exactly Facing a such issue but mine is bit different that when I am uploading feature image it got resized automaticlly and cannot get fit on site.
If you have experience then please help me in this .... Here,s site URL (Removed by moderator)

Hope for positive response on it.

Wayn

[Wayn22319958e369]

I am exactly Facing a such issue but mine is bit different that when I am uploading feature image it got resized automaticlly and cannot get fit on site.
If you have experience then please help me in this .... Here,s site URL for your consideration. (Removed by moderator)

Hope for positive response on it.

Wayn