Jump to content
Mauryom28v

Creating website graphics - resizing & loss of sharpness

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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.


Alfred online2long.gif
Affinity Designer 1.7.0.367 • Affinity Photo 1.7.0.367 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.0.135 • Affinity Designer for iPad 1.7.0.9 • iOS 12.3.1 (iPad Air 2)

Share this post


Link to post
Share on other sites
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.  

Share this post


Link to post
Share on other sites

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.


Alfred online2long.gif
Affinity Designer 1.7.0.367 • Affinity Photo 1.7.0.367 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.0.135 • Affinity Designer for iPad 1.7.0.9 • iOS 12.3.1 (iPad Air 2)

Share this post


Link to post
Share on other sites
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. ;)


Alfred online2long.gif
Affinity Designer 1.7.0.367 • Affinity Photo 1.7.0.367 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.0.135 • Affinity Designer for iPad 1.7.0.9 • iOS 12.3.1 (iPad Air 2)

Share this post


Link to post
Share on other sites
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?? o.O


Alfred online2long.gif
Affinity Designer 1.7.0.367 • Affinity Photo 1.7.0.367 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.0.135 • Affinity Designer for iPad 1.7.0.9 • iOS 12.3.1 (iPad Air 2)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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).

 


Alfred online2long.gif
Affinity Designer 1.7.0.367 • Affinity Photo 1.7.0.367 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.0.135 • Affinity Designer for iPad 1.7.0.9 • iOS 12.3.1 (iPad Air 2)

Share this post


Link to post
Share on other sites

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


IPad Pro 10.5 512GB iOS 12.3.1 Affinity Photo 1.7.1.143 Affinity Design 1.7.1.1 Publisher for iPad ?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×