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

  • It might just be because the browser uses a quick downscaling method. Have you tried in different browsers? – Wolff Aug 27 '18 at 16:21
  • I usually use chrome, but tried on safari and it looked the same – Hannah Baker Aug 27 '18 at 17:03
  • Try Firefox and maybe Edge also. I think Safari uses the same downscale algorithm as Chrome. – Wolff Aug 27 '18 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 '18 at 10:08
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

  • 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 '18 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 '18 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 '18 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 '18 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 '18 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

  • 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 '18 at 17:13
  • Do you have the webpage URL so I can check it out? – Invariant Change Aug 28 '18 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 '18 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 '18 at 10:35
  • @HannahBaker that web page is rescaling the image, so the problem is with the site, not Photoshop. – Billy Kerr Aug 28 '18 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.

  • The font is part of an image, not the website as such. celestekrishna.com/static/public/uploads/… – Invariant Change Aug 29 '18 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 '18 at 11:07
  • Good to hear! Please remember to accept the answer so others can benefit from it. – Wolff Aug 29 '18 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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