Creating website graphics - resizing & loss of sharpness

[Mauryom28v]

My wife and I own & operate maurysmusic.com.  I need to use affinity photo to make graphics and we’ve been uploading them at 500x325 pixels.  Here’s an example from our blog:

 

https://www.maurysmusic.com/maury_s_blog/view/173549/martin_000c_21_tsp_custom_artist_edition_

 

I’m shooting the guitar picture with a Nikon d3100 and drag/dropping into a 500x325 black canvas in Affinty. The guitar is way too big.  Resizing it to fit causes blur.

 

1. How can I find a repeatable formula to get sharp 500x325 images for my website?

2. Am I wrong to be trying for 500x325?

 

thanks in advance.

 

[Alfred]

The aspect ratio should be 1.5:1 but 500:325 is slightly more than that, so an image derived from (say) a 2304 x 1536 original is going to be a little distorted and therefore not as sharp as it could be. You’ll get better results if you can change the final size to something like 495 x 330 instead of 500 x 325.

[Mauryom28v]

Thank you, I’ll try that.  

[Mauryom28v]

I’m really stumped.  If anyone can help me figure this out I’d be forever grateful.  Everything I’ve tried is blurry and unusable.  

[Cedge]

deleted due to misinterpretation of problem

[Mauryom28v]

7 hours ago, Cedge said:

I just captured the image and pasted it into AP. The guitar image you are using is 1200px x 780px. according to AP.  Asking a browser to show it at 500 x 325 is an excellent way for an image to lose all sorts of detail. Physically resize the image to fit (500 x 325 ), with your image editor,  before adding it to the page and uploading. I'm also not a big fan of using PNG files for web work, but it's just an old dog thing with me.  I personally prefer JPG, from long years of experience. Basically, never ask the web browser to dynamically resize your images... it does a terrible job.

 

 Thank you, I physically resized the gtr image to fit in AP by making the height 500 pixels, and I clicked resize, lanczos3, resample, JPEG - and the image immediately became blurry. I have a feeling I’m skipping one really obvious step.  

[Mauryom28v]

 Here’s exactly what I did, (I recorded my iPad’s screen)

 

 

 

57903C59-F355-4349-9C3B-8BFAE749C776.MOV

[Alfred]

Did you notice what happened to the width when you changed the height to 500px? It changed to 333.33px, but you displayed it at 325px. That’s just asking for trouble: you need to crop away the extra 8.33 pixels so that the image is exactly the size at which you want it to be displayed.

[Mauryom28v]

I did not notice that. I assumed it would constrain & keep the ratio since the lock was showing between H and W. Hmm

[Alfred]

5 minutes ago, Mauryom28v said:

I assumed it would constrain & keep the ratio

 

That’s exactly what it did. The resolution of the original is 4608 by 3072, so the aspect ratio is 3:2, but 500 isn’t exactly divisible by 3.

[Mauryom28v]

But In this example I only resized by choosing a height of 500. I haven’t tried to make the width 325 yet... at least not on purpose. 

[Alfred]

36 minutes ago, Mauryom28v said:

I haven’t tried to make the width 325 yet... at least not on purpose.

 

Why not? I thought that was the width you wanted it to be! What am I missing here??

[Mauryom28v]

I was told to resize the guitar image before I try to layer it on my canvas. What you’re seeing is just the very first step, I’m trying to make the guitar small enough so I can work with it and eventually resize the canvas to 325

[Alfred]

I would be inclined to leave it at its original size until you're finished working on it, and then resize and crop it, but if you want to resize it first I suggest that you divide by 8 so that 4608 × 3072 becomes exactly 576 × 384 without any pesky decimal places (or crop it to 3069px wide and then divide by 9 so that it becomes exactly 512 × 341).

 

[DM1]

If resizing to a smaller size AP help recommends 'bilinear' setting. Lanczos3 is for resizing to a larger size.

[Mauryom28v]

Oh wow thanks!  I’ll try that too.