Image Resolution for PNG and JPEG in 2024

[Stefanie Langwerden]

Hi all,

I'm wondering about what the image resolution for images is to use on websites in 2024.

I just have a portfolio site with images in 72ppi resolution.

Can you tell me which is better?

[Per Berntsen]

PPI (Pixels Per Inch) is metadata used for printing.

Pixel dimensions divided by PPI value = Printed dimensions in inches.

For screen viewing, PPI is irrelevant. The image will display exactly the same if the PPI value is 72, 600, 1000, or missing altogether.

The only important numbers are the pixel dimensions.

[jane-e]

@Stefanie Langwerden 

Resolution (pixels per inch) only applies to images that are printed. What matters for web is the size of the image, measured in pixels. What do you have there?

EDIT: My reply posted a few seconds after Per's.

Jane

[Stefanie Langwerden]

I now have this for images with background:

And i have this for images without background:

all in JPEG

[Stephen Marsh]

@Stefanie Langwerden 

So there you have it!

Are the images full screen?

If so, you need to decide on an image width or height in pixels.

This could be a common HD 1920px width for desktop viewing or something smaller depending on the website layout.

[D Fosse]

Traditionally, 1000 to 1500 pixels long side has been a comfortable web size. Keep in mind that the browser window rarely takes up the whole screen area.

With 4K screens becoming more common, you can double that - but note that the old images will still work in most cases. All web browsers will by default scale up images 2x when they detect that the user has a high resolution screen. Old websites still display with "normal" sized images on 4K screens.

There are ways to code websites to take advantage of high resolution screens, while still retaining usability on traditional screens. This becomes more common, and this is where it pays off to have larger images (2000 - 3000 pixels). But the site has to have special coding for this.

Be aware that there is always a risk of softening images somewhat because of this scaling. This can especially be a problem with so-called "responsive" websites, where images are dynamically scaled (and rearranged) according to browser window size on screen. Scaling is never optimal. It was easier in the old days, when images were always displayed at 100% (fixed) size. Then you could sharpen the image to final size. That's more difficult now.

If you need text and graphics to be tack sharp, don't do it as images. Do it as vector and save to SVG.