I’m making a website and every picture I’ve used on my website has the dimensions 800×800 (px). However, I’m now running into a problem where the layout of my website breaks because I have a picture where the content is only 800px (width) by 280px (height). I would like to know how to resize the image to be 800×800, without the content stretching. I’m using the image extension webp, but if I can get any other file that seems correct (like png), I can change the extension without it changing the image.

I’m on a Mac and mainly using the Preview app, I don’t have access to any Adobe software.

Important things to notice:

• The background of the image must remain transparent
• The image may not stretch
• Final dimensions must be 800×800 (pixels)

I’m okay with using a single pixel in all corners if that’s how it must be, but I expect there to be an easier way.

Image I’m talking about