Pixelated exports - lightroom

[magvadesign]

Hi All

First post for me here so you would be correct to assume I am very much a novice... I am really hoping that someone might be able to help me out with a problem I am having.

I have shot a number of photos on a Canon 70D with a Sigma ART 50mm 1.4 lens and have processed these in LR. These photos are 5472*3648 ISO 100 1/15 sec at f 6.3. Resolution in LR is perfect and detailed (shooting wedding stationery).

I need to export these for use on our website, however when I scale along the long edge to 1150px (at a quality of 70 - 95) all images appear very hazy or pixelated in areas particular around type (essential that is crisp) . I have also tried to resize these in PS and when exported I get the same result.

Not sure if it matters, but I am viewing these images on a 5K iMac display.

I am at a loss as to how I might resolve this issue and am hoping that someone in the community might have a solution.

Thanks in advance

[dj_paige]

Can you show us an example of what you see in Lightroom and another example of what you see in the exported photo? What zoom/magnification are you using in each when you view these images?

Can you tell us exactly what software you are using to view the exports?

If you are using Photoshop, can you try saving the file as .gif instead of .jpg and see if the problem goes away?

[magvadesign]

Thanks for having a look dj_paige

I am not sure if I can add URL's here but if so you can view the two files at these (both jpgs)

The original full size RAW file converted to a jpeg 5472*3648 : https://www.magva.com/wp-content/uploads/2017/02/Black-Tie-Wedding-Invitation-54723648.jpg

The exported file as a jpeg 1150*767 : https://www.magva.com/wp-content/uploads/2017/02/Black-Tie-Wedding-Invitation-full-1150767.jpg

In all cases I am viewing the results in a web browser (Chrome)

I really appreciate you having a look.

[dj_paige]

I see what you mean, and I can imagine that downsizing to 1150x767 could cause this problem, but again I would recommend you try saving from photoshop as a gif instead of a jpg and see if the problem goes away.

[magvadesign]

Thanks again.

Did give it a try, but unfortunately the problem does remain. Also the reduced pallet of colours in the gif caused some colour changes.

[dj_paige]

So I think the bottom line in my mind is that 1150*767 doesn't provide the resolution to obtain un-pixelated text. Maybe someone else has a very bright idea about what you can do to fix this, but unfortunately I do not.

[Just Shoot Me]

Could you upload the original RAW file to Dropbox or the like.

What I'm seeing on my monitor is your first images is blurry, and large, and the second is clearer but smaller.

I would like to see the original RAW on my system.

[Just Shoot Me]

Here is what I'm seeing on my secondary monitor where my Chrome web browser opens to.

This is the larger of the 2 images you linked to.

And this is the smaller of the 2.

Really need to see the original RAW file.

Your f/stop is to small and your shutter speed to slow. Hopefully you are using a tripod but even with a tripod the shutter speed of 1/15 of a second will cause blurriness with any movement of the camera, even the slap of the shutter.

[magvadesign]

Thanks for taking a look. I've just PM'd a link

[Just Shoot Me]

What is you exact goal? To reduce file size for uploading? To reduce the size in inched/mm of the displayed image on the webpage?

Here is one exported at full pixel dimensions at 600 PPI with quality at 50 brought into PS and resized to 1200 PPI which reduced its size in inches to 4.56 x 3.04 and its file size to 2.1 MBs.

[magvadesign]

That looks really really good.

My objective is to get the file size down to acceptable level for web while maintaining as much of the crispness in the type. If the image is 1100px (or even 1200px) wide I'd be very happy if we could get the files size down. Not sure if this is going to be possible.

Certainly what you have is really crisp.

[magvadesign]

Hi again,

I am trying to work through this this workflow. Am I correct you are doing this:

File setting - quality 50

image sizing - resolution 600

This results in a file size of about 1.6 MB for me.

Then in Photoshop - resize to 1200 px. (I also use bicubic sharper)

When I try these setting I am still getting a hazy result.

I think if I can get my file size close to 300/400 kB it might be as far as I can go given that its for web usage.

[dj_paige]

File size does not determine image quality. Do not make the mistake of thinking you need a specific file size.

[magvadesign]

I am expecting too much from LR? or am I unsure of what I need?

My understanding always has been that the file size should be small to ensure a good user experience a website - I have always aimed to get files below 150 kB for this reason. Unfortunately where we are located a lot of people are still on DSL connections...

I have always rescaled my main images to about 1150 * 767 to ensure that I got the file size down and set a quality of about 70/80.

For whatever reason this time can't get good crisp photos unless I export then at full size, quality of 50 and results in file sizes of 2 MB or greater.

Is my thinking wrong, or do I need to do something else.

[dj_paige]

My understanding always has been that the file size should be small to ensure a good user experience a website

You want to look at Image size, not file size. That determines the quality of what you see.

File size determines the speed at which the image travels across the internet, it does not determine image quality.

For whatever reason this time can't get good crisp photos unless I export then at full size, quality of 50 and results in file sizes of 2 MB or greater.

I think this has been explained above. If you must have the crisp text that you are looking for, then reducing the image size to 1150x767 seems to make this difficult or impossible. This is not a Lightroom problem. Any software you use that reduces the image to 1150x767 will show this problem.

[Bob Somrak]

At that resolution the thinnest part of the text is only 1 or 2 pixels wide so at an angle is has to have the "jaggies".  I don't think there is anything you can do to correct this except post larger photos on the web.

[D Fosse]

magvadesign  wrote

Not sure if it matters, but I am viewing these images on a 5K iMac display.

In all cases I am viewing the results in a web browser (Chrome)

If Chrome on Mac OS behaves like any other browser on the planet, it scales up on high density displays, so that you're viewing at 200%. In other words one image pixel maps to four screen pixels. Compared to the full 5K resolution, this will look pixelated.

The rest is jpeg artifacts. I think this a case for saving at full quality (minimum compression), something normally not necessary. But the fine lines here are particularly vulnerable to jpeg artifacts.

Other than that there's nothing wrong with the file.

[Todd Shaner]

magvadesign  wrote

I need to export these for use on our website, however when I scale along the long edge to 1150px (at a quality of 70 - 95) all images appear very hazy or pixelated in areas particular around type (essential that is crisp) .

You have two issues working against your objective:

1) The invitation image size is too small to render the text.

2) The invitation image is very low contrast, which makes it harder to read the small text

Solution 1

I suggest shooting the invitation as a separate image file and apply settings to increase the text legibility:

Shoot the background image without the invitation with the the items located so that the invitation image can be placed as large as possible. Next select both images and use Edit In> Open as layers in Photoshop and adjust the composition as required.

Solution 2 (Easier)

You could also simply shoot one image file making sure the invitation is as large as possible in the layout. You can then apply the above Tone settings to just the invitation using the Adjustment Brush. If there is spill-over hold down the ALT key to erase the unwanted Adjustment Brush areas.

This was done using the LR Adjustment Brush on a single image file.

[magvadesign]

Thanks for the suggestions. I am a complete novice at LR, PS and photography. I'd imagine this approach might be above my skill level.

[Todd Shaner]

magvadesign  wrote

Thanks for the suggestions. I am a complete novice at LR, PS and photography. I'd imagine this approach might be above my skill level.

Can you reshoot the picture? If so layout the envelope, leaves and pen so that the invitation appears full-height in the image. If you can't shoot it that close simply use the LR Crop tool so it looks like the below image and then Export to JPEG.

EDIT: You'll also need to add the below Tone edits to the original camera file. This will make the text clearer. It's better to do this with the Adjustment Brush to the invitation, but it can also be done as below in the Basic panel to the whole image.

LR JPEG Export with 50 Quality, Long Edge 1150 px, Screen Standard Sharpening. The file size is 171 KB.