Rasterized .png in Photoshop now image is blurry on website

  • 1
  • Question
  • Updated 11 months ago
Hi everyone.  I used a heart from the Photoshop shapes and colored it red, in Photoshop the image is crystal clear and crisp but on the website it is blurry.  The text is clear just the heart is not.  I have saved it as .png as well as saved for web and with both the heart is blurry.  Any suggestions on how to fix this?
Photo of Jarl Jewett

Jarl Jewett

  • 4 Posts
  • 0 Reply Likes

Posted 11 months ago

  • 1
Photo of Max Johnson

Max Johnson, Champion

  • 399 Posts
  • 171 Reply Likes
My first guess is that the heart is being scaled up on your website.... Need way more information. 

How many pixels wide/tall is it in the photoshop file?
How many pixels wide/tall is it after you export?
How many pixels wide/tall is it when it is displayed on the website?
What do you mean by "The text is clear just the heart is not. "? Do you mean you have html text over top of the heart or that you have text in the heart image itself?
Photo of Jarl Jewett

Jarl Jewett

  • 4 Posts
  • 0 Reply Likes
Max below are the answers to your questions:

How many pixels wide/tall is it in the photoshop file?  500 x 540 and 2400 x 2592
How many pixels wide/tall is it after you export?         500 x 540 and 2400 x 2592
How many pixels wide/tall is it when it is displayed on the website?  250 x 270 and 564 x 609

I used two different sizes:  The 500 x 540 is displayed on the web at 250 x 270.  The 2400 x 2592 is displayed on the web at 564 x 609.

I have html text on the heart image itself, red heard white text.
Photo of Cristen Gillespie

Cristen Gillespie

  • 1074 Posts
  • 284 Reply Likes
> .  The 2400 x 2592 is displayed on the web at 564 x 609.>

You're asking the web server to downsample by this much? Because downsampling means throwing away pixels, and while I don't see why a plain heart would look blurry, if there's any detail, it certainly might. Have you tried downsampling the entire image you are exporting to something very close to its intended size on the web? Photoshop has a pretty decent algorithm, but in any event, you'll see something much closer to what you'll get if you give the server a file that's close to the final size.
Photo of Max Johnson

Max Johnson, Champion

  • 399 Posts
  • 171 Reply Likes
Agreed... See what you get when you export at the exact size you want to display. If it is no longer blurry, it is the web browser scaling that is causing the problem.