1

I am editing some photos for a website that has text in it, when I upload them onto the site the text looks blurry, but when I pop the images open to being larger the text looks crisp and I am not sure why.

They are PNG since they are not clean lines on the edge so I need some transparency on the edges. smaller :blurry" text

Has this happened to anyone? or does anyone have any suggestions? enter image description here

Improve this question
4
  • It might just be because the browser uses a quick downscaling method. Have you tried in different browsers?
    – Wolff
    Aug 27, 2018 at 16:21
  • I usually use chrome, but tried on safari and it looked the same
    – Hannah Baker
    Aug 27, 2018 at 17:03
  • Try Firefox and maybe Edge also. I think Safari uses the same downscale algorithm as Chrome.
    – Wolff
    Aug 27, 2018 at 19:43
  • yea but the prob is a majority of people will use chrome or safari so I need it to work on them as well
    – Hannah Baker
    Aug 28, 2018 at 10:08

3 Answers 3

Reset to default
2

The image appears to have been scaled down, or you are not viewing it at 100%. Check the zoom level in Photoshop, and set it to 100%. That may be enough to fix it.

If you need to scale the image smaller to fit in another image, or to make a smaller image for a website, then in Preferences > General tab, set the image interpolation to "Bicubic Sharper (best for reduction)".

Copy and Paste the image, then hit CTRL+T and scale the image.

The result is better

enter image description here

Improve this answer
5
  • Both of these images are from when I uploaded the image onto the website, same file, just one is the basic view on the site and the other is when you pop the image out to view larger
    – Hannah Baker
    Aug 27, 2018 at 13:41
  • 1
    @HannahBaker Then that means they are not the same zoom level. You can't compare images that are shown at different zoom levels.
    – Billy Kerr
    Aug 27, 2018 at 13:43
  • so to adjust the image to make it more sharp for the smaller size you would suggest using the "Bicubic Sharper (best for reduction)".
    – Hannah Baker
    Aug 27, 2018 at 13:50
  • I have just never experienced when an image is smaller it is less sharp, that has only happened to me when you view the image larger
    – Hannah Baker
    Aug 27, 2018 at 13:53
  • 1
    Yes, rescale if you want a smaller image for a web page. Don't scale images in a browser, they always look like crap - whether you make them bigger or smaller
    – Billy Kerr
    Aug 27, 2018 at 13:56
1

Resize Images to Fit Webpage

Resize your images to fit the webpage without needing to be zoomed.

If using Photoshop, choose Preserve Details as the resample option when exporting - for a clean look with less loss of image quality.

enter image description here

Improve this answer
7
  • I tried this, but the image still seems to be "blurry" when i view it on the website, I hate to even call it blurry, it is almost like the contrast is strange, But I've tested it with multiple contrast and it doesn't seem to make a difference
    – Hannah Baker
    Aug 27, 2018 at 17:13
  • Do you have the webpage URL so I can check it out?
    – Electron
    Aug 28, 2018 at 1:38
  • celestekrishna.com/preludered/#libretto the pages of the libretto come up randomly, but I have inputted 3 different versions of "call up the devil" the two that are next to each other are the ones that I am testing, As you can see the rest of the images when you pop them out they become blurry. That is what we are trying to fic if that amkes any sense.
    – Hannah Baker
    Aug 28, 2018 at 10:07
  • also trying it with this page celestekrishna.com/preludered/#notes and the music square on this page is doing the same thing
    – Hannah Baker
    Aug 28, 2018 at 10:35
  • @HannahBaker that web page is rescaling the image, so the problem is with the site, not Photoshop.
    – Billy Kerr
    Aug 28, 2018 at 20:48
0

OK, I think I found the reason why your image look strange.

It seems to come from the css styling the fotorama library uses.

Here is the image as it is now on the web page:

If I turn on Developer Tools and select the parent element of the image, i notice that it has the transform attribute set to translateZ(0).

If I turn of this setting the image looks good:

So my advice is to either stop using fotorama, or change the code, so it doesn't add that attribute.

Improve this answer
3
  • The font is part of an image, not the website as such. celestekrishna.com/static/public/uploads/…
    – Electron
    Aug 29, 2018 at 10:27
  • thank you so much for looking into this. When I turned that off in the developer mood it changed the image. THanks!
    – Hannah Baker
    Aug 29, 2018 at 11:07
  • Good to hear! Please remember to accept the answer so others can benefit from it.
    – Wolff
    Aug 29, 2018 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.