How to determine the size of a picture for a website?

Question

I recently started building WordPress websites and I am a little puzzled when it comes to dimensions of photos/banners etc. I am currently working on a template which has a huge photo at the top of the page and the person I am building the website for wants his photo on it instead of the stock one obviously. I need to understand how to determine what resolution the photo has to be and if there are other parameters I need to follow in order to always know the size of the desired photo.

You can find the photo of the DJ at the top of this page: Click Here

Also, if you scroll down a little you can see the banner where on top there are links (See Bellow). I was wondering how I find the resolution of that too, I am pretty sure it is a separate image which compliments the colors of the photo above to make it seem like a single object. I cropped it out and pasted it below (I didn't crop it perfectly that's why you see the white line below the banner) Hope you can help.

Answer 1

We generally prefer a picture with 1920px wide and keeps sufficient margin for it to be displayed on smaller screens.

(1366x768) is the most common screen as of today. You should consider to keep the subject within this resolution. Which means that consider a rectangle of (1920x whatever height is required) and keep your main subject image in the center. The subject image shouldn’t exceed 1366 in width.

Although css alone can achieve responsive layouts but you might need to use different images.

A couple of decades ago 800x600 followed by 1024x768 was the preferred screen resolution to target. It will continue to evolve over time. Probably after a decade we’d be making no less than 4K.

Answer 2

The large DJ image on that page is 1920px × 1080px. The menu image is 1920px × 274px. You can find these dimensions by using a web browser with developer tools such as Firefox/Google Chrome.

Here I show the Inspector and Media info window used in Firefox to inspect the elements on the web page.

Note that Web browsers ignore dpi/ppi settings so they aren't relevant here. All that matters in web design is the size of the images measured in pixels.