why so fuzzy?

geckofly

Uploaded images to smugmug seem to have lost their sharpness! Since using a 5Dmk2 I have been using DPP ---- raw file (little bit of sharpen at 100% ,depending on image )export to tiff in PS, work with image and finally a high pass filter , images look tack sharp, then from DPP batch convert and rezize them for upload tried a few different resolutions but usually 1500, end result when viewed on smugmug, fuzzy images.

have tried a little sharpen after rezize , it seemes to help a little, but the clarity or quality has gone ,when in Smugmug
photos evan look half decent with windows picture viewer!
I have tried uploading at full resolution but same results

I have read a bit about sharpening issues with conversion from raw to jpeg with DPP , but working through tiff seemed to be a way around this
I really like DPP and hope it isnt a issue with this.
Am I doing something obviously wrong?
grateful for any help

SamirD

Don't resize the image. Upload one full resolution and see if anything changes.

geckofly

SamirD wrote: »

Don't resize the image. Upload one full resolution and see if anything changes.

yes I had tried this and nothing changed , however think it might be a NR issue with presets on DPP
am getting much better results after changing this ,and a final sharp after rezize.
thanks

SamirD

Hmm...have you tried uploading an unaltered jpg? That would remove the post process as a variable.

geckofly

SamirD wrote: »

Hmm...have you tried uploading an unaltered jpg? That would remove the post process as a variable.

Tried this a few times and still canot get the sharpness that I see on DPP or photoshop.
is there a quality difference between various uploaders

geckofly

problem solved
Ok a bit embarassing , but will post it in case others have the same issue.
realized of course that DPP adjustments were non destructive on the raw file, and you had to convert and save, to work with changes. However didnt realize it was the same for the Jpeg, so although the rezized and sharpened jpeg looked great in the browser, I didnt convert and save ,to create a new file . and so was always uploading the unsharpened file . no idea why this took so long to work out...maybe brain needs a little USM !

SamirD

Glad to hear you figured it out.

And for the record, there is no quality difference between any of the uploaders.

geckofly

SamirD wrote: »

Glad to hear you figured it out.

And for the record, there is no quality difference between any of the uploaders.

Thanks for suggestions, and yes, tried a few uploaders and quality identical.

desiredusername

Font in image displays blurry fuzzy
Hi,

I am trying to understand why an image with text is displaying the font as blurry / fuzzy.

The original image has sharp clear font. I used AI to design the image, flattened it, rasterized and I saved this has a high resolution jpg.
I posted the image two ways in my gallery:
1) used html to display the image pulled from another gallery (which is the goal so that I have just the image displaying and no gallery references such as 'Photo 1 of 1" displaying). In this case, I tried both leaving out the height and width attributes to let the image/gallery size itself and I then added these attributes to specify the "points" value taken from the original image size in photoshop. Both results display the image in the same size and both display fuzzy.

2) Posted the image directly in the gallery and set the image size in Settings as Original which displays the image exactly the same as using html to pull the image into the gallery. I then set the size to Medium just to see whether displaying the image in a smaller format would help, but the image font remains fuzzy.

I just now tried an image that I did not rasterize but that displays the same as the one that was rasterized.

Here is the gallery in question:

http://www.stevengregoryphotography.com/Other/TEST-Font/29984879_2L74K6

Any thoughts/suggestions appreciated.

Thanks!

Allen

desiredusername wrote: »

Hi,

I am trying to understand why an image with text is displaying the font as blurry / fuzzy.

The original image has sharp clear font. I used AI to design the image, flattened it, rasterized and I saved this has a high resolution jpg.
I posted the image two ways in my gallery:
1) used html to display the image pulled from another gallery (which is the goal so that I have just the image displaying and no gallery references such as 'Photo 1 of 1" displaying). In this case, I tried both leaving out the height and width attributes to let the image/gallery size itself and I then added these attributes to specify the "points" value taken from the original image size in photoshop. Both results display the image in the same size and both display fuzzy.

2) Posted the image directly in the gallery and set the image size in Settings as Original which displays the image exactly the same as using html to pull the image into the gallery. I then set the size to Medium just to see whether displaying the image in a smaller format would help, but the image font remains fuzzy.

I just now tried an image that I did not rasterize but that displays the same as the one that was rasterized.

Here is the gallery in question:

http://www.stevengregoryphotography.com/Other/TEST-Font/29984879_2L74K6

Any thoughts/suggestions appreciated.

Thanks!

In the gallery if that's the photo used below you have set medium as the largest size.

desiredusername

Hi,
I intentionally set it to medium just to see whether reducing the size would sharpen the font but it does not. I set it back to Original and you can see that it remains fuzzy.

As an aside, do you know where the facebook and tweet icons are being pulled from that appear directly under this image? I added fb media buttons to the footer of my site, but I don't think I have any code for those that appear under the image itself. I like it and want to know where/how to add that to my other galleries.

Thanks!

rainforest1155

It could be my eyes, but looking at the original at full size, the text is already not very clear. Here's a 100% crop of it.

What are you trying to achieve? Do you wish to post add that image to a page on your site? In my opinion, text in a photo will never be as good as the real deal. If you plan on doing multiple items like that, you might want to look at doing this straight in html/css and just add the actual photo as a photo to your page. The formatting you have on the image, should be possible with html/css. You can ask in the customization forum for assistance if you're unsure on how to.

If you wish to go the image on text route, I'd suggest creating your photo/text design in the actual resolution you wish to use it so there's no resizing needed which may affect the quality.

denisegoldberg

desiredusername wrote: »

I am trying to understand why an image with text is displaying the font as blurry / fuzzy.

Even if (when) you work through the fuzziness issue I'd urge you to consider using text in a gallery description instead of using an image to show text. Why? Some of your viewers may have issues reading text in whatever size you've chosen to use. If you present text as text instead of as an image your viewers can use the browsers CTRL+ CTRL- to change the size of the text to meet their needs.

--- Denise

desiredusername

Sebastian, your cropped image appears sharper than the jpg in my gallery- how is that possible?
My goal is to use html in the Description of this Gallery to display this jpg. I prefer to use this image because, if displayed sharp(er), I find this to be more graphically/aesthetically interesting that me just posting a photo and then using the comment section to describe my service.
In this test gallery:

http://www.stevengregoryphotography.com/Other/TEST-Font/29984879_2L74K6

I uploaded a larger sized image (20x30 inches), saved as a high resolution jpg which when viewed in Photoshop, is super tack sharp (and shaper than Sebastian's cropped version of my image- though if I can get my image to display as sharp as that cropped version, I would be happy).
so, the first image in my gallery is using the following html to pull the image in from another gallery:
<html>
<body>
<img src=http://www.smugmug.com/photos/i-ktd8gK2/0/L/i-ktd8gK2-L.jpg height="720" width="946.3"> >
</body>
</html>

Regardless of whether I specify the height and width in html or leave this out, or whether I set the image size in gallery settings to Original or try to shrink it down to Medium, the result is the same that my image that displays sharp when viewed outside of smugmug, becomes blurry when viewed either as an image posted to this test gallery or whether it's pulled in and displayed via html.

I have been reading online about font issues in terms of them being blurry in jpgs, but so far most of it reads of the blurry issue happening when saving the jpg in Illustrator or Photoshop. In my case, I have the fonts sharp at this point, but losing that sharpness once posting the image to the gallery.

any other suggestions/ideas welcome!

Thanks!
-steven

desiredusername

So, I just noticed that I think that the browser may play into the images' sharpness. When viewing the gallery in Firefox, I think the image is fairly blurry. When just now viewing it in Safari, I think it displays sharper. I took screen shots of both displays and posted a comparison in this gallery- when viewing this comparison through Firefox, both images appear blurry. When viewing in Safari, the top image appears blurry (the one taken from Firefox), but the lower one taken from Safari appears more sharp.
Have you any experience thoughts on how a browser may play into this and what might be done to control the sharpness based on possible browser settings? Seems odd to me, but that's what I have so far in troubleshooting this one.
Thanks!
-steven

Allen

It would be very easy to use real text and the photo in the description and the text would be tact sharp in any browser.

rainforest1155

desiredusername wrote: »

Sebastian, your cropped image appears sharper than the jpg in my gallery- how is that possible?

I viewed the original that you uploaded at 100% - so with no resizing having done to it at all.

Cindy

Same Problem - Fuzzy Photo Text - How & Can This Be Done?
I wanted to create both investment & testimonial scalable pages with pricing & testimonies on the photos themselves. I tried putting them in a slideshow so that the images with text could scale to the appropriate size of the device (from iPhone to desktop) but the text goes super fuzzy & is unreadable. I don't understand why photos themselves resize automatically & remain sharp but when text is added the text itself goes fuzzy.

For example: Take a look at Jasmine Stars Collections page http://www.jasmine-star.com/#/collections/ & her weddings page at http://www.jasmine-star.com/#/weddings/ (and numerous other websites do this with success)… She has text added to the photos themselves & it scales beautifully. I can clearly read it on my iPhone or on my 27" desktop. How? And more importantly: How can we smugmug users achieve text images that scale & remain crisp?

rainforest1155

Cindy,
Perhaps you could include a link to the photo / page you're referring to so we could take a look at it?

EntropicTendencies

desiredusername wrote: »

Sebastian, your cropped image appears sharper than the jpg in my gallery- how is that possible?
My goal is to use html in the Description of this Gallery to display this jpg. I prefer to use this image because, if displayed sharp(er), I find this to be more graphically/aesthetically interesting that me just posting a photo and then using the comment section to describe my service.
In this test gallery:

http://www.stevengregoryphotography.com/Other/TEST-Font/29984879_2L74K6

I uploaded a larger sized image (20x30 inches), saved as a high resolution jpg which when viewed in Photoshop, is super tack sharp (and shaper than Sebastian's cropped version of my image- though if I can get my image to display as sharp as that cropped version, I would be happy).
so, the first image in my gallery is using the following html to pull the image in from another gallery:
<html>
<body>
<img src=http://www.smugmug.com/photos/i-ktd8gK2/0/L/i-ktd8gK2-L.jpg height="720" width="946.3"> >
</body>
</html>

Regardless of whether I specify the height and width in html or leave this out, or whether I set the image size in gallery settings to Original or try to shrink it down to Medium, the result is the same that my image that displays sharp when viewed outside of smugmug, becomes blurry when viewed either as an image posted to this test gallery or whether it's pulled in and displayed via html.

I have been reading online about font issues in terms of them being blurry in jpgs, but so far most of it reads of the blurry issue happening when saving the jpg in Illustrator or Photoshop. In my case, I have the fonts sharp at this point, but losing that sharpness once posting the image to the gallery.

any other suggestions/ideas welcome!

Thanks!
-steven

Hi Steven,

Fonts are very complex and much of the ability to cleanly resize them is lost when the font is rasterised in an image. All modern fonts use an outline format to allow scaling. Modern fonts look good at different sizes because the font description includes hints on how to render the font at different sizes. Until you rasterize a layer within Photoshop, the text is still in vector format and can be transformed without impact. Once you render the JPEG the text is just pixels in the image and all the smarts of the font technology is lost.

If you want to use your current approach, I'd recommend that you work with only image sizes that you want to display and avoid any rescaling (e.g. use a 720x946 image and allow the font to be rendered optimally at that size).

Just a point of note - when you specify height and width in an HTML IMG tag, it is the browser which perform any image scaling and this can of course vary by browser. For efficiency, you'll find that the majority of platforms load an optimally resized image rather than what could be a massive original - e.g. there is no point in downloading a 20MB JPEG to display a 150x150 thumbnail).

SmugMug will generate custom sizes on demand - e.g. http://photos.smugmug.com/photos/i-ktd8gK2/0/720x946/i-ktd8gK2-720x946.jpg will retrieve your image already sized to 720x946.

I suspect that you will find that the resizing will have a similar detrimental effect on the text no matter where you host the images.

One major disadvantage of including your textual content in an image is that it is invisible to search engines.

Barrie
Smugmug Support Hero